.tb-esselte-brand {
  --tb-esselte-green: #154940;
  --tb-esselte-ink: #143932;
  --tb-esselte-muted: #516a60;
  --tb-esselte-line: #d4e0d7;
  --tb-esselte-light: #f2f6f1;
  width: min(1160px, 100%);
  margin: 0 auto 24px;
  color: var(--tb-esselte-ink);
}
.tb-esselte-brand :is(h1, h2, h3, p) { margin: 0; }
.tb-esselte-brand [hidden] { display: none !important; }
.tb-esselte-brand :focus-visible,
.tb-esselte-about-link:focus-visible { outline: 3px solid #a16e19; outline-offset: 4px; }
.tb-esselte-brand .tb-esselte-eyebrow {
  margin-bottom: 11px;
  color: #3c6858;
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.tb-esselte-hero {
  display: grid;
  border-radius: 24px;
  overflow: hidden;
  background: var(--tb-esselte-green);
}
.tb-esselte-hero.has-images { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); }
.tb-esselte-hero-copy { padding: clamp(32px, 5vw, 64px); color: #fffefa; }
.tb-esselte-hero-copy .tb-esselte-eyebrow { color: #c9dfc9; }
.tb-esselte-hero-copy h1 {
  color: inherit;
  font-size: clamp(3.6rem, 8vw, 7rem);
  font-weight: 740;
  line-height: .94;
  letter-spacing: -.075em;
  margin-bottom: 13px;
}
.tb-esselte-hero-copy .tb-esselte-tagline {
  color: #f8eccc;
  font-size: clamp(1.1rem, 2.15vw, 1.42rem);
  font-weight: 650;
  margin-bottom: 12px;
}
.tb-esselte-hero-copy p:not(.tb-esselte-eyebrow, .tb-esselte-tagline) { color: #e0ede3; max-width: 415px; line-height: 1.6; }
.tb-esselte-brand .tb-esselte-cta {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  min-height: 47px;
  margin-top: 22px;
  padding: .63rem 1.05rem;
  border-radius: 9px;
  background: #f3e3b8;
  color: #183d34;
  text-decoration: none;
  font-weight: 740;
}
.tb-esselte-brand .tb-esselte-cta:hover { background: #f9eac1; }
.tb-esselte-hero-art { position: relative; isolation: isolate; overflow: hidden; min-height: 310px; background: #e5eee3; }
.tb-esselte-hero-art::before,
.tb-esselte-hero-art::after { content: ""; position: absolute; width: 75%; aspect-ratio: 1; border-radius: 50%; }
.tb-esselte-hero-art::before { top: -22%; left: 34%; background: #d0e2d3; }
.tb-esselte-hero-art::after { bottom: -43%; left: -13%; background: #f1e8d1; }
.tb-esselte-frame {
  position: absolute;
  display: grid;
  place-items: center;
  background: #fffefa;
  border: 1px solid var(--tb-esselte-line);
  border-radius: 18px;
  box-shadow: 0 15px 40px #163a2c13;
}
.tb-esselte-frame img { display: block; width: 83%; height: 83%; object-fit: contain; mix-blend-mode: multiply; }
.tb-esselte-frame:nth-child(1) { width: 51%; height: 72%; top: 12%; left: 9%; transform: rotate(-8deg); z-index: 2; }
.tb-esselte-frame:nth-child(2) { width: 41%; height: 49%; top: 9%; right: 7%; transform: rotate(10deg); z-index: 1; }
.tb-esselte-frame:nth-child(3) { width: 39%; height: 44%; bottom: 8%; right: 9%; transform: rotate(-5deg); z-index: 3; }
.tb-esselte-story {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 28px;
  margin: 27px 0 34px;
  padding: clamp(19px, 3.5vw, 32px);
  background: var(--tb-esselte-light);
  border: 1px solid var(--tb-esselte-line);
  border-radius: 16px;
}
.tb-esselte-story > p { color: var(--tb-esselte-muted); line-height: 1.6; }
.tb-esselte-brand h2 { color: inherit; font-size: clamp(1.55rem, 3.1vw, 2.18rem); font-weight: 720; line-height: 1.14; letter-spacing: -.035em; }
.tb-esselte-brand .tb-esselte-story h2 { font-size: clamp(1.32rem, 2.45vw, 1.8rem); }
.tb-esselte-selection { margin: 0 0 31px; scroll-margin-top: 80px; }
.tb-esselte-selection-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 16px; }
.tb-esselte-brand .tb-esselte-note { color: var(--tb-esselte-muted); font-size: .86rem; line-height: 1.5; }
.tb-esselte-selection-head .tb-esselte-note { margin-top: 5px; }
.tb-esselte-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-esselte-filters button {
  min-height: 42px;
  padding: .42rem .78rem;
  border: 1px solid #c5d6ca;
  border-radius: 99px;
  background: #fff;
  color: var(--tb-esselte-green);
  cursor: pointer;
  font: inherit;
  font-size: .86rem;
  font-weight: 700;
}
.tb-esselte-filters button[aria-pressed="true"] { background: var(--tb-esselte-green); border-color: var(--tb-esselte-green); color: #fff; }
.tb-esselte-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.tb-esselte-brand .tb-esselte-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--tb-esselte-line);
  border-radius: 15px;
  overflow: hidden;
}
.tb-esselte-card:hover { border-color: #60927d; }
.tb-esselte-card-image { height: clamp(120px, 16vw, 174px); display: grid; place-items: center; background: #f7f9f5; border-bottom: 1px solid #e9eee6; }
.tb-esselte-card-image img { width: 82%; height: 87%; object-fit: contain; mix-blend-mode: multiply; }
.tb-esselte-card-body { display: flex; flex-direction: column; flex: 1; gap: 7px; padding: 14px; }
.tb-esselte-card-body h3 { color: inherit; font-size: 1rem; font-weight: 720; line-height: 1.3; }
.tb-esselte-card-range { color: var(--tb-esselte-muted); font-size: .76rem; font-weight: 720; }
.tb-esselte-card-price { padding-top: 3px; font-weight: 790; }
.tb-esselte-card-more { margin-top: auto; padding-top: 4px; color: var(--tb-esselte-green); font-size: .82rem; font-weight: 740; }
.tb-esselte-catalog-heading { padding-top: 22px; border-top: 1px solid var(--tb-esselte-line); }
.tb-product-brand :is(.tb-esselte-about-link, .tb-brand-about-link) { display: inline-block; margin-inline-start: .85rem; font-weight: 400; text-underline-offset: .18em; }

@media (max-width: 820px) {
  .tb-esselte-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 610px) {
  .tb-esselte-hero.has-images, .tb-esselte-story { grid-template-columns: minmax(0, 1fr); }
  .tb-esselte-hero { border-radius: 16px; }
  .tb-esselte-hero-copy { padding: 32px 22px; }
  .tb-esselte-hero-art { min-height: 240px; }
  .tb-esselte-story { gap: 12px; }
  .tb-esselte-selection-head { align-items: start; flex-direction: column; }
  .tb-esselte-card-body { padding: 10px; }
  .tb-esselte-cards { gap: 9px; }
  .tb-esselte-card h3 { overflow-wrap: anywhere; }
  .tb-esselte-filters button { min-height: 44px; }
  .tb-product-brand :is(.tb-esselte-about-link, .tb-brand-about-link) {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 44px;
  }
}