/* EnginesDIY product card palette v2 — 2026-07-22 */
:root {
  --ed-card-ink: #1b2732;
  --ed-card-muted: #66727d;
  --ed-card-soft: #8a949d;
  --ed-card-line: #d9e0e5;
  --ed-card-line-hover: #bcc7cf;
  --ed-card-copper: #a95227;
  --ed-card-copper-dark: #7f3b1f;
  --ed-card-copper-soft: #f7eee8;
  --ed-card-success: #3e735c;
  --ed-card-slate: #506371;
}

/* Keep the whole card neutral; the purchase action is the single strong accent. */
html body .product-layout .product-thumb {
  color: var(--ed-card-ink) !important;
  border-color: var(--ed-card-line) !important;
  box-shadow: 0 8px 24px rgba(27, 39, 50, .055) !important;
}

html body .product-layout .product-thumb:hover {
  border-color: var(--ed-card-line-hover) !important;
  box-shadow: 0 16px 36px rgba(27, 39, 50, .11) !important;
}

html body .product-thumb .name,
html body .product-thumb .name a,
html body .product-thumb .name a:visited,
html body .product-thumb .name a:hover,
html body .product-thumb .name a:focus {
  color: var(--ed-card-ink) !important;
}

html body .product-thumb .name a:hover,
html body .product-thumb .name a:focus {
  text-decoration-color: #aeb8bf !important;
}

/* Brand, stock and supporting text use restrained secondary tones. */
html body .product-thumb .stats,
html body .product-thumb .stats .stats-label {
  color: var(--ed-card-muted) !important;
}

html body .product-thumb .stats .stat-1 > span:last-child,
html body .product-thumb .stats .stat-1 > a:last-child {
  color: var(--ed-card-success) !important;
}

html body .product-thumb .brand,
html body .product-thumb .brand a,
html body .product-thumb .manufacturer,
html body .product-thumb .manufacturer a {
  color: var(--ed-card-muted) !important;
  text-decoration-color: #c0c8ce !important;
}

html body .product-thumb .brand a:hover,
html body .product-thumb .manufacturer a:hover {
  color: var(--ed-card-copper-dark) !important;
  text-decoration-color: var(--ed-card-copper-dark) !important;
}

html body .product-thumb .price,
html body .product-thumb .price-new {
  color: var(--ed-card-ink) !important;
}

html body .product-thumb .price-old {
  color: var(--ed-card-soft) !important;
  text-decoration-color: #aeb7be !important;
}

html body .product-thumb .product-labels-price .product-label,
html body .product-thumb .product-labels-price .product-label strong {
  color: var(--ed-card-muted) !important;
}

html body .product-thumb .product-labels-price .product-label-397,
html body .product-thumb .product-labels-price .product-label-397 strong {
  color: var(--ed-card-copper) !important;
}

/* Sale and New stay readable but use the same graphite/copper system. */
html body .product-thumb .product-labels .product-label-28 {
  background: transparent !important;
  border-color: transparent !important;
}

html body .product-thumb .product-labels .product-label-29,
html body .product-thumb .product-labels .product-label:not(.product-label-28) {
  background: transparent !important;
  border-color: transparent !important;
}

html body .product-thumb .product-labels .product-label-28 strong {
  color: #fff !important;
  background: var(--ed-card-copper) !important;
  border-color: var(--ed-card-copper) !important;
}

html body .product-thumb .product-labels .product-label-29 strong,
html body .product-thumb .product-labels .product-label:not(.product-label-28) strong {
  color: #fff !important;
  background: var(--ed-card-slate) !important;
  border-color: var(--ed-card-slate) !important;
}

/* Primary action: one consistent accessible copper, with a calm dark hover. */
html body .product-thumb .button-group .btn-cart,
html body .product-thumb .button-group .btn-cart:visited,
html body .product-thumb .button-group button:first-child {
  color: #fff !important;
  background: var(--ed-card-copper) !important;
  border-color: var(--ed-card-copper) !important;
  box-shadow: 0 5px 13px rgba(127, 59, 31, .16) !important;
}

html.no-touchevents body .product-thumb .button-group .btn-cart:hover,
html body .product-thumb .button-group .btn-cart:focus,
html body .product-thumb .button-group button:first-child:hover,
html body .product-thumb .button-group button:first-child:focus {
  color: #fff !important;
  background: var(--ed-card-copper-dark) !important;
  border-color: var(--ed-card-copper-dark) !important;
  box-shadow: 0 7px 17px rgba(127, 59, 31, .24) !important;
}

html body .product-thumb .button-group .btn-cart:active,
html body .product-thumb .button-group button:first-child:active {
  color: #fff !important;
  background: #663019 !important;
  border-color: #663019 !important;
}

html body .product-thumb .button-group .btn-cart::before,
html body .product-thumb .button-group .btn-cart .btn-text,
html body .product-thumb .button-group .btn-cart:hover::before,
html body .product-thumb .button-group .btn-cart:hover .btn-text {
  color: #fff !important;
}

/* Journal product modules attach a more specific hover color to the button.
   Keep the label and cart glyph white against the dark-copper hover state. */
html.no-touchevents body .product-layout .product-thumb .button-group .btn-cart.btn:hover,
html.no-touchevents body .product-layout .product-thumb .button-group .btn-cart.btn:hover *,
html.no-touchevents body .product-layout .product-thumb .button-group .btn-cart.btn:hover::before,
html body .product-layout .product-thumb .button-group .btn-cart.btn:focus,
html body .product-layout .product-thumb .button-group .btn-cart.btn:focus *,
html body .product-layout .product-thumb .button-group .btn-cart.btn:focus::before,
html body .product-layout .product-thumb .button-group .btn-cart.btn:active,
html body .product-layout .product-thumb .button-group .btn-cart.btn:active *,
html body .product-layout .product-thumb .button-group .btn-cart.btn:active::before {
  color: #fff !important;
}

/* Secondary icon actions remain neutral until the user interacts with them. */
html body .product-thumb .wish-group .btn,
html body .product-thumb .wish-group .btn:visited {
  color: var(--ed-card-muted) !important;
  background: #fff !important;
  border-color: #cbd3d9 !important;
  box-shadow: none !important;
}

html.no-touchevents body .product-thumb .wish-group .btn:hover,
html body .product-thumb .wish-group .btn:focus {
  color: var(--ed-card-copper-dark) !important;
  background: var(--ed-card-copper-soft) !important;
  border-color: #c98d6b !important;
}

html body .product-thumb .wish-group .btn::before,
html body .product-thumb .wish-group .btn .btn-text {
  color: currentColor !important;
}

html.no-touchevents body .product-layout .product-thumb .wish-group .btn:hover,
html.no-touchevents body .product-layout .product-thumb .wish-group .btn:hover *,
html.no-touchevents body .product-layout .product-thumb .wish-group .btn:hover::before,
html body .product-layout .product-thumb .wish-group .btn:focus,
html body .product-layout .product-thumb .wish-group .btn:focus *,
html body .product-layout .product-thumb .wish-group .btn:focus::before {
  color: var(--ed-card-copper-dark) !important;
}

html.no-touchevents body #content .main-products-wrapper .main-products .product-layout .product-thumb .button-group .wish-group .btn:hover,
html.no-touchevents body #content .main-products-wrapper .main-products .product-layout .product-thumb .button-group .wish-group .btn:hover *,
html.no-touchevents body #content .main-products-wrapper .main-products .product-layout .product-thumb .button-group .wish-group .btn:hover::before {
  color: var(--ed-card-copper-dark) !important;
}

/* Bottom actions no longer compete with green and red icons. */
html body .product-thumb .extra-group .btn,
html body .product-thumb .extra-group .btn:visited,
html body .product-thumb .extra-group .btn::before,
html body .product-thumb .extra-group .btn .btn-text {
  color: var(--ed-card-muted) !important;
  text-decoration-color: #c5ccd1 !important;
}

html.no-touchevents body .product-thumb .extra-group .btn:hover,
html.no-touchevents body .product-thumb .extra-group .btn:hover::before,
html.no-touchevents body .product-thumb .extra-group .btn:hover .btn-text,
html body .product-thumb .extra-group .btn:focus,
html body .product-thumb .extra-group .btn:focus::before,
html body .product-thumb .extra-group .btn:focus .btn-text {
  color: var(--ed-card-copper-dark) !important;
  text-decoration-color: var(--ed-card-copper-dark) !important;
}

html.no-touchevents body .product-layout .product-thumb .extra-group .btn:hover,
html.no-touchevents body .product-layout .product-thumb .extra-group .btn:hover *,
html.no-touchevents body .product-layout .product-thumb .extra-group .btn:hover::before,
html body .product-layout .product-thumb .extra-group .btn:focus,
html body .product-layout .product-thumb .extra-group .btn:focus *,
html body .product-layout .product-thumb .extra-group .btn:focus::before {
  color: var(--ed-card-copper-dark) !important;
  text-decoration-color: var(--ed-card-copper-dark) !important;
}

html.no-touchevents body #content .main-products-wrapper .main-products .product-layout .product-thumb .extra-group .btn:hover,
html.no-touchevents body #content .main-products-wrapper .main-products .product-layout .product-thumb .extra-group .btn:hover *,
html.no-touchevents body #content .main-products-wrapper .main-products .product-layout .product-thumb .extra-group .btn:hover::before {
  color: var(--ed-card-copper-dark) !important;
  text-decoration-color: var(--ed-card-copper-dark) !important;
}

html body .product-thumb .rating .fa-star,
html body .product-thumb .rating .fa-star-o {
  color: #b8c0c6 !important;
}

html body .product-thumb .rating .fa-star.fa-stack-2x,
html body .product-thumb .rating .fa-star-half-o {
  color: #a66a45 !important;
}

@media (max-width: 767px) {
  html body .product-thumb .button-group .btn-cart {
    min-width: 42px;
    min-height: 40px;
  }
}

/* Product-card hierarchy v3: clearer titles, prominent prices and adaptive actions. */
html body .product-layout .product-thumb {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: 14px !important;
}

html body .product-layout .product-thumb .caption {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  padding: 14px 16px 13px !important;
}

html body .product-layout .product-thumb .stats {
  margin: 0 0 9px !important;
  padding: 0 0 9px !important;
  border-bottom: 1px solid var(--ed-card-line) !important;
}

html body .product-layout .product-thumb .stats,
html body .product-layout .product-thumb .stats * {
  font-size: 12px !important;
  line-height: 1.25 !important;
}

html body .product-layout .product-thumb .name {
  min-height: 63px !important;
  margin: 0 !important;
}

html body .product-layout .product-thumb .name a {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: var(--ed-card-ink) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -.01em !important;
  text-decoration: none !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
}

html.no-touchevents body .product-layout .product-thumb .name a:hover,
html body .product-layout .product-thumb .name a:focus {
  color: var(--ed-card-copper-dark) !important;
}

html body .product-layout .product-thumb .description {
  display: none !important;
}

html body .product-layout .product-thumb .price {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-height: 58px !important;
  margin: 10px 0 0 !important;
  padding: 11px 0 0 !important;
  border-top: 1px solid #edf0f2 !important;
}

html body .product-layout .product-thumb .price > div {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 5px 9px !important;
}

html body .product-layout .product-thumb .price .price-new,
html body .product-layout .product-thumb .price .price-normal {
  color: var(--ed-card-ink) !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -.025em !important;
}

html body .product-layout .product-thumb .price .price-old {
  color: var(--ed-card-soft) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

html body .product-layout .product-thumb .product-labels-price {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 3px 5px !important;
  min-height: 14px !important;
}

html body .product-layout .product-thumb .product-labels-price .product-label,
html body .product-layout .product-thumb .product-labels-price .product-label strong {
  font-size: 11px !important;
  line-height: 1.2 !important;
  letter-spacing: .01em !important;
}

html body .product-layout .product-thumb .rating {
  min-height: 19px !important;
  margin: 7px 0 0 !important;
}

html body .product-layout .product-thumb .buttons-wrapper {
  width: 100% !important;
  margin-top: auto !important;
  padding-top: 13px !important;
}

html body .product-layout .product-thumb .button-group {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 38px 38px !important;
  align-items: stretch !important;
  width: 100% !important;
  min-height: 44px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 5px !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  position: static !important;
  inset: auto !important;
}

html body .product-layout .product-thumb .button-group .btn {
  visibility: visible !important;
  opacity: 1 !important;
}

html body .product-layout .product-thumb .cart-group {
  display: flex !important;
  grid-column: 1 !important;
  width: auto !important;
  min-width: 0 !important;
}

html body .product-layout .product-thumb .cart-group .stepper {
  display: none !important;
}

html body .product-layout .product-thumb .button-group .btn-cart {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  border-radius: 9px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body .product-layout .product-thumb .button-group .btn-cart .btn-text {
  overflow: visible !important;
  max-width: none !important;
  text-overflow: clip !important;
}

html body .product-layout .product-thumb .wish-group {
  display: contents !important;
}

html body .product-layout .product-thumb .wish-group .btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 9px !important;
}

html body .product-layout .product-thumb .extra-group {
  margin: 12px 0 0 !important;
  padding: 11px 0 0 !important;
  border-top: 1px solid var(--ed-card-line) !important;
}

html body .product-layout .product-thumb .extra-group > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

html body .product-layout .product-thumb .extra-group .btn {
  min-width: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

@media (max-width: 1199px) {
  html body .product-layout .product-thumb .caption {
    padding-right: 13px !important;
    padding-left: 13px !important;
  }

  html body .product-layout .product-thumb .button-group {
    grid-template-columns: minmax(0, 1fr) 36px 36px !important;
    gap: 5px !important;
  }

  html body .product-layout .product-thumb .button-group .btn-cart {
    padding-right: 8px !important;
    padding-left: 8px !important;
    font-size: 12.5px !important;
  }

  html body .product-layout .product-thumb .wish-group .btn {
    width: 36px !important;
    min-width: 36px !important;
  }
}

@media (max-width: 767px) {
  html body .product-layout .product-thumb .name {
    min-height: 59px !important;
  }

  html body .product-layout .product-thumb .name a {
    font-size: 14px !important;
  }

  html body .product-layout .product-thumb .price .price-new,
  html body .product-layout .product-thumb .price .price-normal {
    font-size: 19px !important;
  }
}