:root {

  --bg: #eef1f4;

  --bg-tint: #e4e9ee;

  --surface: #f7f9fb;

  --ink: #15202b;

  --ink-soft: #3b4a59;

  --muted: #5f6e7c;

  --line: #c9d2db;

  --teal: #0c6e66;

  --teal-deep: #08544e;

  --copper: #a86932;

  --metal: #8d959e;

  --dark: #121a22;

  --shadow: 0 18px 40px rgba(21, 32, 43, 0.08);

  --radius: 14px;

  --font-display: "Chakra Petch", sans-serif;

  --font-body: "Barlow", sans-serif;

  --max: 1180px;

}



*,

*::before,

*::after { box-sizing: border-box; }



html { scroll-behavior: smooth; background: #eef1f4; }



body {

  margin: 0;

  font-family: var(--font-body);

  color: var(--ink);

  background:

    radial-gradient(1200px 500px at 10% -10%, rgba(12, 110, 102, 0.12), transparent 55%),

    linear-gradient(180deg, #f5f7f9 0%, var(--bg) 40%, #e9eef2 100%);

  line-height: 1.55;

  min-height: 100vh;

}



img { max-width: 100%; display: block; }

a { color: var(--teal-deep); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

a:hover { color: var(--teal); }

h1, h2, h3 {

  font-family: var(--font-display);

  line-height: 1.15;

  letter-spacing: -0.02em;

  margin: 0 0 0.55rem;

}

p { margin: 0 0 1rem; color: var(--ink-soft); }

ul { margin: 0; padding: 0; }



.container { width: min(var(--max), calc(100% - 2rem)); margin-inline: auto; }

.narrow { width: min(760px, calc(100% - 2rem)); }

.sr-only, .hp {

  position: absolute !important;

  width: 1px; height: 1px;

  padding: 0; margin: -1px;

  overflow: hidden; clip: rect(0,0,0,0);

  border: 0;

}

.skip-link {

  position: absolute; left: -999px; top: 0;

  background: var(--dark); color: #fff; padding: 0.75rem 1rem; z-index: 1000;

}

.skip-link:focus { left: 1rem; top: 1rem; }



.site-header {

  position: sticky; top: 0; z-index: 50;

  backdrop-filter: blur(12px);

  background: rgba(247, 249, 251, 0.88);

  border-bottom: 1px solid rgba(201, 210, 219, 0.8);

}

.header-inner {

  display: flex; align-items: center; justify-content: space-between;

  min-height: 96px; gap: 1rem;

  padding-block: 0.35rem;

}

.brand {

  display: inline-flex;

  align-items: center;

  line-height: 0;

  flex-shrink: 0;

  padding: 0;

  margin: 0;

  background: none;

  border: 0;

  box-shadow: none;

}

.brand img {

  display: block;

  height: 76px;

  width: auto;

  max-width: min(260px, 58vw);

  object-fit: contain;

  background: none;

  border: 0;

  box-shadow: none;

  border-radius: 0;

}

.size-block { margin: 1rem 0 0.5rem; }

.size-title {

  display: block;

  font-size: 1.05rem;

  font-weight: 700;

  margin-bottom: 0.35rem;

}

.size-hint { margin: 0 0 0.65rem; font-size: 0.9rem; }

.selected-size { margin: 0.35rem 0 0.85rem; }

.selected-size strong { color: var(--ink); }

.size-select-wrap { position: relative; }

.size-select-wrap::after {

  content: "";

  position: absolute;

  right: 0.95rem;

  top: 50%;

  width: 0.55rem;

  height: 0.55rem;

  border-right: 2px solid var(--ink-soft);

  border-bottom: 2px solid var(--ink-soft);

  transform: translateY(-65%) rotate(45deg);

  pointer-events: none;

}

.size-select {

  width: 100%;

  appearance: none;

  -webkit-appearance: none;

  padding: 0.85rem 2.4rem 0.85rem 0.9rem;

  border: 1px solid var(--line);

  border-radius: 12px;

  background: #fff;

  color: var(--ink);

  font: inherit;

  font-weight: 600;

  cursor: pointer;

}

.size-select:focus {

  outline: none;

  border-color: var(--teal);

  box-shadow: 0 0 0 3px rgba(12, 110, 102, 0.12);

}

.keyword-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.9rem; }

.keyword-row span {

  font-size: 0.82rem; font-weight: 700; color: var(--teal-deep);

  background: rgba(12, 110, 102, 0.08); border: 1px solid rgba(12, 110, 102, 0.18);

  padding: 0.35rem 0.65rem; border-radius: 999px;

}

.site-nav { display: flex; align-items: center; gap: 0.35rem; }

.site-nav > a, .nav-dd-btn {

  font-weight: 600; color: var(--ink); text-decoration: none;

  background: none; border: 0; font: inherit; cursor: pointer;

  padding: 0.55rem 0.7rem; border-radius: 999px;

  transition: background .15s ease, color .15s ease;

}

.site-nav > a.is-active,

.site-nav > a:hover,

.nav-dd-btn:hover,

.nav-dd.is-open > .nav-dd-btn,

.nav-dd:hover > .nav-dd-btn {

  color: var(--teal-deep);

  background: rgba(12, 110, 102, 0.08);

}

.nav-dd { position: relative; }

.nav-dd-btn {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

}

.nav-dd-btn::after {

  content: "";

  width: 0.45rem;

  height: 0.45rem;

  border-right: 2px solid currentColor;

  border-bottom: 2px solid currentColor;

  transform: rotate(45deg) translateY(-1px);

  opacity: 0.7;

  transition: transform .15s ease;

}

.nav-dd:hover .nav-dd-btn::after,

.nav-dd.is-open .nav-dd-btn::after,

.nav-dd:focus-within .nav-dd-btn::after {

  transform: rotate(225deg) translateY(-1px);

}

.nav-dd-panel {

  position: absolute;

  top: 100%;

  left: 0;

  min-width: 260px;

  margin: 0;

  padding: 0.55rem;

  padding-top: calc(0.55rem + 0.45rem);

  background: transparent;

  border: 0;

  box-shadow: none;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform: translateY(6px);

  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;

  z-index: 80;

}

.nav-dd-panel::before {

  content: "";

  position: absolute;

  inset: 0.45rem 0 0;

  background: #fff;

  border: 1px solid var(--line);

  border-radius: 14px;

  box-shadow: 0 18px 40px rgba(21, 32, 43, 0.12);

  z-index: -1;

}

.nav-dd:hover .nav-dd-panel,

.nav-dd:focus-within .nav-dd-panel,

.nav-dd.is-open .nav-dd-panel {

  display: grid;

  gap: 0.15rem;

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform: translateY(0);

}

.nav-dd-panel a {

  position: relative;

  text-decoration: none;

  color: var(--ink);

  padding: 0.65rem 0.8rem;

  border-radius: 10px;

  font-weight: 600;

}

.nav-dd-panel a:hover,

.nav-dd-panel a:focus-visible {

  background: rgba(12, 110, 102, 0.1);

  color: var(--teal-deep);

}

.site-nav > .btn {

  margin-left: 0.35rem;

  padding: 0.65rem 1rem;

}

.nav-toggle {

  display: none; width: 44px; height: 44px; border: 1px solid var(--line);

  border-radius: 10px; background: #fff; padding: 10px; gap: 5px;

  flex-direction: column; justify-content: center;

}

.nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }



.btn {

  display: inline-flex; align-items: center; justify-content: center;

  gap: 0.4rem; border-radius: 999px; padding: 0.85rem 1.25rem;

  font-weight: 700; border: 1px solid transparent; text-decoration: none; cursor: pointer;

  font-family: var(--font-body); transition: transform .15s ease, background .15s ease;

}

.btn:hover { transform: translateY(-1px); }

.btn-sm { padding: 0.55rem 0.9rem; font-size: 0.95rem; }

.btn-accent { background: var(--teal); color: #fff; }

.btn-accent:hover { background: var(--teal-deep); color: #fff; }

.btn-ghost { background: rgba(255,255,255,0.7); border-color: var(--line); color: var(--ink); }

.btn-ghost:hover { background: #fff; color: var(--ink); }



.hero {

  position: relative; overflow: hidden;

  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);

}

.hero-bg {

  position: absolute; inset: 0;

  background:

    linear-gradient(120deg, rgba(18, 26, 34, 0.04), transparent 40%),

    repeating-linear-gradient(

      90deg,

      rgba(141, 149, 158, 0.08) 0 1px,

      transparent 1px 18px

    );

  mask-image: linear-gradient(180deg, #000 30%, transparent 100%);

  pointer-events: none;

}

.hero-grid {

  position: relative;

  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2rem; align-items: center;

}

.brand-mark, .eyebrow {

  font-family: var(--font-display);

  text-transform: uppercase; letter-spacing: 0.14em;

  font-size: 0.82rem; font-weight: 600; color: var(--teal); margin-bottom: 0.8rem;

}

.hero h1, .page-hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); max-width: 14ch; }

.lede { font-size: 1.15rem; max-width: 48ch; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.4rem; }

.hero-panel {

  position: relative;

  background: linear-gradient(160deg, #ffffff 0%, #edf2f5 100%);

  border: 1px solid var(--line); border-radius: 24px; padding: 1.2rem; box-shadow: var(--shadow);

}

.hero-panel img { width: 100%; height: auto; }

.hero-stat {

  position: absolute; left: 1.4rem; bottom: 1.4rem;

  background: rgba(18, 26, 34, 0.92); color: #fff; padding: 0.9rem 1rem; border-radius: 12px;

}

.hero-stat strong { display: block; font-family: var(--font-display); font-size: 1.2rem; }

.hero-stat span { color: rgba(255,255,255,0.78); font-size: 0.92rem; }



.die-promo {

  padding-top: clamp(1.5rem, 3vw, 2.2rem);

}

.die-promo-grid {

  display: grid;

  grid-template-columns: 1.05fr 0.95fr;

  gap: 1.75rem;

  align-items: center;

  padding: clamp(1.4rem, 3vw, 2rem);

  border-radius: 24px;

  border: 1px solid rgba(12, 110, 102, 0.22);

  background:

    radial-gradient(700px 280px at 90% 10%, rgba(12, 110, 102, 0.16), transparent 60%),

    linear-gradient(145deg, #ffffff 0%, #eef6f5 55%, #e7eef2 100%);

  box-shadow: var(--shadow);

}

.die-promo-copy .lede { margin-bottom: 1rem; }

.die-promo-copy .check-list { margin: 0 0 0.4rem; }

.die-promo-media {

  position: relative;

  display: block;

  border-radius: 18px;

  overflow: hidden;

  border: 1px solid var(--line);

  background: #fff;

  text-decoration: none;

}

.die-promo-media img {

  width: 100%;

  height: auto;

  aspect-ratio: 4 / 3;

  object-fit: cover;

}

.die-promo-badge {

  position: absolute;

  left: 1rem;

  bottom: 1rem;

  right: 1rem;

  max-width: 280px;

  background: rgba(18, 26, 34, 0.92);

  color: #fff;

  padding: 0.85rem 1rem;

  border-radius: 12px;

}

.die-promo-badge strong {

  display: block;

  font-family: var(--font-display);

  font-size: 1.1rem;

  margin-bottom: 0.15rem;

}

.die-promo-badge span {

  color: rgba(255,255,255,0.8);

  font-size: 0.9rem;

}



.section { padding: clamp(2.5rem, 5vw, 4rem) 0; }

.section-tint { background: rgba(255,255,255,0.45); border-block: 1px solid rgba(201,210,219,0.7); }

.section-dark {

  background:

    linear-gradient(135deg, #15202b 0%, #0f3d39 55%, #173049 100%);

  color: #fff;

}

.section-dark p, .section-head.light p { color: rgba(255,255,255,0.78); }

.section-head { margin-bottom: 1.5rem; }

.section-head.spread, .catalog-toolbar {

  display: flex; justify-content: space-between; gap: 1rem; align-items: end; flex-wrap: wrap;

}

.section-head h2, .page-hero h1 + p { max-width: 55ch; }



.category-grid, .product-grid, .location-grid {

  display: grid; gap: 1rem;

}

.category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.location-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }



.category-card, .product-card, .location-card, .info-panel, .product-buybox, .product-gallery {

  background: rgba(255,255,255,0.82);

  border: 1px solid var(--line);

  border-radius: var(--radius);

  box-shadow: var(--shadow);

}

.category-card {

  display: grid; grid-template-columns: 96px 1fr; gap: 1rem; padding: 1rem; text-decoration: none; color: inherit;

}

.category-card img {

  width: 96px; height: 72px; object-fit: cover;

  background: #eceff2; border-radius: 10px; padding: 0;

}

.category-card h3 { font-size: 1.15rem; }

.category-card p { margin: 0; font-size: 0.95rem; }



.product-card { overflow: hidden; display: flex; flex-direction: column; }

.product-card-media {

  position: relative;

  display: grid;

  place-items: center;

  background:

    radial-gradient(circle at 50% 40%, #f7fafb 0%, #e8eef2 70%);

  overflow: hidden;

  aspect-ratio: 4/3;

}

.product-card-media img {

  width: 100%;

  height: 100%;

  max-width: 92%;

  max-height: 92%;

  object-fit: contain;

  object-position: center;

  display: block;

  margin: 0 auto;

}

.product-card-body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; }

.product-card-body h3 { font-size: 1.15rem; }

.product-card-body h3 a { color: inherit; text-decoration: none; }

.product-card-body p { margin: 0; font-size: 0.95rem; flex: 1; }

.product-card-meta, .product-card-actions {

  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap;

}

.sku { font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 0; }

.price-tag, .price-value {

  font-family: var(--font-display); font-weight: 700; color: var(--copper);

}

.badge {

  position: absolute; top: 0.8rem; left: 0.8rem;

  background: var(--dark); color: #fff; font-size: 0.75rem; font-weight: 700;

  letter-spacing: 0.04em; text-transform: uppercase; padding: 0.35rem 0.55rem; border-radius: 999px;

}

.text-link { font-weight: 700; text-decoration: none; }

.muted { color: var(--muted); }



.page-hero { padding: 2.2rem 0 0.5rem; }

.page-hero-tight { padding-bottom: 0; }

.crumbs {

  display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center;

  font-size: 0.92rem; color: var(--muted); margin-bottom: 0.9rem;

}

.crumbs a { color: var(--muted); text-decoration: none; }

.crumbs a:hover { color: var(--teal); }



.catalog-layout { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; }

.filters {

  background: rgba(255,255,255,0.75); border: 1px solid var(--line);

  border-radius: var(--radius); padding: 1rem; height: fit-content; position: sticky; top: 92px;

}

.filters h2 { font-size: 1rem; margin-bottom: 0.8rem; }

.filters ul { list-style: none; display: grid; gap: 0.25rem; }

.filters a {

  display: block; text-decoration: none; color: var(--ink-soft);

  padding: 0.5rem 0.65rem; border-radius: 8px; font-weight: 600;

}

.filters a.is-active { background: var(--bg-tint); color: var(--teal-deep); }

.subcat-list { list-style: none; margin: 0.2rem 0 0.4rem 0.8rem; display: grid; gap: 0.15rem; }

.subcat-list a { font-size: 0.92rem; font-weight: 500; }



.split, .split-top, .contact-layout, .product-layout {

  display: grid; gap: 1.5rem;

}

.split, .contact-layout, .split-top { grid-template-columns: 1.1fr 0.9fr; align-items: start; }

.product-layout { grid-template-columns: 1.05fr 0.95fr; }

.check-list, .feature-list, .plain-list { list-style: none; display: grid; gap: 0.7rem; }

.check-list li, .feature-list li {

  position: relative; padding-left: 1.4rem; color: var(--ink-soft);

}

.check-list li::before, .feature-list li::before {

  content: ""; position: absolute; left: 0; top: 0.45rem;

  width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--teal);

}

.info-panel, .product-buybox, .contact-aside { padding: 1.35rem; }

.info-panel ol, .contact-aside ol { margin: 0 0 1rem 1.1rem; color: var(--ink-soft); }

.city-chips { display: flex; flex-wrap: wrap; gap: 0.65rem; }

.city-chips a {

  text-decoration: none; color: #fff; border: 1px solid rgba(255,255,255,0.25);

  background: rgba(255,255,255,0.06); padding: 0.55rem 0.9rem; border-radius: 999px; font-weight: 600;

}

.city-chips a:hover, .city-chips a.is-more { background: rgba(255,255,255,0.14); color: #fff; }
.faq-list { display: grid; gap: 0.75rem; max-width: 720px; }
.faq-item {
  border: 1px solid rgba(201,210,219,0.9);
  background: rgba(255,255,255,0.72);
  border-radius: 12px;
  padding: 0.85rem 1rem;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink, #15202b);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary { margin-bottom: 0.45rem; }
.faq-item p { margin: 0; color: var(--muted, #5b6773); line-height: 1.55; }
.faq-foot { margin-top: 1.1rem; color: var(--muted, #5b6773); }
.faq-list-page { max-width: 760px; }





.location-card {

  display: block; padding: 1.2rem; text-decoration: none; color: inherit;

}

.location-card .region {

  display: inline-block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em;

  color: var(--teal); font-weight: 700; margin-bottom: 0.45rem;

}

.location-card h2 { font-size: 1.35rem; }

.location-card p { margin: 0; }



.product-gallery {

  position: relative;

  display: grid;

  place-items: center;

  padding: 1rem;

  overflow: hidden;

  background:

    radial-gradient(circle at 50% 40%, #f7fafb 0%, #eceff2 70%);

}

.product-gallery img {

  width: 100%;

  height: auto;

  max-height: 420px;

  aspect-ratio: 4/3;

  object-fit: contain;

  object-position: center;

  display: block;

  margin: 0 auto;

}

.price-box {

  display: flex; justify-content: space-between; gap: 1rem; align-items: center;

  padding: 1rem; border-radius: 12px; background: #f3f7f6; border: 1px solid #cfe0dc; margin: 1rem 0;

}

.price-label { display: block; color: var(--muted); font-size: 0.85rem; }

.price-value { font-size: 1.35rem; }

.spec-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; }

.spec-table th, .spec-table td { text-align: left; padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--line); vertical-align: top; }

.spec-table th { width: 40%; color: var(--ink); background: #f4f7f9; font-weight: 700; }



.cta-band {

  display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap;

  padding: 1.4rem 1.5rem; border-radius: 18px; background: #fff; border: 1px solid var(--line);

}

.prose p { font-size: 1.05rem; }

.center { text-align: center; }

.center-cta { justify-content: center; }



.site-footer {

  margin-top: 2rem; background: var(--dark); color: rgba(255,255,255,0.82); padding: 3rem 0 1.5rem;

}

.footer-grid {

  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2rem;

}

.site-footer h3 {

  color: #fff; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.8rem;

}

.site-footer ul { list-style: none; display: grid; gap: 0.45rem; }

.site-footer a { color: rgba(255,255,255,0.82); text-decoration: none; }

.site-footer a:hover { color: #fff; }

.footer-logo {

  display: block;

  width: min(220px, 100%);

  height: auto;

  margin-bottom: 0.9rem;

  background: none;

  border: 0;

  border-radius: 0;

  box-shadow: none;

}

.footer-bottom {

  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;

  border-top: 1px solid rgba(255,255,255,0.12); padding-top: 1rem; font-size: 0.92rem;

}



.modal[hidden] { display: none !important; }

.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; }

.modal-backdrop { position: absolute; inset: 0; background: rgba(10, 16, 22, 0.62); }

.modal-panel {

  position: relative; width: min(640px, 100%);

  background: #fff; border-radius: 18px; padding: 1.4rem 1.4rem 1.2rem; box-shadow: var(--shadow);

  max-height: calc(100vh - 2rem); overflow: auto;

}

.modal-close {

  position: absolute; right: 0.8rem; top: 0.6rem; border: 0; background: transparent;

  font-size: 1.6rem; cursor: pointer; color: var(--muted);

}

.modal-sub { margin-bottom: 1rem; }

.quote-form { display: grid; gap: 0.8rem; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }

.quote-form label {

  display: grid; gap: 0.35rem; font-weight: 600; font-size: 0.92rem; color: var(--ink);

}

.quote-form input, .quote-form textarea {

  width: 100%; border: 1px solid var(--line); border-radius: 10px;

  padding: 0.7rem 0.8rem; font: inherit; background: #fbfcfd; color: var(--ink);

}

.quote-form input:focus, .quote-form textarea:focus {

  outline: 2px solid rgba(12, 110, 102, 0.25); border-color: var(--teal);

}

.form-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.3rem; }

.form-status {

  display: block;

  margin: 0.35rem 0 0;

  padding: 0.85rem 1rem;

  border-radius: 10px;

  font-weight: 600;

  line-height: 1.35;

}

.form-status[hidden] { display: none !important; }

.form-status.is-ok { background: #e7f6f1; color: #0c5a4f; border: 1px solid #b7e2d4; }

.form-status.is-err { background: #fdecea; color: #8a1f17; border: 1px solid #f0c2bc; }

.contact-success { display: grid; gap: 0.9rem; }

.contact-success[hidden],

[data-contact-fields][hidden],

[data-contact-fields-actions][hidden] { display: none !important; }

.contact-success .form-status { font-size: 1.05rem; }



.blog-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 1.25rem;

}

.blog-grid-home { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.blog-card {

  background: #fff;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  overflow: hidden;

  display: grid;

  box-shadow: var(--shadow);

}

.blog-card-media img {

  width: 100%;

  aspect-ratio: 16 / 9;

  object-fit: cover;

}

.blog-card-body { padding: 1.15rem 1.2rem 1.35rem; display: grid; gap: 0.55rem; }

.blog-card-body h2, .blog-card-body h3 { margin: 0; font-size: 1.25rem; line-height: 1.25; }

.blog-card-body h2 a, .blog-card-body h3 a { color: inherit; text-decoration: none; }

.blog-card-body h2 a:hover, .blog-card-body h3 a:hover { color: var(--teal); }

.blog-card-body p { margin: 0; color: var(--ink-soft); }

.blog-meta {

  display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;

  margin: 0; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em;

  color: var(--teal); font-weight: 700;

}

.blog-meta time { color: var(--muted); font-weight: 600; }

.hero-meta { margin-bottom: 0.6rem; }

.blog-layout {

  display: grid;

  grid-template-columns: minmax(0, 1.7fr) minmax(240px, 0.8fr);

  gap: 1.5rem;

  align-items: start;

}

.blog-content {

  background: #fff;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  padding: 1.4rem 1.5rem 1.7rem;

  box-shadow: var(--shadow);

}

.blog-hero-img {

  width: 100%;

  aspect-ratio: 16 / 9;

  object-fit: cover;

  border-radius: 12px;

  margin-bottom: 1.25rem;

}

.blog-content h2 {

  font-family: var(--font-display);

  font-size: 1.45rem;

  margin: 1.6rem 0 0.7rem;

}

.blog-content ul, .blog-content ol { padding-left: 1.2rem; }

.blog-content li { margin: 0.35rem 0; }

.blog-aside .info-panel h2 { font-size: 1.1rem; margin-top: 0; }



/* Welcome chat widget */

.chat-widget {

  position: fixed;

  right: 1.1rem;

  bottom: 1.1rem;

  z-index: 80;

  display: grid;

  justify-items: end;

  gap: 0.75rem;

  font-family: var(--font-body);

}

.chat-fab {

  display: inline-flex;

  align-items: center;

  gap: 0.55rem;

  border: 0;

  border-radius: 999px;

  padding: 0.85rem 1.15rem;

  background: var(--teal);

  color: #fff;

  font: inherit;

  font-weight: 700;

  cursor: pointer;

  box-shadow: 0 14px 30px rgba(12, 110, 102, 0.35);

}

.chat-fab:hover { background: var(--teal-deep); }

.chat-fab-icon { display: grid; place-items: center; }

.chat-panel {

  width: min(380px, calc(100vw - 1.5rem));

  max-height: min(560px, calc(100vh - 6rem));

  background: #fff;

  border: 1px solid var(--line);

  border-radius: 18px;

  box-shadow: 0 22px 50px rgba(21, 32, 43, 0.18);

  display: grid;

  grid-template-rows: auto 1fr auto auto;

  overflow: hidden;

}

.chat-panel[hidden] { display: none !important; }

.chat-panel-head {

  display: flex;

  justify-content: space-between;

  gap: 0.75rem;

  align-items: start;

  padding: 0.95rem 1rem;

  background: var(--dark);

  color: #fff;

}

.chat-kicker {

  margin: 0 0 0.2rem;

  font-size: 0.72rem;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: #9fd0cb;

}

.chat-panel-head strong { display: block; font-size: 1rem; line-height: 1.3; }

.chat-close {

  border: 0; background: transparent; color: #fff; font-size: 1.5rem;

  line-height: 1; cursor: pointer; padding: 0 0.2rem;

}

.chat-messages {

  padding: 0.9rem;

  overflow: auto;

  display: grid;

  gap: 0.55rem;

  background: #f4f7f9;

  min-height: 180px;

}

.chat-bubble {

  max-width: 88%;

  padding: 0.65rem 0.8rem;

  border-radius: 14px;

  font-size: 0.92rem;

  line-height: 1.4;

  white-space: pre-wrap;

}

.chat-bubble.is-bot {

  justify-self: start;

  background: #fff;

  border: 1px solid var(--line);

  color: var(--ink);

}

.chat-bubble.is-user {

  justify-self: end;

  background: var(--teal);

  color: #fff;

}

.chat-quick {

  display: flex;

  flex-wrap: wrap;

  gap: 0.4rem;

  padding: 0.55rem 0.8rem 0.2rem;

  background: #fff;

  border-top: 1px solid var(--line);

}

.chat-quick button {

  border: 1px solid var(--line);

  background: #f7faf9;

  color: var(--ink);

  border-radius: 999px;

  padding: 0.35rem 0.7rem;

  font: inherit;

  font-size: 0.8rem;

  font-weight: 600;

  cursor: pointer;

}

.chat-quick button:hover { border-color: var(--teal); color: var(--teal-deep); }

.chat-form {

  padding: 0.65rem 0.8rem 0.85rem;

  background: #fff;

  border-top: 1px solid var(--line);

  display: grid;

  gap: 0.55rem;

}

.chat-fields { display: grid; gap: 0.45rem; }

.chat-fields[hidden] { display: none !important; }

.chat-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }

.chat-form label {

  display: grid; gap: 0.25rem; font-size: 0.78rem; font-weight: 700; color: var(--muted);

}

.chat-form input, .chat-form textarea {

  width: 100%; border: 1px solid var(--line); border-radius: 10px;

  padding: 0.55rem 0.65rem; font: inherit; background: #fbfcfd; color: var(--ink);

}

.chat-compose { display: grid; grid-template-columns: 1fr auto; gap: 0.45rem; align-items: end; }

.chat-send { padding: 0.7rem 1rem; }

.chat-note { margin: 0; font-size: 0.72rem; color: var(--muted); line-height: 1.35; }



@media (max-width: 980px) {

  .hero-grid, .die-promo-grid, .catalog-layout, .split, .split-top, .contact-layout, .product-layout, .footer-grid, .blog-layout {

    grid-template-columns: 1fr;

  }

  .blog-grid, .blog-grid-home { grid-template-columns: 1fr; }

  .product-grid, .location-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .filters { position: static; }

}



@media (max-width: 760px) {

  .nav-toggle { display: inline-flex; }

  .brand img {

    height: 64px;

    max-width: min(220px, 62vw);

  }

  .header-inner { min-height: 84px; }

  .site-nav {

    display: none; position: absolute; left: 1rem; right: 1rem; top: 88px;

    background: #fff; border: 1px solid var(--line); border-radius: 14px;

    padding: 1rem; flex-direction: column; align-items: stretch; box-shadow: var(--shadow);

  }

  .site-nav.is-open { display: flex; }

  .nav-dd { width: 100%; }

  .nav-dd-btn { width: 100%; justify-content: space-between; }

  .nav-dd-panel,

  .nav-dd:hover .nav-dd-panel,

  .nav-dd:focus-within .nav-dd-panel {

    position: static;

    display: none;

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: none;

    padding: 0.25rem 0 0.35rem;

    background: transparent;

    box-shadow: none;

  }

  .nav-dd-panel::before { display: none; }

  .nav-dd.is-open .nav-dd-panel { display: grid; gap: 0.15rem; }

  .category-grid, .product-grid, .location-grid, .form-row, .chat-field-row, .chat-compose { grid-template-columns: 1fr; }

  .chat-widget { right: 0.75rem; bottom: 0.75rem; }

  .category-card { grid-template-columns: 72px 1fr; }

  .hero h1 { max-width: none; }

}