/*
Theme Name:     masdemas
Theme URI:      n/a
Template:       kadence
Author:         Matthias Reinders
Author URI:     n/a
Description:    Child Theme Description
Version:        1.0
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/


/* ---------------------------------------------------------------------
   Grundwerte: an einer Stelle aendern, wirkt ueberall.
   Akzent = Orange aus dem gelieferten Logo (gemessen: #F06106).
   --------------------------------------------------------------------- */
:root {
	--tu-radius: 10px;
	--tu-rahmen: #d0d5dd;
	--tu-rahmen-hover: #98a2b3;
	--tu-akzent: #f06106;
	--tu-feld-hoehe: 48px;
}

/* ---------------------------------------------------------------------
   Formularfelder shopweit: Text, E-Mail, Telefon, Passwort, Zahl, Textfeld.
   Gilt fuer Kasse, Konto, Login, Gutschein, Suche.
   --------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
	border: 1px solid var(--tu-rahmen);
	border-radius: var(--tu-radius);
	background-color: #fff;
	color: #000;
	padding: 10px 14px;
	font-size: 16px; /* 16px verhindert das Hineinzoomen auf dem iPhone */
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
select {
	min-height: var(--tu-feld-hoehe);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="number"]:hover,
textarea:hover,
select:hover {
	border-color: var(--tu-rahmen-hover);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
	border-color: var(--tu-akzent);
	box-shadow: 0 0 0 3px rgba(240, 97, 6, 0.18);
	outline: none;
}

/* ---------------------------------------------------------------------
   Dropdowns: eigener Pfeil statt Browser-Standard, gleiches Aussehen
   in Chrome, Safari und Firefox. Pfeil als eingebettete SVG-Grafik,
   kein externer Aufruf.
   --------------------------------------------------------------------- */
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 44px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
}

/* ---------------------------------------------------------------------
   Produktseite: Varianten-Auswahl (Farbe, Groesse) volle Breite,
   Beschriftung ueber dem Feld statt daneben.
   --------------------------------------------------------------------- */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
	display: block;
	width: 100%;
	border: 0;
	padding: 0;
}

.woocommerce div.product form.cart table.variations tr {
	margin-bottom: 16px;
}

.woocommerce div.product form.cart table.variations th.label {
	padding-bottom: 6px;
	line-height: 1.4;
}

.woocommerce div.product form.cart table.variations th.label label {
	font-weight: 600;
	color: #000;
}

.woocommerce div.product form.cart table.variations td.value select {
	width: 100%;
	max-width: 100%;
	margin: 0;
}

.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-top: 8px;
	font-size: 14px;
}

/* ---------------------------------------------------------------------
   Mengenfeld und "In den Warenkorb": gleiche Hoehe, gleiche Rundung.
   --------------------------------------------------------------------- */
.woocommerce div.product form.cart .quantity input.qty,
.woocommerce .quantity input.qty {
	min-height: var(--tu-feld-hoehe);
	width: 4.5em;
	text-align: center;
	padding: 10px 6px;
}

.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce div.product form.cart .single_add_to_cart_button {
	border-radius: var(--tu-radius);
	min-height: var(--tu-feld-hoehe);
}

/* ---------------------------------------------------------------------
   Hinweis-Boxen (Warenkorb-Meldung, Fehler, Info): abgerundet.
   --------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: var(--tu-radius);
}

/* ---------------------------------------------------------------------
   Kasse: Auswahlfelder von WooCommerce (Land, Bundesland, select2/selectWoo)
   an die normalen Felder angleichen.
   --------------------------------------------------------------------- */
.select2-container--default .select2-selection--single {
	height: var(--tu-feld-hoehe);
	border: 1px solid var(--tu-rahmen);
	border-radius: var(--tu-radius);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: calc(var(--tu-feld-hoehe) - 2px);
	padding-left: 14px;
	padding-right: 44px;
	color: #000;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: calc(var(--tu-feld-hoehe) - 2px);
	right: 12px;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--tu-akzent);
}

.select2-dropdown {
	border-color: var(--tu-rahmen);
	border-radius: var(--tu-radius);
	overflow: hidden;
}