/*
Theme Name:  TB Shop Schweiz
Template:    oceanwp
Description: Child-Theme fuer tbshop.prewi.ch. Design 1 (TB-Kart-CI) aus
             docs/design-entwuerfe.html. Farben nur aus tokens.css.
Version:     0.5.0
Text Domain: tbshop
*/

/* Schriftgroessen in px: OceanWP setzt html { font-size: 62.5% }. */

/* ---------- Grundlagen ---------- */
body, .site-content, #main, #wrap {
  font-family: var(--font-body) !important;
  font-size: 16px;
  color: var(--tb-ink);
  background: var(--tb-white);
}
h1, h2, h3, .page-header-title, .product_title, .entry-title {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em;
  color: var(--tb-ink);
  text-wrap: balance;
}
a { color: var(--tb-ink); }
a:hover { color: var(--tb-green-dark); }
:focus-visible { outline: 2px solid var(--tb-green); outline-offset: 2px; }

/* ---------- Kopf: schwarz wie tbkart.it ---------- */
#site-header, #site-header-inner, #top-bar-wrap {
  background: var(--tb-black) !important;
  border-color: var(--tb-line-dark) !important;
}
#site-header #site-logo a.site-logo-text,
#site-header #site-logo a.site-title {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  color: var(--tb-white) !important;
  letter-spacing: 0.02em;
  line-height: 1;
}
/* Logo wie Entwurf 1: „TB/SHOP“, grüner Schrägstrich, „SCHWEIZ“ klein darunter
   (Marco 11.11.2026) */
.tb-logo em { font-style: normal; color: var(--tb-green); }
.tb-logo small {
  display: block;
  font-family: var(--font-cond);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: var(--tb-soft-on-dark);
  margin-top: 6px;
}
#site-navigation-wrap .dropdown-menu > li > a,
#site-header .oceanwp-mobile-menu-icon a {
  font-family: var(--font-cond) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tb-white) !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}
#site-navigation-wrap .dropdown-menu > li > a:hover,
#site-navigation-wrap .dropdown-menu > li.current-menu-item > a {
  color: var(--tb-green) !important;
}
#top-bar-wrap, #top-bar-content {
  font-family: var(--font-cond);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tb-white) !important;
}

/* ---------- Knöpfe: Grün = kaufen / weiter ---------- */
.button, button.button, input[type="submit"], .woocommerce .button,
.woocommerce a.button, .woocommerce button.button, .wc-block-components-button {
  font-family: var(--font-cond) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background: var(--tb-ink) !important;
  color: var(--tb-white) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 11px 16px !important;
  white-space: nowrap;
}
.button:hover, .woocommerce .button:hover, .woocommerce a.button:hover,
.woocommerce button.button:hover, .wc-block-components-button:hover {
  background: var(--tb-green) !important;
  color: var(--tb-black) !important;
}
.woocommerce .single_add_to_cart_button, .woocommerce a.checkout-button,
.wc-block-components-checkout-place-order-button {
  background: var(--tb-green) !important;
  color: var(--tb-black) !important;
}

/* ---------- Produkte ---------- */
.woocommerce ul.products li.product {
  border: 1px solid var(--tb-line);
  background: var(--tb-white);
  padding: var(--space-3);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .title a {
  font-family: var(--font-body) !important;
  font-weight: 600;
  font-size: 16px !important;
  line-height: 1.3;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price, .woocommerce div.product span.price {
  font-family: var(--font-cond) !important;
  font-weight: 700;
  font-size: 20px !important;
  color: var(--tb-ink) !important;
  font-variant-numeric: tabular-nums;
}
.woocommerce .product_meta .sku_wrapper, .woocommerce .sku {
  font-family: var(--font-cond);
  letter-spacing: 0.08em;
  color: var(--tb-mid);
}
.woocommerce .stock.in-stock { color: var(--tb-green-dark) !important; font-weight: 600; }
.woocommerce .stock.out-of-stock { color: var(--tb-red-text) !important; font-weight: 600; }
.woocommerce span.onsale {
  background: var(--tb-red) !important;
  color: var(--tb-white) !important;
  border-radius: 0 !important;
  font-family: var(--font-cond);
  text-transform: uppercase;
}

/* ---------- Fuss ---------- */
#footer, #footer-widgets, #footer-bottom {
  background: var(--tb-black) !important;
  color: var(--tb-soft-on-dark) !important;
}
#footer-bottom, #footer-bottom #copyright {
  font-family: var(--font-body) !important;
  font-size: 13px;
  color: var(--tb-soft-on-dark) !important;
}
#footer a { color: var(--tb-text-on-dark) !important; }
#footer a:hover { color: var(--tb-green) !important; }
.tbshop-version { font-family: var(--font-cond); letter-spacing: 0.06em; margin-left: var(--space-3); }
.tb-fusslinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  margin-bottom: var(--space-3);
  font-family: var(--font-cond);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Kacheln immer gleich gross (Marco 11.11.2026) ----------
   Ursache ungleicher Höhen: zweizeilige Namen. Raster mit gestreckten Kacheln,
   Kategorie 1 Zeile, Name fest 2 Zeilen, Preis und Knopf unten. */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
}
.woocommerce ul.products li.product .product-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.woocommerce ul.products li.product .woo-entry-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 0;
}
.woocommerce ul.products li.product li.category {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.woocommerce ul.products li.product li.title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.3;
  min-height: calc(2 * 1.3em);
}
.woocommerce ul.products li.product li.btn-wrap { margin-top: auto; }
@media (max-width: 900px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .woocommerce ul.products { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Produktknopf: volle Breite, schmaler (Entwurf 1, Marco 11.11.2026) ---------- */
.woocommerce ul.products li.product .button {
  display: block !important;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 8px 12px !important;
  font-size: 14px !important;
  margin-top: var(--space-2);
}

/* ---------- Kategorie-Navigation links (Marco 11.11.2026) ---------- */
.tb-katalog {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
.tb-katalog__inhalt { min-width: 0; }
.tb-katnav {
  border: 1px solid var(--tb-line);
  background: var(--tb-white);
  position: sticky;
  top: var(--space-4);
}
.tb-katnav__titel {
  margin: 0;
  padding: 12px 14px;
  background: var(--tb-black);
  color: var(--tb-white);
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tb-katnav__gruppe { border-top: 1px solid var(--tb-line); }
.tb-katnav__gruppe:first-of-type { border-top: 0; }
.tb-katnav summary,
.tb-katnav__einzeln > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  font-weight: 600;
  font-size: 15px;
  color: var(--tb-ink);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}
.tb-katnav summary::-webkit-details-marker { display: none; }
.tb-katnav summary::after {
  content: "+";
  font-family: var(--font-cond);
  font-size: 18px;
  color: var(--tb-mid);
}
.tb-katnav details[open] > summary::after { content: "–"; color: var(--tb-green-dark); }
.tb-katnav details[open] > summary { color: var(--tb-green-dark); }
.tb-katnav summary:hover, .tb-katnav__einzeln > a:hover { background: var(--tb-paper); }
.tb-katnav ul { list-style: none; margin: 0; padding: 0 0 8px; }
.tb-katnav li a {
  display: block;
  padding: 6px 14px 6px 24px;
  font-size: 14px;
  color: var(--tb-mid);
  text-decoration: none;
  border-left: 3px solid transparent;
}
.tb-katnav li a:hover { color: var(--tb-ink); background: var(--tb-paper); }
.tb-katnav a[aria-current="page"] {
  color: var(--tb-ink) !important;
  font-weight: 700;
  border-left-color: var(--tb-green);
  background: var(--tb-paper);
}
@media (max-width: 900px) {
  .tb-katalog { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .tb-katnav { position: static; }
}

/* ---------- Artikel: Werksnummer und „Preis auf Anfrage“ ---------- */
.tb-sku {
  display: block;
  font-family: var(--font-cond);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--tb-mid);
  margin: 2px 0 6px;
}
.tb-anfrage {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tb-green-dark) !important;
  text-decoration: none;
}
.tb-anfrage:hover { color: var(--tb-ink) !important; }
/* Gleich hohe Kacheln: jedes Bild in derselben quadratischen Fläche, auch das
   Hover-Zweitbild von OceanWP (Browser 10.11.2026: Kacheln ungleich hoch). */
.woo-entry-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--tb-white);
}
.woocommerce div.product .product_meta { font-family: var(--font-cond); letter-spacing: 0.04em; }
.tb-anbieter { line-height: 1.6; }
.tb-leer {
  border: 1px solid var(--tb-line);
  background: var(--tb-paper);
  padding: var(--space-5);
  max-width: 64ch;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.tb-leer p { margin: 0; }

/* Produktbild immer sichtbar: WooCommerce setzt die Galerie auf opacity 0 und
   blendet sie per flexslider ein — das Skript lädt hier nicht (Browser 10.11.2026). */
.woocommerce-product-gallery { opacity: 1 !important; }
.woocommerce div.product div.images img { background: var(--tb-white); object-fit: contain; }

/* Inhaltsseiten: Lesbreite */
.page:not(.home) .entry-content { max-width: 72ch; }
.page:not(.home) .entry-content h2 { font-size: 20px !important; margin-top: var(--space-6); }

/* ---------- Warenkorbzahl (OceanWP war blau) ---------- */
.wcmenucart-details.count, .wcmenucart-details.count.t-bubble {
  background: var(--tb-green) !important;
  color: var(--tb-black) !important;
  border-color: var(--tb-green) !important;
}
.wcmenucart-details.count::before { border-color: var(--tb-green) !important; }

/* ---------- Suche (OceanWP war blau) ---------- */
.wp-block-search__button, #searchform button, #searchform input[type="submit"],
.searchform button, .searchform-submit {
  background: var(--tb-ink) !important;
  color: var(--tb-white) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--font-cond) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wp-block-search__button:hover, #searchform button:hover, .searchform button:hover {
  background: var(--tb-green) !important;
  color: var(--tb-black) !important;
}
.wp-block-search__input, #searchform input[type="search"], .searchform input {
  border-radius: 0 !important;
  border-color: var(--tb-line) !important;
}

/* ---------- Hinweisleiste (alle Seiten) ---------- */
.tb-hinweis {
  background: var(--tb-black);
  color: var(--tb-white);
  border-bottom: 1px solid var(--tb-line-dark);
  font-family: var(--font-cond);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  padding: 7px 16px;
}
.tb-hinweis span::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--tb-green);
  margin-right: 8px;
  vertical-align: 2px;
}

/* ---------- Startseite ---------- */
.home #main { background: var(--tb-white); }
.tb-hero {
  background: var(--tb-black);
  color: var(--tb-white);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  border-top: 1px solid var(--tb-line-dark);
}
.tb-hero__text {
  padding: 56px max(24px, 6vw) 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.tb-kicker {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tb-green);
}
.tb-hero h1 {
  color: var(--tb-white) !important;
  font-size: clamp(26px, 3.4vw, 44px) !important;
  line-height: 1.14 !important;
  margin: 0;
}
.tb-hero p {
  margin: 0;
  color: var(--tb-text-on-dark);
  font-size: 18px;
  line-height: 1.55;
  max-width: 46ch;
}
.tb-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.tb-btn {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 22px;
  white-space: nowrap;
  display: inline-block;
}
.tb-btn--go { background: var(--tb-green); color: var(--tb-black) !important; }
.tb-btn--go:hover { background: var(--tb-white); }
.tb-btn--ghost { color: var(--tb-white) !important; border: 1px solid var(--tb-mid); }
.tb-btn--ghost:hover { border-color: var(--tb-green); color: var(--tb-green) !important; }
.tb-hero__bild {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, var(--tb-line-dark) 46px 47px),
    var(--tb-ink);
}
.tb-hero__bild svg { width: min(92%, 540px); height: auto; }
/* Foto auf weissem Grund (wie die Produktbilder von TB Kart) */
.tb-hero__bild--foto { background: var(--tb-white); }
.tb-hero__bild--foto .tb-hero__schild { color: var(--tb-mid); }
.tb-hero__bild--foto img {
  width: min(96%, 640px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.tb-hero__rohr { stroke: var(--tb-mid); }
.tb-hero__akzent { stroke: var(--tb-green); }
.tb-hero__rad { fill: var(--tb-field-dark); stroke: var(--tb-mid); }
.tb-hero__wasserzeichen { fill: var(--tb-line-dark); font-family: var(--font-display); }
.tb-hero__schild {
  position: absolute;
  left: 20px;
  bottom: 18px;
  font-family: var(--font-cond);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tb-soft-on-dark);
}

.tb-chassis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid var(--tb-line);
}
.tb-chassis a {
  color: var(--tb-ink);
  text-decoration: none;
  padding: 20px 20px 18px;
  border-right: 1px solid var(--tb-line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.tb-chassis a:last-child { border-right: 0; }
.tb-chassis a:hover { background: var(--tb-paper); color: var(--tb-ink); }
.tb-chassis__name { font-family: var(--font-display); font-size: 18px; }
.tb-chassis__klasse {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tb-mid);
}
.tb-chassis__rohr { font-size: 14px; color: var(--tb-mid); font-variant-numeric: tabular-nums; }

.tb-baugruppen {
  max-width: 1240px;
  margin: 0 auto;
  padding: 44px max(16px, 3vw) 52px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tb-abschnitt-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: baseline;
  justify-content: space-between;
}
.tb-abschnitt-kopf h2 { margin: 0; font-size: 20px !important; }
.tb-pfad {
  font-family: var(--font-cond);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tb-mid);
}
.tb-baugruppen__raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--tb-line);
  border: 1px solid var(--tb-line);
}
.tb-baugruppe {
  background: var(--tb-white);
  color: var(--tb-ink);
  text-decoration: none;
  padding: 22px 22px 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  min-width: 0;
}
.tb-baugruppe:hover { background: var(--tb-paper); color: var(--tb-ink); }
.tb-baugruppe__name { font-weight: 700; font-size: 18px; }
.tb-baugruppe__text { grid-column: 1; color: var(--tb-mid); font-size: 15px; line-height: 1.45; }
.tb-baugruppe__pfeil { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 20px; color: var(--tb-green-dark); }

/* Zweiter Bereich: Teile für alle Karts — bewusst auf Papiergrau, damit er
   sich vom TB-Bereich abhebt */
.tb-allgemein {
  background: var(--tb-paper);
  border-top: 1px solid var(--tb-line);
  padding: 44px max(16px, calc((100% - 1240px) / 2 + 3vw)) 52px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tb-allgemein .tb-pfad { text-decoration: none; color: var(--tb-green-dark); }
.tb-allgemein__text { margin: 0; color: var(--tb-mid); font-size: 16px; }
.tb-allgemein__liste {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--tb-line);
  border: 1px solid var(--tb-line);
}
.tb-allgemein__liste a {
  display: block;
  background: var(--tb-white);
  color: var(--tb-ink);
  text-decoration: none;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  height: 100%;
}
.tb-allgemein__liste a:hover { background: var(--tb-white); color: var(--tb-green-dark); }
@media (max-width: 900px) { .tb-allgemein__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tb-band {
  background: var(--tb-ink);
  color: var(--tb-white);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tb-band div {
  padding: 26px max(16px, 3vw);
  border-right: 1px solid var(--tb-line-dark);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tb-band div:last-child { border-right: 0; }
.tb-band b { font-family: var(--font-display); font-weight: 400; font-size: 16px; color: var(--tb-green); }
.tb-band span { color: var(--tb-text-on-dark); font-size: 15px; line-height: 1.5; }

@media (max-width: 900px) {
  .tb-hero { grid-template-columns: minmax(0, 1fr); }
  .tb-hero__bild { min-height: 220px; }
  .tb-chassis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-chassis a { border-bottom: 1px solid var(--tb-line); }
  .tb-baugruppen__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-band { grid-template-columns: minmax(0, 1fr); }
  .tb-band div { border-right: 0; border-bottom: 1px solid var(--tb-line-dark); }
}
@media (max-width: 520px) {
  .tb-hero__text { padding: 36px 16px; }
  .tb-baugruppen__raster { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: no-preference) {
  .button, .woocommerce .button, #site-navigation-wrap .dropdown-menu > li > a {
    transition: background-color 0.15s, color 0.15s;
  }
}