/* =====================================================================
   HYUN ENGINES — Combined WooCommerce stylesheet
   One file for the cart, checkout, order-received and account pages. Each
   section is scoped under its own wrapper (.he-cart / .he-checkout /
   .he-thankyou / .he-account) plus the global notice styles, so nothing
   leaks site-wide. (The shop archive is now built in Elementor.)
   ===================================================================== */

/* ============================ NOTICES ============================ */
/* =====================================================================
   HYUN ENGINES — WooCommerce notice styling (site-wide on WooCommerce pages)
   Replaces the theme/WooCommerce default purple top-border + icon-font glyph
   with the Hyun Engines design language. Loaded on shop, product, cart,
   checkout and account pages.
   ===================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce-store-notice {
  font-family: "Archivo", system-ui, sans-serif !important;
  background: #fff !important;
  color: #3a3f46 !important;
  border: 1px solid #e7e2d7 !important;
  border-left: 3px solid #e8431b !important;
  border-top: none !important;
  border-radius: 10px !important;
  padding: 15px 18px 15px 38px !important;
  margin: 0 0 22px !important;
  position: relative;
  list-style: none outside;
  box-shadow: 0 10px 28px -20px rgba(0, 0, 0, 0.45);
  font-size: 0.92rem;
  text-align: left;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a,
.woocommerce-noreviews a,
.woocommerce-store-notice a {
  color: #e8431b;
}
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button,
.woocommerce-noreviews a.button,
.woocommerce-store-notice a.button {
  float: inherit;
}
.woocommerce-message a:hover,
.woocommerce-info a:hover,
.woocommerce-error a:hover,
.woocommerce-noreviews a:hover,
.woocommerce-store-notice a:hover {
  text-decoration: underline;
}
/* accent per type */
.woocommerce-message {
  border-left-color: #3ba776 !important;
}
.woocommerce-error {
  border-left-color: #e8431b !important;
}
.woocommerce-info {
  border-left-color: #f2a93b !important;
}

/* swap the WooCommerce icon font glyph for clean unicode marks */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  font-family: "Archivo", system-ui, sans-serif !important;
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  width: auto;
  height: auto;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1;
  display: inline-block;
}
.woocommerce-message::before {
  content: "\2713" !important;
  color: #3ba776 !important;
}
.woocommerce-error::before {
  content: "\2715" !important;
  color: #e8431b !important;
}
.woocommerce-info::before {
  content: "\0021" !important;
  color: #f2a93b !important;
}

/* kill the default ::after table-clear pseudo so it can't add stray boxes */
.woocommerce-message::after,
.woocommerce-info::after,
.woocommerce-error::after {
  content: none !important;
  display: none !important;
}

/* buttons inside notices (e.g. the "View cart" link after add-to-cart) */
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
  background: #0e0f11 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 7px !important;
  padding: 9px 16px !important;
  font-family: "Archivo", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.74rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  box-shadow: none !important;
  line-height: 1.2 !important;
  float: right;
  margin: -4px 0 0 14px;
}
.woocommerce-message .button:hover,
.woocommerce-error .button:hover,
.woocommerce-info .button:hover {
  background: #23272e !important;
  transform: none !important;
}

/* ============================ BREADCRUMB =========================== */
/* =====================================================================
   HYUN ENGINES — WooCommerce breadcrumb (site-wide on WooCommerce pages).
   Was rendering fully unstyled (WooCommerce/browser defaults: generic
   gray, default font, no spacing) — matches the mockup's .crumbs style.
   ===================================================================== */
.woocommerce .woocommerce-breadcrumb {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.8rem !important;
  color: #8a8e96 !important;
  padding: 20px 0 0 !important;
  margin: 0 0 16px !important;
}
.woocommerce-breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.woocommerce-breadcrumb a:hover {
  color: #ff6a3d;
}

/* ===================== SHARED DESIGN TOKENS ====================== */
/* =====================================================================
   HYUN ENGINES — Shared tokens + base reset for every WooCommerce
   wrapper (.he-cart / .he-checkout / .he-thankyou / .he-account).
   The shop archive is now built in Elementor (stl-addons widgets).
   ===================================================================== */
/* Shared design tokens — identical for every WooCommerce wrapper. */
.he-cart,
.he-checkout,
.he-thankyou,
.he-account {
  --ink: #0e0f11;
  --graphite: #16191d;
  --steel: #23272e;
  --line: #2e333b;
  --paper: #f4f1eb;
  --paper-2: #eae5db;
  --fog: #9aa1ab;
  --cloud: #e9e7e2;
  --accent: #e8431b;
  --accent-2: #ff6a3d;
  --amber: #f2a93b;
  --ok: #3ba776;
  --display: "Archivo Expanded", "Archivo", sans-serif;
  --body: "Archivo", system-ui, sans-serif;
  --maxw: 1180px;
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* Page padding differs per wrapper (shop has none — its hero is built in Elementor). */
.he-cart,
.he-checkout,
.he-thankyou {
  padding: 46px 0 90px;
}
.he-account {
  padding: 40px 0 90px;
}
/* Shared base reset. */
.he-cart *,
.he-checkout *,
.he-thankyou *,
.he-account * {
  box-sizing: border-box;
}
.he-cart a,
.he-checkout a,
.he-thankyou a,
.he-account a {
  color: inherit;
  text-decoration: none;
}
.he-cart img,
.he-checkout img,
.he-thankyou img {
  display: block;
  max-width: 100%;
}
/* ================== CART / CHECKOUT / THANK YOU =================== */
/* =====================================================================
   HYUN ENGINES — Cart & Checkout redesign
   Loaded only on the cart and checkout pages. Scoped under .he-cart /
   .he-checkout so it never leaks into the rest of the site. Skins
   WooCommerce's native markup (tables, form-rows, payment, place order).
   ===================================================================== */
/* tokens, reset, base padding: see the shared block at the top of this file */
.he-cart h1,
.he-cart h2,
.he-cart h3,
.he-checkout h1,
.he-checkout h2,
.he-checkout h3,
.he-thankyou h1,
.he-thankyou h2,
.he-thankyou h3 {
  font-family: var(--display);
  line-height: 1.06;
  letter-spacing: -0.01em;
}

/* shared buttons */
.he-btn {
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  border: none;
  transition: 0.2s;
}
.he-btn-accent {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px -8px rgba(232, 67, 27, 0.7);
}
.he-btn-accent:hover {
  background: var(--accent-2, #ff6a3d) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* steps indicator */
.he-steps {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.82rem;
  color: #8a8f98;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.he-steps b {
  color: var(--ink);
  font-family: var(--body);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.he-steps b::before {
  content: "1";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-size: 0.72rem;
}
.he-steps > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.he-steps > span:not(.he-arrow)::before {
  content: "2";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--paper-2);
  color: #525964;
  display: inline-grid;
  place-items: center;
  font-size: 0.72rem;
}
.he-steps > span:not(.he-arrow):last-of-type::before {
  content: "3";
}
.he-steps .he-arrow {
  color: #c9c2b5;
}
/* checkout variant: step 1 done, step 2 active */
.he-steps.checkout b::before {
  content: "2";
}
.he-steps.checkout .done {
  color: var(--ok);
}
.he-steps.checkout .done::before {
  content: "\2713";
  background: rgba(59, 167, 118, 0.16);
  color: var(--ok);
}
.he-steps.checkout > span:not(.he-arrow):not(.done)::before {
  content: "3";
}

/* =================== CART =================== */
.he-cartgrid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 30px;
  align-items: start;
}
/* override WooCommerce defaults: .cart-collaterals / .cart_totals float + 48% width */
.he-cart .cart-collaterals,
.he-cart .he-cartside {
  width: 100% !important;
  float: none !important;
  margin: 0;
}
.he-cart .he-summary.cart_totals {
  width: 100% !important;
  float: none !important;
  margin: 0;
}
.he-cart .woocommerce-cart-form {
  margin: 0;
}
.he-items {
  display: grid;
  gap: 16px;
}
.he-citem {
  display: grid;
  grid-template-columns: 96px 1fr auto auto auto;
  gap: 20px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--paper-2);
  border-radius: 14px;
  padding: 18px 20px;
}
.he-cthumb {
  width: 96px;
  height: 84px;
  border-radius: 10px;
  overflow: hidden;
  background: #f7f4ee;
}
.he-cthumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.he-cinfo h3 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}
.he-cinfo h3 a:hover {
  color: var(--accent);
}
.he-csub {
  font-size: 0.8rem;
  color: #6b7280;
  margin-top: 4px;
}
.he-csub b {
  color: var(--ok);
  font-weight: 600;
}
.he-cinfo .variation,
.he-cinfo dl {
  font-size: 0.78rem;
  color: #6b7280;
  margin-top: 4px;
}

/* quantity stepper (enhanced from WooCommerce .quantity) */
.he-cqty .quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--paper-2);
  border-radius: 8px;
  overflow: hidden;
}
.he-cqty .he-qtybtn {
  width: 34px;
  height: 38px;
  border: none;
  background: var(--paper);
  font-size: 1rem;
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.he-cqty .he-qtybtn:hover {
  background: var(--paper-2);
}
.he-cqty .quantity input.qty {
  width: 46px;
  height: 38px;
  border: none;
  text-align: center;
  font-weight: 700;
  font-family: var(--body);
  font-size: 0.95rem;
  background: #fff;
  -moz-appearance: textfield;
  appearance: textfield;
  padding: 0;
}
.he-cqty .quantity input.qty::-webkit-outer-spin-button,
.he-cqty .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.he-cprice {
  text-align: right;
  white-space: nowrap;
}
.he-cprice b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1rem;
  display: block;
}
.he-cprice s {
  color: #9aa0a8;
  font-size: 0.8rem;
}
.he-cartcol .he-cremove a.remove {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--paper-2);
  background: #fff;
  display: grid;
  place-items: center;
  color: #9aa0a8 !important;
  cursor: pointer;
  transition: 0.2s;
  font-size: 1.1rem;
  text-decoration: none;
  line-height: 1;
}
.he-cartcol .he-cremove a.remove:hover {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  background: #fff;
}

.he-cartfoot {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
  align-items: center;
}
.he-coupon {
  display: flex;
  gap: 10px;
}
.he-coupon input {
  height: 46px;
  border: 1px solid var(--paper-2);
  border-radius: 8px;
  padding: 0 14px;
  font-family: var(--body);
  font-size: 0.9rem;
  background: #fff;
  min-width: 200px;
}
.he-coupon input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 67, 27, 0.12);
}
.he-cart .he-apply {
  background: var(--ink) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0 18px !important;
  height: 46px;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.he-cart .he-apply:hover {
  background: var(--steel) !important;
}
.he-cartfoot-actions {
  display: flex;
  gap: 14px;
  align-items: center;
}
.he-cart .he-update {
  background: transparent !important;
  border: 1.5px solid var(--paper-2) !important;
  color: var(--ink) !important;
  border-radius: 8px !important;
  padding: 0 18px !important;
  height: 46px;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.2s;
}
.he-cart .he-update:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.he-update[disabled],
.he-update:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.he-continue {
  align-self: center;
  font-weight: 600;
  color: var(--accent) !important;
  font-size: 0.9rem;
}
.he-continue:hover {
  color: #0e0f11 !important;
}

/* cart summary / totals */
.he-summary {
  background: #fff;
  border: 1px solid var(--paper-2);
  border-radius: 16px;
  padding: 26px;
  position: sticky;
  top: 96px;
}
.he-summary h2 {
  font-size: 1.15rem;
  margin-bottom: 18px;
}
.he-summary .he-stable {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  border: none !important;
}
.he-summary .he-stable tr {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--paper);
}
.he-summary .he-stable th,
.he-summary .he-stable td {
  border: none !important;
  background: transparent !important;
}
.he-summary .he-stable th {
  font-weight: 500;
  color: #525964;
  text-align: left;
  padding: 0;
}
.he-summary .he-stable td {
  text-align: right;
  padding: 0;
  font-weight: 600;
}
.he-summary .he-stable tr.order-total {
  border-bottom: none;
  padding-top: 16px;
  align-items: baseline;
}
.he-summary .he-stable tr.order-total th {
  font-weight: 700;
  color: var(--ink);
}
.he-summary .he-stable tr.order-total td {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 800;
}
.he-summary
  .he-stable
  .woocommerce-shipping-totals
  .woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
  font-size: 0.86rem;
}
.he-summary .he-stable .shipping-calculator-button {
  color: var(--accent);
}
.he-shipnote {
  font-size: 0.8rem;
  color: #6b7280;
  background: var(--paper);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 12px 0 12px;
}
.he-summary .wc-proceed-to-checkout {
  padding: 0;
  margin: 0;
}
.he-cart .he-summary .wc-proceed-to-checkout a.checkout-button,
.he-cart .he-summary .wc-proceed-to-checkout .button,
.he-cart .he-summary .checkout-button {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 15px 20px !important;
  border-radius: 8px !important;
  align-items: center;
  justify-content: center;
  border: none !important;
  box-shadow: 0 8px 24px -8px rgba(232, 67, 27, 0.7);
  transition: 0.2s;
  text-decoration: none;
  white-space: normal;
  line-height: 1.2;
}
.he-cart .he-summary .wc-proceed-to-checkout a.checkout-button br,
.he-cart .he-summary .wc-proceed-to-checkout .button br,
.he-cart .he-summary .checkout-button br {
  display: none;
}
.he-cart .he-summary .wc-proceed-to-checkout a.checkout-button:hover,
.he-cart .he-summary .wc-proceed-to-checkout .button:hover {
  background: var(--accent-2) !important;
  transform: translateY(-2px);
}
.he-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #6b7280;
  margin-top: 14px;
}
.he-trust {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  border-top: 1px solid var(--paper);
  padding-top: 16px;
}
.he-trust span {
  font-size: 0.8rem;
  color: #3a3f46;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.he-trust span::before {
  content: "\2713";
  color: var(--ok);
  font-weight: 800;
  flex: none;
}

/* empty cart */
.he-cart--empty .he-empty {
  background: #fff;
  border: 1px solid var(--paper-2);
  border-radius: 16px;
  padding: 60px 30px;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
.he-empty-ico {
  color: #c9c2b5;
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}
.he-cart--empty .cart-empty,
.he-cart--empty .wc-empty-cart-message {
  font-size: 1.05rem;
  color: #525964;
  margin-bottom: 22px;
}
.he-cart--empty .return-to-shop {
  margin: 0;
}

/* =================== CHECKOUT =================== */
/* "Have a coupon?" form (WooCommerce native, revealed by the toggle notice) */
.he-checkout form.checkout_coupon {
  background: #fff;
  border: 1px solid var(--paper-2);
  border-radius: 12px;
  padding: 20px;
  margin: 0 0 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.he-checkout .checkout_coupon .form-row {
  margin: 0;
  padding: 0;
  width: auto;
  float: none;
}
.he-checkout .checkout_coupon .form-row-first {
  flex: 1 1 220px;
}
.he-checkout .checkout_coupon .form-row-first br {
  display: none;
}
.he-checkout .checkout_coupon .input-text {
  width: 100%;
  height: 48px;
  border: 1px solid var(--paper-2);
  border-radius: 8px;
  padding: 0 14px;
  font-family: var(--body);
  font-size: 0.92rem;
  background: var(--paper);
  color: var(--ink);
  box-sizing: border-box;
}
.he-checkout .checkout_coupon .input-text:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(232, 67, 27, 0.12);
}
.he-checkout .checkout_coupon button.button {
  height: 48px;
  background: var(--ink) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0 22px !important;
  font-family: var(--body);
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}
.he-checkout .checkout_coupon button.button:hover {
  background: var(--steel) !important;
}
.he-checkout .checkout_coupon .clear {
  display: none;
}

.he-checkgrid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 34px;
  align-items: start;
}
/* stack billing + additional panels in the left column */
.he-checkcol .col2-set {
  display: block;
}
.he-checkcol .col2-set .col-1,
.he-checkcol .col2-set .col-2 {
  width: 100%;
  float: none;
  padding: 0;
}
.he-checkcol .woocommerce-billing-fields,
.he-checkcol .woocommerce-shipping-fields,
.he-checkcol .woocommerce-additional-fields,
.he-checkcol .woocommerce-account-fields {
  background: #fff;
  border: 1px solid var(--paper-2);
  border-radius: 16px;
  padding: 30px;
  margin-bottom: 24px;
}
.he-checkcol h3 {
  font-size: 1.2rem;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight:800;
}
.he-checkcol h3::before {
counter-increment: he-costep;
  content: counter(he-costep);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.86rem;
  flex: none;
}
.he-checkcol .woocommerce-additional-fields p:first-of-type {
  margin-top: 0;
}

/* field grid */
.he-checkout .woocommerce-billing-fields__field-wrapper,
.he-checkout .woocommerce-shipping-fields__field-wrapper,
.he-checkout .woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}
.he-checkout .woocommerce-billing-fields__field-wrapper > p:empty,
.he-checkout .woocommerce-shipping-fields__field-wrapper > p:empty,
.he-checkout .woocommerce-additional-fields__field-wrapper > p:empty {
  display: none;
}
/* flex-column rows + input pushed to the bottom = inputs align across a row
   even when one label wraps to two lines and its neighbour is one line. */
.he-checkout .form-row {
  margin: 0;
  padding: 0;
  float: none !important;
  width: auto !important;
  display: flex;
  flex-direction: column;
}
.he-checkout .form-row-wide,
.he-checkout .form-row-first.address-field,
.he-checkout #order_comments_field,
.he-checkout .notes {
  grid-column: 1 / -1;
}
.he-checkout .form-row-first {
  grid-column: 1;
}
.he-checkout .form-row-last {
  grid-column: 2;
}
.he-checkout .form-row label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #3a3f46;
  margin-bottom: 7px;
  line-height: 1.3;
}
.he-checkout .form-row label .required {
  color: var(--accent);
  border: none;
  text-decoration: none;
}
.he-checkout .form-row label .optional {
  color: #9aa0a8;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.he-checkout .woocommerce-input-wrapper {
  width: 100%;
  margin-top: auto;
}
.he-checkout .form-row .input-text,
.he-checkout .form-row input[type="text"],
.he-checkout .form-row input[type="email"],
.he-checkout .form-row input[type="tel"],
.he-checkout .form-row input[type="password"],
.he-checkout .form-row select,
.he-checkout .form-row .select2-selection,
.he-checkout .form-row textarea,
.he-checkout #order_comments {
  width: 100% !important;
  height: 48px;
  border: 1px solid var(--paper-2) !important;
  border-radius: 9px !important;
  padding: 0 14px;
  font-family: var(--body);
  font-size: 0.95rem;
  background: var(--paper) !important;
  transition: 0.2s;
  color: var(--ink) !important;
  box-shadow: none !important;
}
.he-checkout .form-row textarea,
.he-checkout #order_comments {
  height: auto !important;
  min-height: 90px;
  padding: 12px 14px !important;
  resize: vertical;
  line-height: 1.5;
}
.he-checkout .select2-container .select2-selection--single {
  display: flex;
  align-items: center;
}
.he-checkout .form-row .input-text:focus,
.he-checkout .form-row select:focus,
.he-checkout .form-row textarea:focus,
.he-checkout #order_comments:focus {
  outline: none;
  border-color: var(--accent) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(232, 67, 27, 0.12) !important;
}

/* order review + payment (right column) */
.he-checkside {
  position: sticky;
  top: 24px;
  background: #fff;
  border: 1px solid var(--paper-2);
  border-radius: 16px;
  padding: 30px;
}
.he-checkside > h3#order_review_heading {
  font-size: 1.2rem;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.he-checkside > h3#order_review_heading::before {
  content: "";
  width: 18px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  flex: none;
}
.he-checkside .shop_table {
  width: 100%;
  border-collapse: collapse !important;
  margin: 0;
  border: none !important;
  border-radius: 0 !important;
}
.he-checkside .shop_table thead {
  display: none;
}
.he-checkside .shop_table th,
.he-checkside .shop_table td {
  border: none !important;
  background: transparent !important;
}
.he-checkside .shop_table tr {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--paper) !important;
  font-size: 0.93rem;
}
.he-checkside .shop_table tbody tr:first-child {
  padding-top: 0;
}
.he-checkside .shop_table th {
  text-align: left;
  font-weight: 500;
  color: #525964;
  padding: 0;
}
.he-checkside .shop_table td {
  text-align: right;
  padding: 0;
  font-weight: 600;
}
.he-checkside .shop_table .cart_item {
  align-items: flex-start;
}
.he-checkside .shop_table .cart_item .product-name {
  text-align: left !important;
  color: #2c3036;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.he-checkside .shop_table .cart_item .product-name .nm {
  line-height: 1.3;
}
.he-checkside .shop_table .cart_item .product-name .he-osub {
  color: #8a8f98;
  font-weight: 500;
  font-size: 0.76rem;
}
.he-checkside .shop_table .cart_item .product-total {
  white-space: nowrap;
  font-weight: 700;
}
.he-checkside .shop_table .product-quantity {
  color: #8a8f98;
  font-weight: 600;
}
.he-checkside .shop_table tfoot .order-total {
  border-bottom: none;
  padding-top: 16px;
  align-items: baseline;
}
.he-checkside .shop_table tfoot .order-total th {
  font-weight: 700;
  color: var(--ink);
}
.he-checkside .shop_table tfoot .order-total td {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 800;
}

/* payment box */
.he-checkside #payment {
  background: transparent;
  margin-top: 20px;
  border-top: 1px solid var(--paper);
  padding-top: 20px;
}
.he-checkside #payment ul.payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
  display: grid;
  gap: 10px;
}
.he-checkside #payment ul.payment_methods li {
  border: 1.5px solid var(--paper-2);
  border-radius: 12px;
  padding: 14px 16px;
  transition: 0.2s;
}
.he-checkside #payment ul.payment_methods li:has(input:checked) {
  border-color: var(--accent);
  background: rgba(232, 67, 27, 0.04);
}
.he-checkside #payment ul.payment_methods li label {
  font-weight: 700;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
/* flatten the payment box: no inner grey card so the gateway's own field
   (e.g. Stripe element) isn't a box-inside-a-box */
.he-checkside #payment .payment_box {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 0 0 !important;
  margin: 8px 0 0 !important;
  font-size: 0.86rem;
  color: #525964;
  box-shadow: none !important;
}
.he-checkside #payment .payment_box::before {
  display: none !important;
}
.he-checkside #payment ul.payment_methods li:has(input:checked) {
  border-color: var(--accent);
  background: rgba(232, 67, 27, 0.04);
  padding-bottom: 16px;
}
.he-checkside #payment .payment_box p:first-child {
  margin-top: 0;
}
.he-checkside #payment .payment_box .form-row {
  padding: 0;
}
.he-checkside #payment .woocommerce-privacy-policy-text {
  font-size: 0.78rem;
  color: #6b7280;
  margin-top: 12px;
}
.he-checkout .he-checkside #place_order {
  width: 100% !important;
  margin-top: 18px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 17px !important;
  border-radius: 10px !important;
  border: none !important;
  background: var(--accent) !important;
  color: #fff !important;
  cursor: pointer;
  box-shadow: 0 10px 28px -10px rgba(232, 67, 27, 0.75);
  transition: 0.2s;
  float: none !important;
}
.he-checkout .he-checkside #place_order:hover {
  background: var(--accent-2) !important;
  transform: translateY(-2px);
}
.he-checkside .shipnote,
.he-checkside .he-shipnote {
  font-size: 0.8rem;
  color: #6b7280;
  background: var(--paper);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 12px;
  display: block;
  font-weight: 400;
}
/* shipnote rendered inside the totals table (as a tfoot row, so the checkout
   AJAX fragment replace can't duplicate it) */
.he-checkside .shop_table tr.he-shipnote-row {
  display: block;
  border-bottom: none !important;
  padding: 12px 0 0;
}
.he-checkside .shop_table tr.he-shipnote-row td {
  display: block;
  text-align: left;
  width: 100%;
  padding: 0 !important;
}
.he-help {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--ink);
  color: var(--cloud);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 18px;
  font-size: 0.84rem;
}
.he-help b {
  color: #fff;
}
.he-help a {
  color: var(--accent-2);
  font-weight: 700;
}

/* WooCommerce notices inside our wrappers */
.he-cart .woocommerce-message,
.he-checkout .woocommerce-message,
.he-cart .woocommerce-info,
.he-checkout .woocommerce-info,
.he-cart .woocommerce-error,
.he-checkout .woocommerce-error {
  background: #fff;
  border: 1px solid var(--paper-2);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 18px;
  list-style: none;
  color: #3a3f46;
}
input::placeholder,
textarea::placeholder {
  font-size: 12px !important;
}
.woocommerce-checkout #payment div.payment_box {
  padding: 0 !important;
}
.woocommerce-checkout #payment div.payment_box fieldset {
  padding: 0;
  border: none;
}
#wc-stripe-payment-method-instructions-card {
  font-size: 0.78rem;
  margin-bottom: 10px;
}
/* =================== ORDER RECEIVED / THANK YOU =================== */
.he-thankyou .woocommerce-order,
.he-thankyou {
  margin: 0;
}
/* success hero */
.he-ty-hero {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--paper-2);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 24px;
}
.he-ty-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(59, 167, 118, 0.14);
  color: var(--ok);
  display: grid;
  place-items: center;
  flex: none;
}
.he-ty-icon.failed {
  background: rgba(232, 67, 27, 0.12);
  color: var(--accent);
}
.he-ty-hero h1 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  margin: 8px 0 8px;
}
.he-ty-hero p {
  color: #525964;
  max-width: 640px;
}
.he-ty-hero .he-steps {
  margin-bottom: 4px;
}
.he-ty-hero .he-steps.done-all b::before {
  content: "\2713";
  background: rgba(59, 167, 118, 0.16);
  color: var(--ok);
}
.he-ty-hero .he-steps.done-all b {
  color: var(--ok);
}
.he-ty-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.he-ty-hero .he-btn {
  padding: 12px 20px;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
}

/* overview cards */
.he-ty-overview {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}
.he-ty-overview li {
  background: #fff;
  border: 1px solid var(--paper-2);
  border-radius: 14px;
  padding: 18px 20px;
  border-top: 3px solid var(--accent);
}
.he-ty-overview li span {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a8f98;
  margin-bottom: 6px;
}
.he-ty-overview li strong {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink);
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.he-ty-overview li strong .woocommerce-Price-amount {
  white-space: nowrap;
}
div.he-wrap ul.he-ty-overview::before,
div.he-wrap ul.he-ty-overview::after {
  display: none;
}
div.he-wrap ul.he-ty-overview li {
  float: inherit;
  margin: 0;
  padding: 16px;
}

/* order details + addresses (rendered via woocommerce_thankyou) */
.he-thankyou .woocommerce-order-details,
.he-thankyou .woocommerce-customer-details {
  background: #fff;
  border: 1px solid var(--paper-2);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 24px;
}
.he-thankyou .woocommerce-order-details__title,
.he-thankyou .woocommerce-customer-details h2,
.he-thankyou .woocommerce-column__title {
  font-size: 1.2rem;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.he-thankyou .woocommerce-order-details__title::before,
.he-thankyou .woocommerce-customer-details h2::before,
.he-thankyou .woocommerce-column__title::before {
  content: "";
  width: 18px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  flex: none;
}
/* order table → clean borderless rows */
.he-thankyou table.shop_table {
  width: 100%;
  border-collapse: collapse !important;
  border: none !important;
  margin: 0;
}
.he-thankyou table.shop_table th,
.he-thankyou table.shop_table td {
  border: none !important;
  background: transparent !important;
  padding: 13px 0;
  text-align: left;
}
.he-thankyou table.shop_table thead th {
  font-family: var(--display);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
  padding-bottom: 10px;
}
.he-thankyou table.shop_table tbody td,
.he-thankyou table.shop_table tfoot th,
.he-thankyou table.shop_table tfoot td {
  border-top: 1px solid var(--paper) !important;
}
.he-thankyou table.shop_table td.product-total,
.he-thankyou table.shop_table th[scope="row"] + td,
.he-thankyou table.shop_table tfoot td {
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}
.he-thankyou table.shop_table tfoot .order-total th,
.he-thankyou table.shop_table tfoot .order-total td {
  padding-top: 16px;
}
.he-thankyou table.shop_table tfoot .order-total td {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 800;
}
.he-thankyou table.shop_table a {
  color: var(--ink);
}
.he-thankyou table.shop_table a:hover {
  color: var(--accent);
}
.he-thankyou .product-quantity {
  color: #8a8f98;
}

/* customer addresses */
.he-thankyou .woocommerce-customer-details .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 0;
}
.he-thankyou .woocommerce-customer-details .col-1,
.he-thankyou .woocommerce-customer-details .col-2 {
  width: 100% !important;
  float: none !important;
  margin: 0;
}
.he-thankyou .woocommerce-customer-details address,
.he-account .woocommerce-customer-details address {
  font-style: normal;
  color: #3a3f46;
  line-height: 1.8;
  border: 1px solid var(--paper-2);
  border-radius: 12px;
  padding: 18px 20px;
  background: var(--paper);
  font-size: 0.95rem;
}
.he-account .woocommerce-customer-details address {
  background-color: #fff;
}
.he-account .u-columns.woocommerce-Addresses::before,
.he-account .u-columns.woocommerce-Addresses::after,
.he-account .woocommerce-Address-title::after,
.he-account .woocommerce-Address-title::before {
  display: none !important;
}
.he-thankyou .woocommerce-customer-details .woocommerce-customer-details--phone,
.he-thankyou
  .woocommerce-customer-details
  .woocommerce-customer-details--email {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

/* help box */
.he-ty-help {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--ink);
  color: var(--cloud);
  border-radius: 14px;
  padding: 18px 22px;
  margin-top: 8px;
  font-size: 0.9rem;
  flex-wrap: wrap;
  justify-content: space-between;
}
.he-ty-help b {
  color: #fff;
  font-family: var(--display);
}
.he-ty-help .he-btn {
  padding: 12px 20px;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
}

.he-thankyou .woocommerce-table__product-table.product-total {
  text-align: right;
}

.he-ty-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 10px;
}
  /* ---- order-confirmation.html layout (centered success + 2-col) ---- */
.he-ty-success {
  text-align: center;
  margin-bottom: 30px;
}
.he-ty-tick {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  box-shadow: 0 14px 30px -10px rgba(59, 167, 118, 0.6);
}
.he-ty-success h1 {
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  font-weight: 800;
  margin-bottom: 8px;
}
.he-ty-sub {
  color: #525964;
  max-width: 520px;
  margin: 0 auto 14px;
}
.he-ty-ordno {
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1rem;
  background: var(--paper-2);
  padding: 8px 18px;
  border-radius: 10px;
}
.he-ty-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 34px;
  align-items: start;
}
.he-ty-left .he-panel h3 {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 16px;
}
/* "what happens next" steps */
.he-ty-next {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.he-ty-next li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.he-ty-next .n {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.82rem;
  flex: none;
}
.he-ty-next b {
  font-family: var(--display);
  font-size: 0.96rem;
  display: block;
}
.he-ty-next p {
  font-size: 0.86rem;
  color: #525964;
  margin-top: 2px;
  line-height: 1.5;
}
/* amber fitment note */
.he-ty-fitnote {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #fff7ed;
  border: 1px solid #f3d8b8;
  border-radius: 11px;
  padding: 14px;
  font-size: 0.88rem;
  color: #7a5a2e;
  margin-top: 16px;
  line-height: 1.5;
}
.he-ty-fitnote svg {
  flex: none;
  color: var(--accent);
  margin-top: 2px;
}
/* right column: order details + delivery panels stack tightly */
.he-thankyou .he-ty-right .woocommerce-order-details,
.he-thankyou .he-ty-right .woocommerce-customer-details {
  margin-bottom: 18px;
}
.he-thankyou .he-ty-right > :last-child {
  margin-bottom: 0;
}
/* payment-gateway note (e.g. COD "Pay with cash upon delivery.") is emitted as
   a bare <p> before the order-details panel — tuck it onto the panel top as a
   header strip. No-ops for gateways that print no note. */
.he-thankyou .he-ty-right > p:first-child {
  margin: 0;
  background: #fff;
  border: 1px solid var(--paper-2);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  padding: 15px 28px;
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
}
.he-thankyou .he-ty-right > p:first-child::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(59, 167, 118, 0.18);
  flex: none;
}
.he-thankyou .he-ty-right > p:first-child + .woocommerce-order-details {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/* action buttons */
.he-ty-actions-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
  flex-wrap: wrap;
}
.he-btn-ghost {
  background: transparent;
  border: 1.5px solid var(--paper-2) !important;
  color: var(--ink) !important;
}
.he-btn-ghost:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ============================ ACCOUNT ============================ */
/* =====================================================================
   HYUN ENGINES — My Account redesign
   Loaded only on account pages. Scoped under .he-account so it never
   leaks into the rest of the site. Skins WooCommerce account markup.
   ===================================================================== */
/* tokens, reset, base padding: see the shared block at the top of this file */
.he-account h1,
.he-account h2,
.he-account h3 {
  font-family: var(--display);
  line-height: 1.06;
  letter-spacing: -0.01em;
}
.he-account .he-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* shared button */
.he-account .he-btn {
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 13px 22px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  border: none;
  transition: 0.2s;
}
.he-account .he-btn-accent {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px -8px rgba(232, 67, 27, 0.7);
}
.he-account .he-btn-accent:hover {
  background: var(--accent-2) !important;
  color: #fff !important;
}

/* greeting header */
.he-acct-head {
  margin-bottom: 28px;
}
.he-hello {
  display: flex;
  align-items: center;
  gap: 14px;
}
.he-hello .av {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  color: #fff;
  font-size: 1.05rem;
}
.he-hello b {
  display: block;
  font-family: var(--display);
  font-size: 1.15rem;
}
.he-hello span {
  font-size: 0.82rem;
  color: #8a8f98;
}

/* welcome banner */
.he-welcome {
  background: var(--ink);
  color: #fff;
  border-radius: 16px;
  padding: 26px 28px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.he-welcome::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.18;
  -webkit-mask-image: radial-gradient(circle at 85% 20%, #000, transparent 70%);
  mask-image: radial-gradient(circle at 85% 20%, #000, transparent 70%);
}
.he-welcome > * {
  position: relative;
  z-index: 2;
}
.he-welcome h2 {
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0 0 6px;
}
.he-welcome p {
  color: var(--fog);
  font-size: 0.92rem;
  margin: 0;
}

/* address / detail cards */
.he-addr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.he-addrcard {
  border: 1px solid var(--paper-2);
  border-radius: 12px;
  padding: 16px;
  font-size: 0.9rem;
  color: #3a4049;
  line-height: 1.6;
}
.he-addrcard b {
  font-family: var(--display);
  display: block;
  margin-bottom: 4px;
}

/* layout */
.he-acctgrid {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 30px;
  align-items: start;
}
/* override WooCommerce defaults: nav 35% float-left + content 65% float-right */
.he-account .woocommerce-MyAccount-navigation,
.he-account .woocommerce-MyAccount-content {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

/* sidebar navigation — matches account.html (.acctnav) */
.he-account .woocommerce-MyAccount-navigation {
  background: #fff;
  border: 1px solid var(--paper-2);
  border-radius: 14px;
  padding: 14px;
  position: sticky;
  top: 96px;
}
.he-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3px;
}
.he-account .woocommerce-MyAccount-navigation li {
  margin: 0;
}
.he-account .woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #3a4049;
  border-radius: 9px;
  transition: 0.15s;
}
/* hover = light paper background */
.he-account .woocommerce-MyAccount-navigation li a:hover {
  background: var(--paper-2);
  color: var(--ink);
}
/* active = solid black pill with white text (like account.html a.on) */
.he-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--ink);
  color: #fff;
}
/* plain icons, no grey box (like account.html) */
.he-account .woocommerce-MyAccount-navigation .ic {
  width: auto;
  height: auto;
  background: transparent;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  flex: none;
  color: inherit;
  opacity: 0.85;
  transition: 0.15s;
}
.he-account .woocommerce-MyAccount-navigation li.is-active .ic {
  background: transparent;
  color: #fff;
  opacity: 1;
}
/* logout — accent text, divider on top, not rounded */
.he-account
  .woocommerce-MyAccount-navigation
  li.woocommerce-MyAccount-navigation-link--customer-logout
  a {
  border-top: 1px solid #f0ebe0;
  border-radius: 0;
  margin-top: 6px;
  padding-top: 14px;
  color: var(--accent);
}
.he-account
  .woocommerce-MyAccount-navigation
  li.woocommerce-MyAccount-navigation-link--customer-logout
  a:hover {
  background: transparent;
  color: var(--accent-2);
}

/* sidebar "me" block (avatar + name + email) */
.he-account .he-nav-me {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid #f0ebe0;
}
.he-account .he-nav-me .av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--accent), var(--amber));
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  color: #fff;
  font-size: 0.92rem;
  flex: none;
}
.he-account .he-nav-me-txt {
  min-width: 0;
}
.he-account .he-nav-me-txt b {
  display: block;
  font-family: var(--display);
  font-size: 0.92rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.he-account .he-nav-me-txt small {
  font-size: 0.76rem;
  color: #8a8e96;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* stat cards */
.he-stat3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 26px;
}
.he-stat {
  background: #fff;
  border: 1px solid var(--paper-2);
  border-radius: 14px;
  padding: 22px;
}
.he-stat b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.7rem;
  display: block;
  line-height: 1;
  color: var(--accent);
}
.he-stat span {
  font-size: 0.82rem;
  color: #6b7280;
  margin-top: 6px;
  display: block;
}

/* content panels */
.he-panel {
  background: #fff;
  border: 1px solid var(--paper-2);
  border-radius: 16px;
  padding: 28px;
}
.he-panel + .he-panel {
  margin-top: 18px;
}
.he-panel h2 {
  font-size: 1.15rem;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.he-panel h2::before {
  content: "";
  width: 18px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}
.he-panel h2 .he-panel-link {
  margin-left: auto;
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0;
  text-transform: none;
}
.he-panel h2 .he-panel-link:hover {
  color: var(--accent-2);
}

/* dashboard recent-orders table */
.he-acct-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  border: none !important;
}
/* reset theme/core cell borders + backgrounds; only horizontal row lines remain */
.he-acct-table th,
.he-acct-table td {
  border: none !important;
  background: transparent !important;
}
.he-acct-table th {
  font-family: var(--display);
  text-align: left;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
  padding: 0 14px 12px;
  font-weight: 700;
}
.he-acct-table tbody td {
  padding: 15px 14px;
  border-top: 1px solid var(--paper) !important;
  vertical-align: middle;
}
.he-acct-table td b {
  font-weight: 700;
}
.he-omuted {
  color: #8a8f98;
}
.he-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--paper-2);
  color: #525964;
}
.he-status::before {
  content: "\25CF";
  font-size: 0.6rem;
}
.he-status.done,
.he-status.deliv {
  background: rgba(59, 167, 118, 0.12);
  color: #108a4a;
}
.he-status.proc {
  background: rgba(242, 169, 59, 0.15);
  color: #b8730a;
}
.he-status.ship {
  background: #e7f3ff;
  color: #1463b8;
}
.he-rowact {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.84rem;
}
.he-rowact:hover {
  color: var(--accent-2);
}
.he-noorders {
  color: #6b7280;
}
.he-noorders a {
  color: var(--accent);
  font-weight: 700;
}

/* help box */
.he-acct-help {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--ink);
  color: var(--cloud);
  border-radius: 14px;
  padding: 18px 20px;
  margin-top: 24px;
  font-size: 0.9rem;
  flex-wrap: wrap;
  justify-content: space-between;
}
.he-acct-help b {
  color: #fff;
  font-family: var(--display);
}
.he-acct-help .he-btn {
  padding: 11px 18px;
}

/* ---- generic skin for the other account endpoints ---- */
.he-account .woocommerce-MyAccount-content {
  min-height: 200px;
}
.he-account .woocommerce-MyAccount-content > p,
.he-account .woocommerce-MyAccount-content > h2,
.he-account .woocommerce-MyAccount-content > h3,
.he-account .woocommerce-MyAccount-content address,
.he-account .woocommerce-MyAccount-content .woocommerce-Addresses,
.he-account .woocommerce-MyAccount-content form,
.he-account .woocommerce-MyAccount-content .woocommerce-orders-table,
.he-account .woocommerce-MyAccount-content .shop_table {
}
/* tables (orders list, downloads, view order) */
.he-account .woocommerce-MyAccount-content table.shop_table {
  width: 100%;
  border-collapse: collapse !important;
  background: #fff;
  border: 1px solid var(--paper-2);
  border-radius: 14px;
  overflow: hidden;
  font-size: 0.92rem;
  margin: 0;
}
/* kill the theme/WooCommerce grey cell backgrounds + vertical borders */
.he-account .woocommerce-MyAccount-content table.shop_table th,
.he-account .woocommerce-MyAccount-content table.shop_table td {
  background: transparent !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
}
.he-account .woocommerce-MyAccount-content table.shop_table thead th {
  font-family: var(--display);
  text-align: left;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
  padding: 16px 20px;
  border-top: none !important;
}
.he-account .woocommerce-MyAccount-content table.shop_table tbody td,
.he-account .woocommerce-MyAccount-content table.shop_table tfoot th,
.he-account .woocommerce-MyAccount-content table.shop_table tfoot td {
  padding: 14px 20px;
  border-top: 1px solid var(--paper) !important;
}
.he-account .woocommerce-MyAccount-content table.shop_table td.product-total,
.he-account .woocommerce-MyAccount-content table.shop_table tfoot td {
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}
.he-account
  .woocommerce-MyAccount-content
  table.shop_table
  tfoot
  .order-total
  td {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 800;
}
.he-account .woocommerce-MyAccount-content table.shop_table .button,
.he-account .woocommerce-MyAccount-content .woocommerce-Button,
.he-account .woocommerce-MyAccount-content .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 7px !important;
  padding: 9px 16px !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.he-account .woocommerce-MyAccount-content table.shop_table .button:hover {
  background: var(--steel) !important;
}

/* address blocks */
.he-account .woocommerce-MyAccount-content > p {
  margin-bottom: 22px;
}
.he-account .woocommerce-Addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 0;
}
/* reset WooCommerce .col2-set floats so the grid controls the layout */
.he-account .woocommerce-Addresses .col-1,
.he-account .woocommerce-Addresses .col-2 {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  max-width: none;
}
.he-account .woocommerce-Address {
  background: #fff;
  border: 1px solid var(--paper-2);
  border-radius: 14px;
  padding: 24px;
  height: 100%;
}
.he-account .woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.he-account .woocommerce-Address-title h2,
.he-account .woocommerce-Address-title h3 {
  font-size: 1.1rem;
  margin: 0;
}
.he-account .woocommerce-Address address {
  font-style: normal;
  color: #3a3f46;
  line-height: 1.8;
}
.he-account .woocommerce-Address .edit {
  color: var(--accent) !important;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* link-style buttons (Add payment method, Add address, etc.) */
.he-account .woocommerce-MyAccount-content .woocommerce-Button {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 13px 22px !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 8px 24px -10px rgba(232, 67, 27, 0.6);
  transition: 0.2s;
  text-decoration: none;
}
.he-account .woocommerce-MyAccount-content a.button:hover,
.he-account .woocommerce-MyAccount-content .woocommerce-Button:hover {
  background: var(--accent-2) !important;
  transform: translateY(-2px);
}

/* password-change fieldset on Account details */
.he-account .woocommerce-MyAccount-content fieldset {
  border: 1px solid var(--paper-2);
  border-radius: 14px;
  padding: 22px 24px 8px;
  margin: 8px 0 20px;
}
.he-account .woocommerce-MyAccount-content fieldset legend {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  padding: 0 8px;
  color: var(--ink);
}

/* view-order / section headings (scoped to WooCommerce title classes so the
   address-card titles above are not affected) */
.he-account .woocommerce-MyAccount-content .woocommerce-order-details__title,
.he-account .woocommerce-MyAccount-content .woocommerce-column__title,
.he-account .woocommerce-MyAccount-content .woocommerce-customer-details h2,
.he-account .woocommerce-MyAccount-content > h2 {
  font-size: 1.2rem;
  margin: 24px 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.he-account
  .woocommerce-MyAccount-content
  .woocommerce-order-details__title::before,
.he-account .woocommerce-MyAccount-content .woocommerce-column__title::before,
.he-account
  .woocommerce-MyAccount-content
  .woocommerce-customer-details
  h2::before,
.he-account .woocommerce-MyAccount-content > h2::before {
  content: "";
  width: 18px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  flex: none;
}
.he-account .woocommerce-MyAccount-content > h2:first-child {
  margin-top: 0;
}

/* account forms (edit account / address) */
.he-account .woocommerce-MyAccount-content form {
  background: #fff;
  border: 1px solid var(--paper-2);
  border-radius: 16px;
  padding: 28px;
}
.he-account .woocommerce-form-row,
.he-account .form-row {
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
}
.he-account .woocommerce-form-row label,
.he-account .form-row label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #3a3f46;
  margin-bottom: 7px;
}
.he-account .woocommerce-MyAccount-content input.input-text,
.he-account .woocommerce-MyAccount-content input[type="text"],
.he-account .woocommerce-MyAccount-content input[type="email"],
.he-account .woocommerce-MyAccount-content input[type="tel"],
.he-account .woocommerce-MyAccount-content input[type="password"],
.he-account .woocommerce-MyAccount-content select,
.he-account .woocommerce-MyAccount-content textarea {
  width: 100%;
  height: 48px;
  border: 1px solid var(--paper-2);
  border-radius: 9px;
  padding: 0 14px;
  font-family: var(--body);
  font-size: 0.95rem;
  background: var(--paper);
  color: var(--ink);
  transition: 0.2s;
}
.he-account .woocommerce-MyAccount-content textarea {
  height: auto;
  min-height: 90px;
  padding: 12px 14px;
}
.he-account .woocommerce-MyAccount-content input.input-text:focus,
.he-account .woocommerce-MyAccount-content select:focus,
.he-account .woocommerce-MyAccount-content textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(232, 67, 27, 0.12);
}

/* native <select> (Country / State) — match the paper inputs + custom chevron */
.he-account .woocommerce-MyAccount-content select {
  background: var(--paper) !important;
  border: 1px solid var(--paper-2) !important;
  border-radius: 9px !important;
  height: 48px;
  color: var(--ink) !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0 38px 0 14px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%233a3f46'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
}

/* select2-enhanced selects (WooCommerce country/state widgets).
   The real <select> is .select2-hidden-accessible (hidden); the visible control
   is the .select2-selection--single span, so it must be styled directly. */
.he-account .select2-container {
  width: 100% !important;
}
.he-account .select2-container .select2-selection--single {
  height: 48px !important;
  border: 1px solid var(--paper-2) !important;
  border-radius: 9px !important;
  background: var(--paper) !important;
  display: flex !important;
  align-items: center;
  padding: 0 14px !important;
  font-family: var(--body);
}
.he-account
  .select2-container
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 1.4 !important;
  color: var(--ink) !important;
  padding: 0 !important;
  font-size: 0.95rem;
}
.he-account
  .select2-container
  .select2-selection--single
  .select2-selection__arrow {
  height: 46px !important;
  right: 10px !important;
}
.he-account .select2-container--open .select2-selection--single,
.he-account .select2-container--focus .select2-selection--single {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(232, 67, 27, 0.12) !important;
}
.he-account .woocommerce-orders-table .woocommerce-orders-table__cell {
  border-top: 1px solid var(--paper) !important;
}

/* select2 dropdown results panel — appended to <body>, so it can't be scoped
   under .he-account. Styled by the country/state field classes select2 copies. */
.select2-container--default .select2-dropdown {
  border: 1px solid #eae5db;
  border-radius: 9px;
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  font-family: "Archivo", system-ui, sans-serif;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #eae5db;
  border-radius: 7px;
  padding: 8px 10px;
}
.select2-container--default .select2-results__option {
  font-size: 0.92rem;
  color: #3a3f46;
}
.select2-container--default
  .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
  background: #e8431b !important;
  color: #fff !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: #f4f1eb;
}
.he-account .woocommerce-MyAccount-content button.button,
.he-account .woocommerce-MyAccount-content button[type="submit"] {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 24px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 8px 24px -8px rgba(232, 67, 27, 0.7);
  transition: 0.2s;
}
.he-account .woocommerce-MyAccount-content button.button:hover,
.he-account .woocommerce-MyAccount-content button[type="submit"]:hover {
  background: var(--accent-2) !important;
  transform: translateY(-2px);
}

/* ---- high-specificity safety net (body-prefixed) for the two elements that
   keep losing to WooCommerce/select2 defaults: the Save button + select2 box ---- */
body .he-account .woocommerce-MyAccount-content button.button,
body .he-account .woocommerce-MyAccount-content button[name="save_address"],
body .he-account .woocommerce-MyAccount-content input[type="submit"] {
  background: var(--accent) !important;
  background-color: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 24px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 8px 24px -8px rgba(232, 67, 27, 0.7) !important;
}
body .he-account .select2-container .select2-selection--single {
  height: 48px !important;
  background: var(--paper) !important;
  background-color: var(--paper) !important;
  border: 1px solid var(--paper-2) !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 14px !important;
}

/* =====================================================================
   RESPONSIVE / MEDIA QUERIES
   All responsive rules are consolidated here, grouped by section
   (shop · cart/checkout · thank you · account).
   ===================================================================== */

/* ---------------- max-width: 980px ---------------- */
@media (max-width: 980px) {
  /* Cart / Checkout */
  .he-cartgrid,
  .he-checkgrid,
  .he-acctgrid,
  .he-ty-grid,
  .he-account .woocommerce-Addresses {
    grid-template-columns: 1fr;
  }
  /* below the centered max-width the wrap is full-bleed — add side gutters so
     the thank-you content/panels don't touch the screen edges */
  .he-thankyou .he-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
  .he-summary,
  .he-checkside,
  .he-account .woocommerce-MyAccount-navigation {
    position: static;
  }
  .he-checkcol .woocommerce-billing-fields,
  .he-checkcol .woocommerce-shipping-fields,
  .he-checkcol .woocommerce-additional-fields,
  .he-checkcol .woocommerce-account-fields,
  .he-checkside {
    padding: 24px;
  }

  /* Account */
  .he-account .woocommerce-MyAccount-navigation ul {
    display: grid;
    grid-template-columns: 1fr;
  }
  .he-stat3 {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------------- max-width: 680px ---------------- */
@media (max-width: 680px) {
  /* Thank you / Order received */
  .he-thankyou .woocommerce-customer-details .woocommerce-columns--addresses,
  .he-stat3,
  .he-addr,
  .he-account .woocommerce-MyAccount-navigation ul {
    grid-template-columns: 1fr;
  }
  .he-thankyou .woocommerce-order-details,
  .he-thankyou .woocommerce-customer-details,
  .he-ty-hero,
  .he-account .woocommerce-Address,
  .he-summary {
    padding: 16px;
  }
  /* keep the tucked payment note's inset aligned with the panel's title below it */
  .he-thankyou .he-ty-right > p:first-child {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Account */
  .he-acct-table thead {
    display: none;
  }
  .he-acct-table,
  .he-acct-table tbody,
  .he-acct-table tr,
  .he-acct-table td {
    display: block;
  }
  .he-acct-table tr {
    border-top: 1px solid var(--paper);
    padding: 12px 0;
  }
  .he-acct-table td {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    border-top: none;
    padding: 8px 0;
    text-align: right;
  }
  .he-acct-table td::before {
    content: attr(data-title);
    color: #8a8f98;
    font-weight: 600;
    font-size: 0.78rem;
  }
}

/* ---------------- max-width: 620px ---------------- */
@media (max-width: 620px) {
  /* Cart / Checkout */
  .he-citem {
    grid-template-columns: 72px 1fr;
    grid-template-rows: auto auto auto;
    gap: 8px 16px;
  }
  .he-cthumb {
    width: 72px;
    height: 64px;
    grid-row: span 3;
    align-self: start;
  }
  .he-cqty,
  .he-cprice {
    grid-column: 2;
  }
  .he-cprice {
    text-align: left;
  }
  .he-cremove {
    position: absolute;
  }
  .he-citem {
    position: relative;
  }
  .he-cremove {
    top: 14px;
    right: 14px;
  }
  .he-checkout .woocommerce-billing-fields__field-wrapper,
  .he-checkout .woocommerce-shipping-fields__field-wrapper,
  .he-checkout .woocommerce-additional-fields__field-wrapper {
    grid-template-columns: 1fr;
  }
  .he-cartfoot,
  .he-coupon {
    flex-direction: column;
    align-items: stretch;
  }
  .he-coupon input {
    min-width: 0;
  }
  .he-checkcol .woocommerce-billing-fields,
  .he-checkcol .woocommerce-shipping-fields,
  .he-checkcol .woocommerce-additional-fields,
  .he-checkcol .woocommerce-account-fields,
  .he-checkside,
  .he-account .woocommerce-MyAccount-content form {
    padding: 16px;
  }
  .he-account .woocommerce-MyAccount-content fieldset {
    padding: 0;
    border: 0;
    margin-top: 20px;
  }
  .he-account .woocommerce-MyAccount-content fieldset legend {
    padding: 0;
  }
  .he-account .woocommerce form .form-row-first,
  .he-account .woocommerce-page form .form-row-first,
  .he-account .woocommerce form .form-row-last,
  .he-account .woocommerce-page form .form-row-last {
    float: inherit;
    width: 100%;
  }
}

/* =====================================================================
   HYUN ENGINES — Single product: Vehicle Compatibility + FAQs
   Rendered via woocommerce_after_single_product_summary (see functions.php).
   Scoped under .he-product so it never leaks outside these two blocks.
   ===================================================================== */
.he-product {
  --ink: #0e0f11;
  --paper-2: #eae5db;
  --accent: #e8431b;
  --ok: #3ba776;
  --display: "Archivo Expanded", "Archivo", sans-serif;
  --body: "Archivo", system-ui, sans-serif;
  clear: both;
  /* keeps the section heading clear of the sticky header when scrolled/
     tabbed to directly (anchor links, keyboard focus) instead of landing
     tucked underneath it. */
  scroll-margin-top: 90px;
  font-family: var(--body);
  color: var(--ink);
  max-width: var(--maxw, 1180px);
  margin: 0 auto;
  padding: 46px 24px;
}
.he-product * {
  box-sizing: border-box;
}
.he-product h2 {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  font-weight: 800;
  margin: 0 0 18px;
}

/* About this engine / Specifications — two-column layout (mockup .pdetail/.pcols) */
.he-pdetail,
.he-pfaq {
  width: auto;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* 100vw is defined as the initial containing block width, which includes the
   vertical scrollbar — so on any page tall enough to scroll, the breakout
   above is a few pixels wider than the visible viewport (symmetric on both
   sides). Clip that harmless sliver of background instead of letting it
   register as page-level horizontal scroll. Matches the original mockup,
   which paired this same breakout technique with body{overflow-x:hidden}. */
body {
  overflow-x: hidden;
}
.he-pdetail {
  background: var(--paper-2, #eae5db);
  padding: 56px 24px;
}
.he-pcols {
  max-width: var(--maxw, 1180px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: start;
}
.he-prose h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 14px;
}
.he-prose p {
  color: #3a4049;
  margin: 0 0 16px;
}
.he-prose h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 22px 0 8px;
}
.he-prose ul {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
}
.he-prose ul li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  color: #2c3137;
}
.he-prose ul li::before {
  content: "\2713";
  color: #fff;
  background: var(--ok);
  width: 21px;
  height: 21px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  flex: none;
  margin-top: 3px;
}

/* Specifications panel (dark key/value card) */
.he-specsheet {
  background: var(--ink);
  color: #fff;
  border-radius: 14px;
  overflow: hidden;
  position: sticky;
  top: 90px;
}
.he-spec-top {
  padding: 14px 18px;
  border-bottom: 1px solid #2e333b;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e9e7e2;
}
.he-specrow {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid #2e333b;
  font-size: 0.89rem;
}
.he-specrow:last-child {
  border-bottom: none;
}
.he-specrow .k {
  color: #9aa1ab;
}
.he-specrow .v {
  color: #fff;
  font-weight: 600;
  text-align: right;
}
@media (max-width: 980px) {
  .he-pcols {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .he-specsheet {
    position: static;
  }
}

/* Vehicle compatibility table */
.he-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--paper-2);
  border-radius: 14px;
  background: #fff;
}
table.he-fit {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}
table.he-fit th {
  background: var(--paper-2);
  text-align: left;
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b727c;
  padding: 13px 16px;
  border-bottom: 1px solid #e7e2d7;
}
table.he-fit td {
  padding: 13px 16px;
  border-bottom: 1px solid #f0ebe0;
  font-size: 0.9rem;
  color: #2c3137;
}
table.he-fit tr:last-child td {
  border-bottom: none;
}
table.he-fit td.he-code {
  font-family: var(--display);
  font-weight: 700;
}
.he-fitdis {
  font-size: 0.84rem;
  color: #525964;
  margin: 14px 0 0;
}

/* FAQ section — mockup .faqsec uses the same paper-2 band as .pdetail */
.he-pfaq {
  background: var(--paper-2, #eae5db);
  padding: 54px 24px;
}
.he-faqwrap {
  max-width: var(--maxw, 1180px);
  margin: 0 auto;
}
.he-faqhead {
  max-width: 680px;
  margin-bottom: 24px;
}
.he-eyebrow {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.he-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--accent);
  display: inline-block;
}
.he-faqhead h2 {
  margin: 10px 0 8px;
}
.he-faqhead p {
  color: #525964;
  margin: 0;
}
.he-faqhead p a {
  color: var(--accent);
  font-weight: 600;
}

/* FAQ accordion */
.he-faqlist {
  display: grid;
  gap: 10px;
  max-width: 860px;
}
.he-faqlist details {
  background: #fff;
  border: 1px solid #e7e2d7;
  border-radius: 12px;
  padding: 2px 20px;
  transition: 0.18s;
}
.he-faqlist details[open] {
  border-color: #d8d2c6;
}
.he-faqlist summary {
  padding: 17px 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.he-faqlist summary::-webkit-details-marker {
  display: none;
}
.he-faqlist summary .pm {
  color: var(--accent);
  font-size: 1.5rem;
  line-height: 1;
  transition: 0.2s;
  flex: none;
}
.he-faqlist details[open] summary .pm {
  transform: rotate(45deg);
}
.he-faqlist p {
  padding: 0 0 17px;
  margin: 0;
  color: #525964;
  font-size: 0.93rem;
}
/* Customer reviews section */
.he-secline {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}
.he-secline h2 {
  margin: 0;
  white-space: nowrap;
}
.he-secline::after {
  content: "";
  height: 1px;
  background: #e7e2d7;
  flex: 1;
}
.he-revtop {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 34px;
}
.he-revscore {
  background: #fff;
  border: 1px solid #e7e2d7;
  border-radius: 16px;
  padding: 26px;
  text-align: center;
}
.he-revscore-big {
  font-family: var(--display);
  font-weight: 800;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--ink);
}
.he-revscore-stars {
  color: #f2a93b;
  letter-spacing: 2px;
  font-size: 1.1rem;
  margin: 8px 0 6px;
}
.he-revscore-cnt {
  font-size: 0.86rem;
  color: #6b727c;
}
.he-revscore-btn {
  width: 100%;
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.he-revbars {
  display: grid;
  gap: 9px;
  align-content: start;
}
.he-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.84rem;
  color: #525964;
}
.he-bar-lbl {
  width: 38px;
  white-space: nowrap;
}
.he-bar-track {
  flex: 1;
  height: 9px;
  border-radius: 999px;
  background: #eee7da;
  overflow: hidden;
  display: block;
}
.he-bar-fill {
  height: 100%;
  background: #f2a93b;
  border-radius: 999px;
  display: block;
}
.he-bar-pct {
  width: 38px;
  text-align: right;
  font-family: var(--display);
  font-weight: 700;
  color: #3a4049;
}

/* Restyle WooCommerce's native review list + form to match the card design */
.he-revlist-wrap #reviews {
  background: none;
  border: none;
  padding: 0;
}
.he-revlist-wrap .woocommerce-Reviews-title {
  display: none;
}
.he-revlist-wrap ol.commentlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.he-revlist-wrap #reviews #comments ol.commentlist li.review,
.he-revlist-wrap #reviews #comments ol.commentlist li.comment {
  background: #fff;
  border: 1px solid #e7e2d7;
  border-radius: 14px;
  padding: 22px;
}
.he-revlist-wrap .comment_container {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.he-revlist-wrap .he-rev-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--accent), #f2a93b);
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.9rem;
  flex: none;
}
.he-revlist-wrap #reviews #comments ol.commentlist li .comment-text {
  border: none;
  padding: 0;
  margin: 0;
  flex: 1;
  min-width: 0;
}
.he-revlist-wrap .he-rev-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.he-revlist-wrap .he-rev-who b {
  font-family: var(--display);
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.he-revlist-wrap .he-rev-vf {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #108a4a;
  background: #e6f5ec;
  padding: 3px 8px;
  border-radius: 6px;
}
.he-revlist-wrap .he-rev-who small {
  font-size: 0.78rem;
  color: #8a8e96;
  display: block;
  margin-top: 2px;
}
.he-revlist-wrap .he-rev-head .star-rating {
  color: #f2a93b;
  font-size: 0.9rem;
  float: none;
  margin: 0;
  flex: none;
}
.he-revlist-wrap .he-rev-title {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  margin: 4px 0 6px;
  color: var(--ink);
}
.he-revlist-wrap .description p {
  font-size: 0.92rem;
  color: #3a4049;
  margin: 0;
}
.he-revlist-wrap .he-rev-vehicle {
  margin-top: 10px;
  font-size: 0.78rem;
  color: #8a8e96;
}
.he-revlist-wrap img.avatar {
  display: none;
}
.he-revlist-wrap .woocommerce-review__awaiting-approval {
  color: #8a8e96;
  font-size: 0.88rem;
}
/* write-a-review form */
.he-revlist-wrap #review_form_wrapper {
  background: var(--ink);
  color: #fff;
  border-radius: 16px;
  padding: 28px;
  margin-top: 24px;
}
.he-revlist-wrap #review_form_wrapper h3 {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 14px;
}
.he-revlist-wrap .comment-notes {
  color: var(--cloud, #e9e7e2);
  font-size: 0.85rem;
  grid-column: 1 / -1;
}
/* Grid layout matching the mockup's field order regardless of DOM order:
   rating -> Name + Vehicle (2-up) -> Email (functionally required) ->
   Review title -> Your review -> Submit. */
.he-revlist-wrap #commentform {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}
.he-revlist-wrap .comment-form-rating {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-bottom: 14px;
}
.he-revlist-wrap .comment-form-author {
  grid-column: 1;
  grid-row: 2;
}
.he-revlist-wrap .comment-form-vehicle {
  grid-column: 2;
  grid-row: 2;
}
.he-revlist-wrap .comment-form-email {
  grid-column: 1 / -1;
  grid-row: 3;
}
.he-revlist-wrap .comment-form-review-title {
  grid-column: 1 / -1;
  grid-row: 4;
}
.he-revlist-wrap .comment-form-comment {
  grid-column: 1 / -1;
  grid-row: 5;
}
.he-revlist-wrap .form-submit {
  grid-column: 1 / -1;
  grid-row: 6;
  margin: 0;
}
.he-revlist-wrap .comment-form-rating label {
  color: var(--cloud, #e9e7e2);
  font-size: 0.85rem;
}
.he-revlist-wrap .stars {
  margin: 4px 0 0;
}
.he-revlist-wrap .stars a::before {
  color: #6b727c;
}
.he-revlist-wrap .stars a.active::before {
  color: #f2a93b;
}
/* Committed selection: light every star up to and including the chosen one
   (amber), grey out the ones after it. Without these, only the single clicked
   star turned amber, so picking "4 stars" looked like it did nothing. */
.he-revlist-wrap .stars.selected a:not(.active)::before {
  color: #f2a93b;
}
.he-revlist-wrap .stars.selected a.active ~ a::before {
  color: #6b727c;
}
.he-revlist-wrap .stars:hover a::before {
  color: #f2a93b;
}
.he-revlist-wrap .stars a:hover ~ a::before {
  color: #6b727c;
}
.he-revlist-wrap .comment-form-author label,
.he-revlist-wrap .comment-form-vehicle label,
.he-revlist-wrap .comment-form-email label,
.he-revlist-wrap .comment-form-review-title label,
.he-revlist-wrap .comment-form-comment label {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cloud, #e9e7e2);
  margin: 0 0 6px;
}
.he-revlist-wrap #author,
.he-revlist-wrap #review_vehicle,
.he-revlist-wrap #review_title,
.he-revlist-wrap #email,
.he-revlist-wrap #comment {
  width: 100%;
  font-family: var(--body);
  font-size: 0.92rem;
  padding: 11px 13px;
  border: 1.5px solid var(--line, #2e333b);
  border-radius: 10px;
  background: var(--steel, #23272e);
  color: #fff;
  margin-bottom: 12px;
  box-sizing: border-box;
}
.he-revlist-wrap #comment {
  min-height: 90px;
  resize: vertical;
}
.he-revlist-wrap #respond input#submit {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 13px 24px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.he-revlist-wrap #respond input#submit:hover {
  background: var(--accent-2, #ff6a3d);
}
.he-revlist-wrap .woocommerce-noreviews {
  background: #fff;
  border: 1px solid #e7e2d7;
  border-radius: 14px;
  padding: 22px;
  color: #525964;
}
@media (max-width: 980px) {
  .he-revtop {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

@media (max-width: 620px) {
  .he-product {
    padding: 32px 20px;
  }
}

/* Stack the review form into a single column on mobile. The desktop layout is
   a 2-col grid whose explicit grid-row/column placement also reorders fields
   (the form's DOM order differs from the visual order), so we switch to a flex
   column and drive the sequence with `order` — this keeps each field full
   width, in the intended order, with no Name/Vehicle overlap on small screens. */
@media (max-width: 560px) {
  .he-revlist-wrap #commentform {
    display: flex;
    flex-direction: column;
  }
  .he-revlist-wrap .comment-form-rating {
    order: 1;
  }
  .he-revlist-wrap .comment-form-author {
    order: 2;
  }
  .he-revlist-wrap .comment-form-vehicle {
    order: 3;
  }
  .he-revlist-wrap .comment-form-email {
    order: 4;
  }
  .he-revlist-wrap .comment-form-review-title {
    order: 5;
  }
  .he-revlist-wrap .comment-form-comment {
    order: 6;
  }
  .he-revlist-wrap .form-submit {
    order: 7;
  }
  .he-revlist-wrap .comment-notes {
    order: 8;
  }
  .he-revlist-wrap .comment-form-cookies-consent {
    order: 9;
  }
}

/* =====================================================================
   HYUN ENGINES — Single product hero (image gallery + price/buy box)
   Reskins WooCommerce's native gallery + summary markup in place (see
   functions.php for the small set of hooked additions: top tag chips,
   brand badge, pricebox extras, fitment box, buy2 row, keys checklist).
   Scoped to WooCommerce's own stable selectors, no new wrapper markup.
   ===================================================================== */
.woocommerce div.product {
  position: relative;
  --ink: #0e0f11;
  --paper-2: #eae5db;
  --accent: #e8431b;
  --accent-2: #ff6a3d;
  --ok: #3ba776;
  --display: "Archivo Expanded", "Archivo", sans-serif;
  --body: "Archivo", system-ui, sans-serif;
}

/* ----- gallery -----
   Structure varies by image count. One image: .woocommerce-product-gallery
   > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image.
   Two or more: WooCommerce's script inserts an extra .flex-viewport around
   the wrapper and turns the wrapper into a sliding "track" (inline width
   e.g. 400% for 4 slides, floated side by side, slid via transform), then
   appends a .flex-control-thumbs nav as a sibling after .flex-viewport.
   The square "stage" styling (border/bg/radius/1:1 ratio) therefore has to
   go on .flex-viewport when present, or the wrapper directly when it's
   the only box — never on the outer .woocommerce-product-gallery itself,
   or the thumbnail nav below it would be clipped/overlapped by a
   fixed-height, overflow:hidden ancestor. */
.woocommerce div.product .woocommerce-product-gallery {
  position: relative;
}
.woocommerce div.product .woocommerce-product-gallery > .flex-viewport,
.woocommerce div.product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
  position: relative;
  border: 1px solid #e7e2d7;
  border-radius: 18px;
  overflow: hidden;
  background: #0e0f11;
  aspect-ratio: 1 / 1;
}
/* The script also sets an *inline* height:0px (non-!important) on
   .flex-viewport that it means to animate via JS as slides load; since we
   never trigger that JS path the same way the theme it shipped with
   expected, it's left permanently collapsed unless we override it
   (!important beats the non-important inline height). */
.woocommerce div.product .woocommerce-product-gallery > .flex-viewport {
  height: auto !important;
}
/* The track itself: fill whichever box it's directly inside (the
   .flex-viewport stage above), not styled as a second stage. */
.woocommerce div.product .flex-viewport > .woocommerce-product-gallery__wrapper {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
  border: none;
  border-radius: 0;
  background: none;
  aspect-ratio: auto;
}
.woocommerce div.product .woocommerce-product-gallery__image,
.woocommerce div.product .woocommerce-product-gallery__image--placeholder {
  width: 100%;
  height: 100%;
  position: relative;
}
/* the main image is wrapped in a plain (inline) <a>; position it absolutely
   so height:100% doesn't have to resolve through that inline parent */
.woocommerce div.product .woocommerce-product-gallery__image > a {
  position: absolute;
  inset: 0;
  display: block;
}
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce
  div.product
  .woocommerce-product-gallery__image--placeholder
  img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  display: block !important;
}
.woocommerce div.product span.onsale.he-save {
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
  right: auto !important;
  z-index: 2;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
  line-height: 1.3 !important;
  border-radius: 8px !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-family: var(--display) !important;
  font-weight: 800 !important;
  font-size: 0.8rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 7px 13px !important;
  margin: 0 !important;
}
.woocommerce div.product .flex-control-thumbs {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
  margin: 12px 0 0 !important;
  padding: 0;
  list-style: none;
}
.woocommerce div.product .flex-control-thumbs li {
  width: auto !important;
  float: none !important;
  aspect-ratio: 1 / 1;
  border: 1.5px solid #e7e2d7;
  border-radius: 11px;
  overflow: hidden;
}
.woocommerce div.product .flex-control-thumbs li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  margin: 0;
}
.woocommerce div.product .flex-control-thumbs li img.flex-active {
  border: 2px solid var(--accent);
}

/* ----- summary column ----- */
.woocommerce div.product .summary.entry-summary {
  font-family: var(--body);
}
.woocommerce div.product .summary.entry-summary * {
  box-sizing: border-box;
}

/* toptag chips + brand line */
.he-toptag {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.he-toptag span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 7px;
}
.he-toptag span.a {
  background: var(--accent, #e8431b);
  color: #fff;
}
.he-toptag span.b {
  background: var(--paper-2, #eae5db);
  color: #3a4049;
  border: 1px solid #ddd6c8;
}
.he-brandline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.he-brandbadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e7e2d7;
  border-radius: 999px;
  padding: 5px 12px 5px 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #3a4049;
}
.he-brandbadge .he-bm {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink, #0e0f11);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.66rem;
  text-transform: uppercase;
}
.he-oem {
  font-size: 0.76rem;
  color: #8a8e96;
}

/* title + rating row */
.woocommerce div.product .summary.entry-summary h1.product_title {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.7vw, 2.05rem);
  font-weight: 800;
  margin: 0 0 12px;
  line-height: 1.12;
}
.woocommerce div.product .summary.entry-summary .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
  color: #525964;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.woocommerce div.product .summary.entry-summary .star-rating {
  color: #f2a93b;
  font-size: 1rem;
}
.woocommerce
  div.product
  .summary.entry-summary
  .woocommerce-review-link {
  color: var(--accent);
  font-weight: 600;
}

/* pricebox: native <p class="price"> + our .he-price-extra fused into one card */
.woocommerce div.product .summary.entry-summary p.price {
  background: #fff;
  border: 1px solid #e7e2d7;
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  padding: 22px 22px 6px;
  margin: 0;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.woocommerce div.product .summary.entry-summary p.price ins {
  text-decoration: none;
}
.woocommerce div.product .summary.entry-summary p.price ins .amount,
.woocommerce
  div.product
  .summary.entry-summary
  p.price
  > .woocommerce-Price-amount {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.3rem;
  color: var(--ink);
}
.woocommerce div.product .summary.entry-summary p.price del .amount {
  font-size: 1rem;
  color: #9aa1ab;
}
.he-price-extra {
  background: #fff;
  border: 1px solid #e7e2d7;
  border-top: none;
  border-radius: 0 0 14px 14px;
  padding: 0 22px 18px;
  margin: 0 0 18px;
  font-size: 0.84rem;
  color: #525964;
}

/* in-stock / out-of-stock line, standalone pill above the buy form */
.woocommerce div.product .summary.entry-summary p.stock {
  background: none;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.88rem;
  font-weight: 600;
  margin: 0 0 14px;
  padding: 0;
}
.woocommerce div.product .summary.entry-summary p.stock.in-stock {
  color: var(--ok);
}
.woocommerce div.product .summary.entry-summary p.stock.in-stock::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  display: inline-block;
}
.woocommerce div.product .summary.entry-summary p.stock.out-of-stock {
  color: var(--accent);
}

/* fitment guarantee box */
.he-fitbox {
  border: 1.5px solid var(--ink, #0e0f11);
  border-radius: 14px;
  overflow: hidden;
  margin: 0 0 18px;
}
.he-fitbox-h {
  background: var(--ink, #0e0f11);
  color: #fff;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.92rem;
}
.he-fitbox-b {
  background: #fff;
  padding: 16px 18px;
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 0.9rem;
  color: #3a4049;
}
.he-fitbox-seal {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ok, #3ba776);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
}

/* buy form: qty stepper + Add to cart */
.woocommerce div.product .summary.entry-summary form.cart {
  display: flex;
  gap: 12px;
  margin: 0 0 12px;
  flex-wrap: wrap;
  align-items: stretch;
}
.woocommerce div.product .summary.entry-summary form.cart .quantity {
  display: flex;
  align-items: center;
  border: 1.5px solid #d8d2c6;
  border-radius: 11px;
  overflow: hidden;
  background: #fff;
  margin: 0;
}
.woocommerce
  div.product
  .summary.entry-summary
  form.cart
  .quantity
  input.qty {
  width: 46px;
  height: 50px;
  border: none;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  background: transparent;
  -moz-appearance: textfield;
  appearance: textfield;
  padding: 0;
}
.woocommerce
  div.product
  .summary.entry-summary
  form.cart
  .quantity
  input.qty::-webkit-outer-spin-button,
.woocommerce
  div.product
  .summary.entry-summary
  form.cart
  .quantity
  input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.woocommerce div.product .summary.entry-summary form.cart .he-qtybtn {
  width: 40px;
  height: 50px;
  border: none;
  background: #fff;
  font-size: 1.15rem;
  cursor: pointer;
  font-weight: 700;
  color: var(--ink, #0e0f11);
  line-height: 1;
}
.woocommerce
  div.product
  .summary.entry-summary
  form.cart
  .he-qtybtn:hover {
  background: var(--paper-2, #eae5db);
}
.woocommerce
  div.product
  .summary.entry-summary
  form.cart
  .single_add_to_cart_button {
  flex: 1;
  min-width: 180px;
  height: 50px;
  font-size: 0.92rem;
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: 0.2s;
}
.woocommerce
  div.product
  .summary.entry-summary
  form.cart
  .single_add_to_cart_button:hover {
  background: var(--accent-2, #ff6a3d) !important;
}

/* buy2 row + trust checklist */
.he-buy2 {
  display: flex;
  gap: 12px;
  margin: 0 0 12px;
}
.he-buy2 .he-btn {
  flex: 1;
  height: 50px;
  border-radius: 11px;
  font-size: 0.85rem;
  text-decoration: none;
}
.he-buy2 .he-btn-dark {
  background: var(--ink, #0e0f11);
  color: #fff;
}
.he-buy2 .he-btn-dark:hover {
  background: #23272e;
  color: #fff;
}
.he-keys {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
}
.he-keys li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.92rem;
  color: #3a4049;
}
.he-keys li::before {
  content: "\2713";
  color: var(--accent);
  font-weight: 800;
  flex: none;
  margin-top: 2px;
}

/* meta line (SKU / category / brand) — kept, just muted and compact */
.woocommerce div.product .summary.entry-summary .product_meta {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid #f0ebe0;
  font-size: 0.78rem;
  color: #8a8e96;
  display: flex;
  gap: 6px 16px;
  flex-wrap: wrap;
}
.woocommerce div.product .summary.entry-summary .product_meta a {
  color: #8a8e96;
}
.woocommerce div.product .summary.entry-summary .product_meta a:hover {
  color: var(--accent);
}

@media (max-width: 768px) {
  .woocommerce div.product .flex-control-thumbs {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 560px) {
  .he-buy2 {
    flex-direction: column;
  }
  .woocommerce
    div.product
    .summary.entry-summary
    form.cart
    .single_add_to_cart_button {
    min-width: 100%;
  }
}

/* =====================================================================
   HYUN ENGINES — Related products, reskinned to match [hyun_shop]'s card
   grid (see hello_elementor_child_render_pcard() in functions.php — the
   exact same markup renders both, this just repeats the .pcard/.products/
   .btn rules from the shop shortcode's own <style> block, scoped under
   .he-related instead of .hyun-shop since the shop shortcode's inline
   styles never load on the single product page).
   ===================================================================== */
.he-related .products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.he-related .pcard {
  background: #fff;
  border: 1px solid #e7e2d7;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: 0.2s;
}
.he-related .pcard:hover {
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.45);
  transform: translateY(-3px);
}
.he-related .pcard .ph {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(155deg, #1c1f24, #0e0f11);
  display: grid;
  place-items: center;
  background-size: cover;
  background-position: center;
}
.he-related .pcard .save {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.74rem;
  padding: 4px 10px;
  border-radius: 999px;
}
.he-related .pcard .code {
  color: #fff;
  text-align: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  padding: 8px;
}
.he-related .pcard .code small {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: #c9c2b5;
  margin-top: 6px;
  letter-spacing: 0.02em;
}
.he-related .pcard .body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.he-related .pcard .brandtag {
  font-size: 0.76rem;
  color: #8a8e96;
  font-weight: 600;
}
.he-related .pcard h3 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}
.he-related .pcard h3 a {
  color: var(--ink);
  text-decoration: none;
}
.he-related .pcard h3 a:hover {
  color: var(--accent);
}
.he-related .pcard .stars {
  color: #f2a93b;
  font-size: 0.85rem;
  letter-spacing: 2px;
}
.he-related .pcard .price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: auto;
}
.he-related .pcard .price .now {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--ink);
}
.he-related .pcard .price .was {
  color: #9aa0a8;
  text-decoration: line-through;
  font-size: 0.9rem;
}
.he-related .pcard .actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.he-related .btn {
  flex: 1;
  text-align: center;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 11px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: 0.2s;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.he-related .btn-ghost {
  background: transparent;
  border: 1.5px solid #e7e2d7;
  color: var(--ink);
}
.he-related .btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.he-related .btn-accent {
  background: var(--accent);
  color: #fff;
}
.he-related .btn-accent:hover {
  background: var(--accent-2, #ff6a3d);
  color: #fff;
}
@media (max-width: 980px) {
  .he-related .products {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .he-related .products {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   HYUN ENGINES — "Can't find your engine?" CTA band. Matches the live
   orange full-bleed band on the shop page's Elementor Archive template
   pixel-for-pixel (colors/sizes taken from its computed styles) — see
   hello_elementor_child_render_find_engine_cta() in functions.php.
   ===================================================================== */
.he-findcta {
  width: auto;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0;
  background: var(--accent);
}
.he-findcta-inner {
  max-width: var(--maxw, 1180px);
  margin: 0 auto;
  padding: 58px 24px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.he-findcta-copy {
  width: min(722px, 100%);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.he-findcta-copy h2 {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  margin: 0;
  color: #fff;
}
.he-findcta-copy p {
  color: #fff;
  margin: 0 0 25px;
  font-size: 1rem;
  line-height: 1.5;
  max-width: 463px;
}
.he-findcta-actions {
  width: 341px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}
.he-findcta-phone {
  display: flex;
  gap: 17px;
  align-items: center;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}
.he-findcta-phone:hover {
  color: #fff !important;
}
.he-findcta-phone svg {
  flex: none;
  fill: var(--e-global-color-1a5adab, #23272e);
  color: var(--e-global-color-1a5adab, #23272e);
  border-color: var(--e-global-color-1a5adab, #23272e);
}
.he-findcta-phone span {
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.6875rem;
  color: #fff;
  line-height: 1;
}
.he-findcta-phone small {
  display: block;
  color: #fff;
  font-weight: 400;
  font-size: 0.875rem;
  margin-top: 8px;
}
.he-findcta-btn {
  display: inline-block;
  text-align: center;
  background: var(--ink);
  color: #fff !important;
  border-radius: 9px;
  padding: 13px 22px;
  font-family: "Archivo", sans-serif;
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  border: none;
}
.he-findcta-btn:hover {
  background: var(--ink);
  color: #fff !important;
}
@media (max-width: 560px) {
  .he-findcta-inner {
    padding: 40px 24px;
  }
  .he-findcta-actions {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =====================================================================
   HYUN ENGINES — Login / Register  (myaccount/form-login.php)
   Two-column card layout matching hyunengines.com.au/my-account/.
   Rendered OUTSIDE .woocommerce-MyAccount-content (logged-out), so inputs
   are styled here rather than inheriting the dashboard form rules.
   ===================================================================== */
.he-login {
  width: 100%;
}
.he-login-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 640px;
  margin: 0 auto;
  padding-inline: 16px;
  box-sizing: border-box;
}
.he-login-grid--2 {
  grid-template-columns: 1fr 1fr;
  max-width: 1000px;
}
.he-authcard {
  background: #fff;
  border: 1px solid var(--paper-2);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 18px 40px -24px rgba(20, 22, 26, 0.28);
}
/* card header: icon badge + title + subtitle */
.he-authhead {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.he-authicon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
}
.he-authicon--accent { background: var(--accent); }
.he-authicon--dark { background: var(--ink); }
.he-login .he-authhead h2 {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}
.he-authsub {
  margin: 3px 0 0;
  font-size: 0.9rem;
  color: #6b7079;
}
/* fields */
.he-login .woocommerce-form-row,
.he-login .form-row {
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
}
.he-login .woocommerce-form-row label,
.he-login .form-row > label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #3a3f46;
  margin-bottom: 7px;
}
.he-login input.input-text,
.he-login input[type="text"],
.he-login input[type="email"],
.he-login input[type="password"] {
  width: 100%;
  height: 48px;
  border: 1px solid var(--paper-2);
  border-radius: 9px;
  padding: 0 14px;
  font-family: var(--body);
  font-size: 0.95rem;
  background: var(--paper);
  color: var(--ink);
  transition: 0.2s;
}
.he-login input.input-text:focus,
.he-login input[type="email"]:focus,
.he-login input[type="password"]:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(232, 67, 27, 0.12);
}
/* password show/hide toggle (WC wraps input in .password-input + adds .show-password-input) */
.he-login .password-input {
  position: relative;
  display: block;
}
.he-login .password-input input {
  padding-right: 46px;
}
.he-login .show-password-input {
  position: absolute;
  right: 0;
  top: 0;
  width: 46px;
  height: 48px;
  cursor: pointer;
  background: center / 20px 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.he-login .show-password-input.display-password {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23e8431b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}
/* remember me (checkbox row) */
.he-login .woocommerce-form-login__rememberme {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 0.9rem;
  color: #3a4049;
  margin: 4px 0 16px;
  cursor: pointer;
}
.he-login .woocommerce-form-login__rememberme input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}
/* buttons */
.he-login .button,
.he-login .woocommerce-form-login__submit,
.he-login .woocommerce-form-register__submit {
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 15px 20px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: 0.2s;
}
.he-login .button:hover,
.he-login .woocommerce-form-login__submit:hover,
.he-login .woocommerce-form-register__submit:hover {
  background: #c9380f;
}
/* lost password + notices */
.he-login .lost_password {
  margin: 16px 0 0;
}
.he-login .lost_password a {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}
.he-login .lost_password a:hover {
  text-decoration: underline;
}
.he-login .he-authnote,
.he-login .woocommerce-privacy-policy-text {
  font-size: 0.88rem;
  color: #6b7079;
  line-height: 1.6;
  margin: 0 0 16px;
}
.he-login .he-authnote {
  margin-top: -6px;
}
.he-login .woocommerce-privacy-policy-text a {
  color: var(--accent);
}
/* stack the two cards on narrow screens */
@media (max-width: 820px) {
  .he-login-grid--2 {
    grid-template-columns: 1fr;
    max-width: 640px;
  }
}
@media (max-width: 480px) {
  .he-authcard {
    padding: 22px;
  }
  .he-authhead h2 {
    font-size: 1.35rem;
  }
}

/* lost-password: single narrow card + intro helper text */
.he-login--narrow .he-login-grid {
  max-width: 460px;
}
.he-login .woocommerce-ResetPassword > p:first-of-type {
  font-size: 0.9rem;
  color: #6b7079;
  line-height: 1.6;
  margin: 0 0 18px;
}

/* ---------------------------------------------------------------------
   Override WooCommerce core form styles (woocommerce.css / -layout.css)
   on the logged-out login page. Those selectors carry an element
   (e.g. `.woocommerce button.button`, `.woocommerce form.login`) so they
   out-specify plain .he-login classes. Anchor on the compound
   `.he-account.he-login` (both classes sit on the same wrapper) to win.
   --------------------------------------------------------------------- */
/* strip WC's default boxed border around form.login / form.register */
.he-account.he-login form.login,
.he-account.he-login form.register,
.he-account.he-login form.woocommerce-ResetPassword {
  border: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
}
/* inputs */
.he-account.he-login .form-row .input-text,
.he-account.he-login .form-row input[type="text"],
.he-account.he-login .form-row input[type="email"],
.he-account.he-login .form-row input[type="password"] {
  height: 48px;
  border: 1px solid var(--paper-2);
  border-radius: 9px;
  padding: 0 14px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: normal;
}
.he-account.he-login .form-row .input-text:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(232, 67, 27, 0.12);
}
.he-account.he-login .password-input .input-text {
  padding-right: 46px;
}
/* buttons */
.he-account.he-login .button {
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 15px 20px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.he-account.he-login .button:hover {
  background: #c9380f;
}

/* the WC show-password toggle is a <button>; strip the reset.css button chrome
   (pink border) so only our eye icon shows */
.he-account.he-login .show-password-input {
  border: 0;
  background-color: transparent;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

/* keep browser-autofilled fields on-brand (Chrome paints its own white bg) */
.he-account.he-login .input-text:-webkit-autofill,
.he-account.he-login .input-text:-webkit-autofill:hover,
.he-account.he-login .input-text:-webkit-autofill:focus,
.he-account.he-login .input-text:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--paper) inset;
  box-shadow: 0 0 0 1000px var(--paper) inset;
  caret-color: var(--ink);
}

.woocommerce-page .col2-set::before {
   content: none;
    display: table;
}