/* Ahen button system: graphite navigation, red quote additions, green WhatsApp. */
:root {
  --button-graphite: #303840;
  --button-graphite-fill: linear-gradient(135deg, #56616c, #303840);
  --button-graphite-hover: linear-gradient(135deg, #414b55, #222a31);
  --button-red-fill: linear-gradient(180deg, #ffffff12, transparent 52%), linear-gradient(135deg, #c73c2b, #a92e23);
  --button-red-hover: linear-gradient(180deg, #ffffff0d, transparent 52%), linear-gradient(135deg, #b93225, #93271f);
  --button-green-fill: linear-gradient(135deg, #168349, #106b3b);
  --button-font: "Bahnschrift SemiBold", "Bahnschrift", Arial, sans-serif;
  --button-radius: 14px;
}

.site-header .nav a.nav-contact,
.hero-cta > a.red-button,
.catalog-search button,
.catalog-mobile-toggle,
.quote-submit,
.quote-float {
  border: 1px solid #ffffff29;
  border-radius: var(--button-radius);
  background: var(--button-graphite-fill);
  color: #fff;
  font-family: var(--button-font);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 7px 17px #25303b21, inset 0 1px 1px #ffffff30;
  transition: background .2s, box-shadow .2s, transform .2s;
}
.site-header .nav a.nav-contact { min-height: 52px; padding: 14px 22px; }
.hero-cta > a.red-button { box-shadow: 0 12px 28px #25303b2e, inset 0 2px 1px #ffffff2b; }
.welcome-dialog .welcome-cta {
  background: var(--button-red-fill);
  color: #fff;
  box-shadow: 0 12px 28px #a92e2340, inset 0 2px 1px #ffffff2b;
}
.welcome-dialog .welcome-cta:hover {
  background: var(--button-red-hover);
  color: #fff;
  box-shadow: 0 16px 32px #a92e2350, inset 0 2px 1px #ffffff25;
}
.welcome-dialog .welcome-cta:focus-visible { outline: 3px solid #c73c2b; outline-offset: 4px; }
.catalog-search button { min-height: 48px; padding: 12px 25px; }
.quote-submit { min-height: 56px; padding: 16px 20px; }
.quote-float { min-height: 52px; }

.quote-open {
  min-height: 52px;
  border: 1px solid #d8dce1;
  border-radius: var(--button-radius);
  background: #fff;
  color: var(--button-graphite);
  font-family: var(--button-font);
  box-shadow: 0 3px 10px #25303b05;
  text-decoration: none;
}
.quote-open [data-quote-count] { background: var(--button-graphite-fill); color: #fff; }
.quote-float [data-quote-count] { background: #fff; color: var(--button-graphite); }
.quote-open:hover { border-color: #7d8791; background: #f8f9fa; }

.catalog-category,
.catalog-tree-children .catalog-category {
  min-height: 56px;
  padding: 15px 18px;
  border: 1px solid #dfe2e6;
  border-radius: var(--button-radius);
  background: #fff;
  color: #303840;
  font-family: var(--button-font);
  box-shadow: 0 2px 6px #25303b04;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.catalog-category:hover,
.catalog-tree-children .catalog-category:hover { background: #f2f4f6; border-color: #afb7bf; color: #25303b; }
.catalog-category.selected,
.catalog-tree-children .catalog-category.selected {
  border-color: #ffffff29;
  background: var(--button-graphite-fill);
  color: #fff;
  box-shadow: 0 6px 14px #25303b1c, inset 0 1px 1px #ffffff30;
}
.catalog-tree-children .catalog-category { min-height: 44px; padding: 11px 12px; border-radius: 11px; }
.catalog-filters a,
.catalog-pagination a,
.catalog-pagination span { border-radius: 11px; color: var(--button-graphite); font-family: var(--button-font); }
.catalog-filters a:hover,
.catalog-pagination a:hover { color: #222a31; border-color: #66717c; background: #f3f5f6; }
.catalog-pagination [aria-current="page"] { background: var(--button-graphite-fill); border-color: #303840; color: #fff; }
.catalog-description a,
.quote-page-heading > a,
.quote-list-foot a,
.quote-list-foot button,
.quote-line .quote-edit { color: var(--button-graphite); }
.catalog-card:hover { border-color: #a5aeb7; }
.catalog-search:focus-within { border-color: #677684; box-shadow: 0 0 0 3px #50606d12; }

.catalog-card .add-to-quote,
.quote-submit[data-add],
#detail-add {
  min-height: 54px;
  border: 1px solid #ffffff35;
  border-radius: var(--button-radius);
  background: var(--button-red-fill);
  color: #fff;
  font-family: var(--button-font);
  font-weight: 600;
  box-shadow: 0 7px 17px #a92e2333, inset 0 2px 1px #ffffff2d;
  transition: background .2s, box-shadow .2s, transform .2s;
}
.catalog-card .add-to-quote {
  width: calc(100% - 24px);
  margin: 0 12px 14px;
  padding: 13px 14px;
  justify-content: space-between;
  gap: 10px;
  font-size: 15px;
  text-align: left;
}
.add-to-quote .button-label { font: inherit; }
.add-to-quote .button-symbol { flex: 0 0 auto; font: 500 23px/1 var(--button-font); }
.quote-submit[data-add] { justify-content: space-between; }

.product-dialog .detail-actions { gap: 12px; }
.product-dialog .detail-actions > :is(button, a) {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  height: 56px;
  min-height: 56px;
  margin: 0;
  padding: 15px 20px;
  border-radius: var(--button-radius);
  font: 600 16px/1.4 var(--button-font);
  text-align: left;
  text-decoration: none;
}
.detail-actions #detail-page {
  border: 1px solid #c7cdd4;
  background: #fff;
  color: var(--button-graphite);
  box-shadow: 0 3px 9px #25303b0a, inset 0 1px 0 #fff;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.detail-actions #detail-page:hover {
  border-color: #78838e;
  background: #f7f8fa;
  color: #222a31;
  box-shadow: 0 5px 12px #25303b12;
}
.detail-actions #detail-page:focus-visible {
  outline: 3px solid #657a8b;
  outline-offset: 4px;
}
.detail-actions svg.button-arrow,
.product-whatsapp svg.button-arrow {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
}

.whatsapp,
.product-whatsapp,
.detail-actions .product-whatsapp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 54px;
  padding: 16px 20px;
  border: 1px solid #ffffff2e;
  border-radius: var(--button-radius);
  background: var(--button-green-fill);
  color: #fff;
  font: 600 16px/1.4 var(--button-font);
  text-decoration: none;
  text-align: left;
  box-shadow: 0 7px 17px #106b3b24, inset 0 1px 1px #ffffff2b;
  transition: background .2s, box-shadow .2s, transform .2s;
}
.product-whatsapp { margin-top: 13px; }
.product-whatsapp svg { width: 23px; height: 23px; flex: 0 0 23px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.product-whatsapp .button-label { flex: 1; }
.detail-actions .product-whatsapp { margin: 0; }
.whatsapp span:nth-child(2) { color: #e5f7eb; }
.whatsapp:hover,
.product-whatsapp:hover,
.detail-actions .product-whatsapp:hover { background: linear-gradient(135deg, #116c3c, #0c552e); color: #fff; box-shadow: 0 9px 21px #106b3b36, inset 0 1px 1px #ffffff20; }

.site-header .nav a.nav-contact:hover,
.hero-cta > a.red-button:hover,
.catalog-search button:hover,
.catalog-mobile-toggle:hover,
.quote-submit:hover,
.quote-float:hover { background: var(--button-graphite-hover); color: #fff; box-shadow: 0 10px 22px #25303b30, inset 0 1px 1px #ffffff24; }
.catalog-card .add-to-quote:hover,
.quote-submit[data-add]:hover,
#detail-add:hover { background: var(--button-red-hover); color: #fff; box-shadow: 0 10px 24px #a92e2347, inset 0 2px 1px #ffffff25; }

.site-header a.nav-contact:focus-visible,
.hero-cta > a.red-button:focus-visible,
.catalog-section :is(a, button):focus-visible,
.quote-submit:focus-visible,
.quote-float:focus-visible,
.quote-open:focus-visible { outline: 3px solid #657a8b; outline-offset: 4px; }
.catalog-card .add-to-quote:focus-visible,
.quote-submit[data-add]:focus-visible,
#detail-add:focus-visible { outline: 3px solid #c73c2b; outline-offset: 4px; }
.whatsapp:focus-visible,
.product-whatsapp:focus-visible { outline: 3px solid #168349; outline-offset: 4px; }
.welcome-close:hover,
.product-dialog .dialog-close:hover { border-color: #647382; color: #303840; background: #f2f4f6; }
.quote-submit:disabled,
.add-to-quote:disabled,
#detail-add:disabled { opacity: .6; cursor: wait; transform: none; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .catalog-card .add-to-quote:hover,
  .quote-submit:hover,
  .product-whatsapp:hover { transform: translateY(-1px); }
}
@media (max-width: 760px) {
  .catalog-card .add-to-quote { width: calc(100% - 18px); margin: 0 9px 11px; min-height: 52px; padding: 11px 10px; gap: 6px; font-size: 13px; border-radius: 12px; }
  .add-to-quote .button-symbol { font-size: 21px; }
  .quote-open { min-height: 46px; border-radius: 12px; }
  .catalog-search button { padding: 11px 19px; min-height: 46px; border-radius: 12px; }
  .catalog-category { min-height: 52px; padding: 14px 15px; }
  .catalog-mobile-toggle { min-height: 50px; }
  .product-whatsapp,
  .detail-actions .product-whatsapp { font-size: 15px; padding: 15px 17px; }
  .whatsapp { padding: 15px 17px; font-size: 15px; flex-wrap: wrap; }
  .quote-float { min-height: 48px; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .nav a.nav-contact,
  .hero-cta > a.red-button,
  .welcome-dialog .welcome-cta,
  .catalog-category,
  .catalog-search button,
  .quote-submit,
  .add-to-quote,
  #detail-add,
  #detail-page,
  .quote-float,
  .whatsapp,
  .product-whatsapp { transition: none; transform: none; }
}
