/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

.stock.in-stock {
  margin-bottom: 20px;
}

.cart .quantity {
  display: none !important
}
/* Zeigt alle elemente im OffCanvas an auch wenn sie nicht im Veieport liegen. */
.brx-offcanvas-inner {
    overflow-y: scroll;
    flex-wrap: nowrap;
  }

h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
  color: #3c4d32;
}

.fixed-header {    
    position: ralative; /* Startzustand */
    width: 100%;
    z-index: 10;
    transition: all 0.5s ease; /* Optional für glattere Übergänge */
}

.fixed-header.sticky {
    position: fixed;
    top: 0;
    left: 0;
}

.add_to_cart_button {
  background: #466f2f !important;
  color: #fff !important;
  font-weight: 400 !important;
  border-radius: 30px !important
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 16px;
  line-height: 1.5;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}

table thead {
  background: #f8fafc;
}

table th,
table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

table th {
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
}

table td {
  color: #374151;
}

table tbody tr:last-child td {
  border-bottom: none;
}

table tbody tr:hover {
  background: #f9fafb;
}

/* Responsive für kleinere Bildschirme */
@media (max-width: 768px) {
  table {
    font-size: 15px;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  table th,
  table td {
    padding: 12px 14px;
  }
}

/* =========================================================
   Gravity Forms – CI-Styling
   CI-Farbe: #466f2f
   Kompatibel ab GF 2.5+ (Orbital & Legacy)
   Alles zentral über die Variablen unten steuerbar.
   ========================================================= */

.gform_wrapper {
	/* ---- Farben ---- */
	--ci: #466f2f;              /* Deine CI */
	--ci-hover: #395b27;        /* dunkler für Hover/Active */
	--ci-ring: rgba(70, 111, 47, 0.18); /* Fokus-Glow */
	--ci-soft: rgba(70, 111, 47, 0.06); /* zarter Hintergrund */

	--txt: #1f2a1a;             /* Label-/Textfarbe */
	--border: #cdd3c8;          /* Feldrahmen neutral */
	--placeholder: #8a938044;   /* Platzhalter */
	--error: #c0392b;           /* Fehlerrot */

	/* ---- Form ---- */
	--radius: 8px;
	--gap: 1.25rem;
	--pad-y: 0.7rem;
	--pad-x: 0.9rem;
	--speed: 0.18s;
}

/* ---------- Grundlayout / Abstände ---------- */
.gform_wrapper .gform_fields {
	gap: var(--gap);
}

.gform_wrapper .gfield_label {
	font-weight: 600;
	color: var(--txt);
	margin-bottom: 0.35rem;
	font-size: 0.95rem;
}

/* Pflichtfeld-Kennzeichnung in CI – Sternchen UND Text "(erforderlich)"
   !important + Label-Kontext, weil GF den Default rot fest verdrahtet */
.gform_wrapper .gfield_label .gfield_required,
.gform_wrapper .gfield_label .gfield_required *,
.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required_text,
.gform_wrapper .gfield_required_asterisk {
	color: var(--ci) !important;
	font-weight: 700;
}

/* Beschreibungstext dezent */
.gform_wrapper .gfield_description {
	color: #6b7264;
	font-size: 0.85rem;
	margin-top: 0.3rem;
}

/* ---------- Eingabefelder ---------- */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"],
.gform_wrapper input[type="date"],
.gform_wrapper input[type="time"],
.gform_wrapper input[type="search"],
.gform_wrapper textarea,
.gform_wrapper select {
	width: 100%;
	padding: var(--pad-y) var(--pad-x);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--txt);
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	transition: border-color var(--speed) ease,
	            box-shadow var(--speed) ease,
	            background var(--speed) ease;
	box-shadow: none;
	appearance: none;
}

.gform_wrapper textarea {
	min-height: 140px;
	resize: vertical;
}

/* Platzhalter */
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
	color: #9aa090;
	opacity: 1;
}

/* Hover */
.gform_wrapper input:hover,
.gform_wrapper textarea:hover,
.gform_wrapper select:hover {
	border-color: #aeb6a5;
}

/* Fokus – CI-Rahmen + weicher Glow */
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
	outline: none;
	border-color: var(--ci);
	box-shadow: 0 0 0 3px var(--ci-ring);
	background: var(--ci-soft);
}

/* Select-Pfeil in CI (eigenes Icon statt Browser-Default) */
.gform_wrapper select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23466f2f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	padding-right: 2.4rem;
}

/* ---------- Checkboxen & Radios ---------- */
/* Lean: accent-color macht die native Steuerung in CI grün */
.gform_wrapper .gfield_checkbox input[type="checkbox"],
.gform_wrapper .gfield_radio input[type="radio"],
.gform_wrapper .ginput_container_consent input[type="checkbox"] {
	accent-color: var(--ci);
	width: 1.15rem;
	height: 1.15rem;
	cursor: pointer;
}

.gform_wrapper .gchoice {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.gform_wrapper .gchoice label {
	cursor: pointer;
	color: var(--txt);
}

/* Einwilligung (Consent): Text neben der Checkbox, nicht darunter */
.gform_wrapper .ginput_container_consent {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.gform_wrapper .ginput_container_consent input[type="checkbox"] {
	flex-shrink: 0;
}

.gform_wrapper .ginput_container_consent label {
	margin: 0;
	cursor: pointer;
	color: var(--txt);
}

/* ---------- Submit / Buttons ---------- */
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_page_footer input[type="submit"],
.gform_wrapper .gform-button,
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_previous_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.8rem 1.8rem;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background: var(--ci);
	border: none;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background var(--speed) ease,
	            transform var(--speed) ease,
	            box-shadow var(--speed) ease;
}

.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_page_footer input[type="submit"]:hover,
.gform_wrapper .gform-button:hover,
.gform_wrapper .gform_next_button:hover,
.gform_wrapper .gform_previous_button:hover {
	background: var(--ci-hover);
	box-shadow: 0 4px 14px var(--ci-ring);
}

.gform_wrapper .gform_footer input[type="submit"]:active,
.gform_wrapper .gform-button:active {
	transform: translateY(1px);
}

.gform_wrapper .gform_footer input[type="submit"]:focus-visible,
.gform_wrapper .gform-button:focus-visible {
	outline: 2px solid var(--ci);
	outline-offset: 3px;
}

/* "Zurück"-Button bei mehrseitigen Formularen als Sekundär-Stil */
.gform_wrapper .gform_previous_button {
	background: transparent;
	color: var(--ci);
	border: 1px solid var(--ci);
}
.gform_wrapper .gform_previous_button:hover {
	background: var(--ci-soft);
	box-shadow: none;
}

/* ---------- Fehlerzustände ---------- */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
	border-color: var(--error);
}

.gform_wrapper .gfield_error input:focus,
.gform_wrapper .gfield_error textarea:focus,
.gform_wrapper .gfield_error select:focus {
	box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
	background: rgba(192, 57, 43, 0.04);
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	color: var(--error);
	font-size: 0.85rem;
	margin-top: 0.35rem;
	background: none;
	border: none;
	padding: 0;
}

/* Fehler-Zusammenfassung oben */
.gform_wrapper .gform_validation_errors {
	border-radius: var(--radius);
	border-left: 4px solid var(--error);
}

/* ---------- Fortschrittsbalken (mehrseitig) ---------- */
.gform_wrapper .gf_progressbar_percentage {
	background: var(--ci);
}

/* ---------- Bestätigung nach Absenden ---------- */
.gform_confirmation_message {
	padding: 1rem 1.25rem;
	background: var(--ci-soft);
	border-left: 4px solid var(--ci);
	border-radius: var(--radius);
	color: var(--txt);
}

/* ---------- Barrierefreiheit ---------- */
@media (prefers-reduced-motion: reduce) {
	.gform_wrapper * {
		transition: none !important;
	}
}