/*
 * haraessli.ch Luxury-Finetuning
 * Palette: Gold #C6A15B, Champagner #e6d5a7, warmes Weiss #f2ede3,
 *          Flaechen #17171a / #1f1f23, Hairlines rgba(198,161,91,...)
 * Ziel: elegant statt verspielt. Kein Rosa, keine Kreise, kaum Rundungen.
 * Erstellt 2026-07-13, ueberarbeitet 2026-07-14 (skewX-Pagination -12deg,
 * page-title-Gradient, Kategorie-Kacheln). Geladen NACH Child-style.css,
 * ueberschreibt dortigen Pagination-Block und Customizer-Inline-CSS.
 */

/* ------------------------------------------------------------------ */
/* 1) Shop-Pagination: schraege Parallelogramm-Chips (skewX -12deg)    */
/*    Markup: nav.pagination > ul.page-numbers > li > a|span           */
/*    Chip = li (geneigt), Inhalt = a/span (12deg zurueckgeneigt)      */
/* ------------------------------------------------------------------ */

nav.pagination ul.page-numbers,
.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	padding: 0;
	margin: 34px 0 12px;
	list-style: none;
	border: none;
}

nav.pagination ul.page-numbers li,
.woocommerce-pagination ul.page-numbers li,
body ul.page-numbers li {
	display: inline-block;
	margin: 0;
	float: none;
	background: #1b1b1e;
	border: 1px solid rgba(198, 161, 91, 0.4);
	border-radius: 0;
	transform: skewX(-12deg);
	transition: border-color 0.3s ease, background-color 0.3s ease;
}

.pagination li a,
.pagination li span,
nav.pagination ul.page-numbers li a.page-numbers,
nav.pagination ul.page-numbers li span.page-numbers,
.woocommerce-pagination ul.page-numbers li a.page-numbers,
.woocommerce-pagination ul.page-numbers li span.page-numbers,
ul.page-numbers li a.page-numbers,
ul.page-numbers li span.page-numbers {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	line-height: 1;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: #e6d5a7 !important;
	background: transparent !important; /* schlaegt #ededed/#fbe9e9-Kreise */
	border: 0 !important;
	border-radius: 0 !important;        /* schlaegt border-radius: 50% */
	transform: skewX(12deg);            /* Inhalt zurueckneigen */
	transition: color 0.3s ease;
}

/* Aeltere Chip-Regeln aus style.css neutralisieren:
   Kinder (z.B. Pfeil-Icons) nicht doppelt gegenskewen,
   Hover-/Focus-Hintergrund bleibt transparent (Chip = li) */
nav.pagination ul.page-numbers li a.page-numbers > *,
nav.pagination ul.page-numbers li span.page-numbers > *,
.woocommerce-pagination ul.page-numbers li a.page-numbers > *,
.woocommerce-pagination ul.page-numbers li span.page-numbers > * {
	transform: none;
}

.pagination li a:hover,
nav.pagination ul.page-numbers li a.page-numbers:hover,
.woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
ul.page-numbers li a.page-numbers:hover,
ul.page-numbers li a.page-numbers:focus {
	background: transparent !important;
	border: 0 !important;
	color: #f2ede3 !important;
}

nav.pagination ul.page-numbers li:hover,
.woocommerce-pagination ul.page-numbers li:hover,
body ul.page-numbers li:hover {
	border-color: #C6A15B;
	background: #232326;
}

nav.pagination ul.page-numbers li:hover a.page-numbers,
.woocommerce-pagination ul.page-numbers li:hover a.page-numbers,
ul.page-numbers li:hover a.page-numbers {
	color: #f2ede3 !important;
}

/* Aktive Seite: gold gefuellt, dunkle Schrift */
nav.pagination ul.page-numbers li:has(> .current),
.woocommerce-pagination ul.page-numbers li:has(> .current),
body ul.page-numbers li:has(> .current) {
	background: #C6A15B;
	border-color: #C6A15B;
}

nav.pagination ul.page-numbers li span.page-numbers.current,
.woocommerce-pagination ul.page-numbers li span.page-numbers.current,
ul.page-numbers li span.page-numbers.current,
ul.page-numbers li .page-numbers.current {
	background: #C6A15B !important; /* Fallback ohne :has-Support */
	color: #17171a !important;
	font-weight: 700;
}

/* Blog-/Theme-Pagination (.pagination li a) angleichen */
body .pagination li {
	display: inline-block;
	background: #1b1b1e;
	border: 1px solid rgba(198, 161, 91, 0.4);
	border-radius: 0;
	transform: skewX(-12deg);
	transition: border-color 0.3s ease, background-color 0.3s ease;
}

body .pagination li:hover {
	border-color: #C6A15B;
	background: #232326;
}

body .pagination li a.active {
	background: #C6A15B !important;
	color: #17171a !important;
}

/* Post-Nav (Seiten-Split innerhalb von Beitraegen) */
body .post-page-numbers {
	border-radius: 0;
	border-color: rgba(198, 161, 91, 0.4);
	color: #e6d5a7;
}

body .post-page-numbers:hover,
body .post-page-numbers.current {
	background: #C6A15B;
	border: 1px solid #C6A15B;
	color: #17171a !important;
}

@media (max-width: 480px) {
	.pagination li a,
	.pagination li span,
	nav.pagination ul.page-numbers li a.page-numbers,
	nav.pagination ul.page-numbers li span.page-numbers,
	.woocommerce-pagination ul.page-numbers li a.page-numbers,
	.woocommerce-pagination ul.page-numbers li span.page-numbers,
	ul.page-numbers li a.page-numbers,
	ul.page-numbers li span.page-numbers {
		min-width: 36px;
		height: 36px;
		padding: 0 10px;
		font-size: 13px;
	}
	nav.pagination ul.page-numbers,
	.woocommerce-pagination ul.page-numbers {
		gap: 7px;
	}
}

/* ------------------------------------------------------------------ */
/* 2) Rosa (#fbe9e9) global eliminieren: Tags, Reply-Button            */
/* ------------------------------------------------------------------ */

body .sidebar .sidebar-tags .tags-list a,
body .blog-details-content .post-share-option .post-tags a,
body .blog-details-content .comments-area .comment .comment-inner .replay-btn {
	background: #17171a;
	color: #e6d5a7;
	border: 1px solid rgba(198, 161, 91, 0.35);
	border-radius: 0;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body .sidebar .sidebar-tags .tags-list a:hover,
body .blog-details-content .post-share-option .post-tags a:hover,
body .blog-details-content .comments-area .comment .comment-inner .replay-btn:hover {
	background: #C6A15B;
	border-color: #C6A15B;
	color: #141414;
}

/* ------------------------------------------------------------------ */
/* 3) Rundungen reduzieren: Buttons, Inputs, Selects, Dropdowns        */
/*    (bewusst NICHT: scroll-top, onsale-Badge, runde Icon-Kreise)     */
/* ------------------------------------------------------------------ */

body .theme-btn,
body .button,
body a.button,
body button.single_add_to_cart_button,
body input[type="submit"],
body input[type="button"],
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="password"],
body input[type="search"],
body input[type="number"],
body textarea,
body select,
body #dropdown-btn,
body .select2-container .select2-selection--single,
body .bapf_sfilter .bapf_head,
body .bapf_sfilter .bapf_body,
body .bapf_sfilter .bapf_input,
body .xoo-cp-container,
body .woocommerce-message,
body .woocommerce-info {
	border-radius: 0;
}

/* ------------------------------------------------------------------ */
/* 4) Seiten-/Shop-Banner (.page-title): eleganter dunkler Gradient    */
/*    statt Winterbild; Shop behaelt sein Flaschenregal-Bild (inline   */
/*    !important im Customizer-CSS gewinnt dort bewusst).              */
/* ------------------------------------------------------------------ */

.page-title {
	background: linear-gradient(160deg, #141416 0%, #232228 55%, #17171a 100%);
	background-size: cover;
	border-bottom: 1px solid rgba(198, 161, 91, 0.4);
}

.page-title .content-box .title-box h1,
.page-title h1 {
	font-family: Georgia, "Times New Roman", serif;
	letter-spacing: 0.12em;
	font-weight: 500;
	color: #f2ede3;
}

/* Breadcrumb als Eyebrow: Grossbuchstaben, weite Laufweite, Gold */
.page-title .bread-crumb,
.page-title .bread-crumb li,
.page-title .bread-crumb a,
.page-title .woocommerce-breadcrumb,
.page-title .woocommerce-breadcrumb a {
	text-transform: uppercase;
	letter-spacing: 0.28em;
	font-size: 12px;
	color: #e6d5a7;
}

.page-title .bread-crumb a:hover,
.page-title .woocommerce-breadcrumb a:hover {
	color: #C6A15B;
}

/* ------------------------------------------------------------------ */
/* 5) Kategorien-Kacheln + Produktkarten: feine Goldlinien, eckig      */
/* ------------------------------------------------------------------ */

/* Woo-Kategorie-Kacheln (categories-images / product-category-Loop) */
body ul.products li.product-category,
body .product-categories-grid .category-tile {
	background: #17171a;
	border: 1px solid rgba(198, 161, 91, 0.35);
	border-radius: 0;
	overflow: hidden;
	transition: border-color 0.35s ease, background-color 0.35s ease, transform 0.35s ease;
}

body ul.products li.product-category:hover,
body .product-categories-grid .category-tile:hover {
	border-color: #C6A15B;
	background: #1f1f23;
	transform: translateY(-3px);
}

body ul.products li.product-category img {
	border-radius: 0;
}

body ul.products li.product-category .woocommerce-loop-category__title,
body ul.products li.product-category h2 {
	font-family: Georgia, "Times New Roman", serif;
	letter-spacing: 0.08em;
	font-weight: 500;
	color: #e6d5a7;
}

/* Shop-Grid-Produktkarten */
.shop-page-section .shop-block-one .inner-box {
	border: 1px solid rgba(198, 161, 91, 0.22);
	background: rgba(255, 255, 255, 0.02);
	border-radius: 0;
	transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.shop-page-section .shop-block-one .inner-box:hover {
	border-color: rgba(198, 161, 91, 0.65);
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

/* Startseite: Holzkisten-Empfehlungsbloecke (custom_top_products) */
body .product-items .product-item {
	border: 1px solid rgba(198, 161, 91, 0.28);
	transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

body .product-items .product-item:hover {
	border-color: rgba(198, 161, 91, 0.7);
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

/* Trennlinien in den Kisten-Bloecken auf Gold-Hairline umstellen */
body .bottom-block {
	border-right-color: rgba(198, 161, 91, 0.35);
}

@media (max-width: 520px) {
	body .bottom-block {
		border-bottom-color: rgba(198, 161, 91, 0.35);
	}
	body .product-block {
		border-bottom-color: rgba(198, 161, 91, 0.35);
	}
}

/* Headings: Serif-Eleganz ohne Font-Nachladen (Georgia-Stack) */
h2.elementor-heading-title,
.shop-block-one .inner-box .lower-content h6 a,
.bottom-block h3 a {
	font-family: Georgia, "Times New Roman", serif;
	letter-spacing: 0.05em;
	font-weight: 500;
}

h2.elementor-heading-title {
	letter-spacing: 0.07em;
}

/* Kartentitel-Hover in Gold statt Theme-Schwarz */
body .shop-block-one .inner-box .lower-content h6 a:hover,
body .bottom-block h3 a:hover {
	color: #C6A15B !important;
}

/* ------------------------------------------------------------------ */
/* 6) Filter-Dropdowns (BeRocket) + Sortier-Select: edel, skewfrei     */
/* ------------------------------------------------------------------ */

body .bapf_sfilter .bapf_head {
	background: #17171a;
	border: 1px solid rgba(198, 161, 91, 0.35);
	transition: border-color 0.3s ease;
}

body .bapf_sfilter .bapf_head:hover {
	border-color: #C6A15B;
}

body .bapf_sfilter .bapf_head h3 {
	color: #e6d5a7;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body .bapf_sfilter .bapf_colaps_smb {
	color: #C6A15B;
}

body .bapf_sfilter .bapf_body {
	background: #17171a;
	border: 1px solid rgba(198, 161, 91, 0.25);
	border-top: 0;
}

/* Labels im Dropdown lesbar auf dunklem Grund; Parent setzt color:black */
body .bapf_sfilter .bapf_body ul > li label,
body .bapf_sfilter.bapf_vpr_1 .bapf_body ul > li label,
body .bapf_sfilter.bapf_vpr_2 .bapf_body ul > li label,
body .bapf_sfilter.bapf_vpr_3 .bapf_body ul > li label,
body .bapf_sfilter.bapf_vpr_4 .bapf_body ul > li label {
	color: #e8e2d5 !important;
}

body .bapf_sfilter .bapf_body a.bapf_suggest_element {
	color: #e8e2d5;
	background: #17171a;
}

body .bapf_sfilter .bapf_body a.bapf_suggest_element:hover {
	color: #141414;
	background: #C6A15B;
}

body .bapf_sfilter .bapf_input {
	background: #1f1f23;
	color: #f2ede3;
	border: 1px solid rgba(198, 161, 91, 0.35);
}

body .bapf_sfilter .bapf_search i {
	color: #C6A15B;
}

/* WooCommerce Sortier-Select ("Bestellauftrag") */
body select.orderby,
body .woocommerce-ordering select {
	background: #17171a;
	color: #e6d5a7;
	border: 1px solid rgba(198, 161, 91, 0.35);
	padding: 8px 12px;
	border-radius: 0;
	transition: border-color 0.3s ease;
}

body select.orderby:hover,
body select.orderby:focus,
body .woocommerce-ordering select:hover,
body .woocommerce-ordering select:focus {
	border-color: #C6A15B;
	outline: none;
}

/* Select2 (Kategorie-Dropdowns) angleichen */
body .select2-container .select2-selection--single {
	background: #17171a;
	border: 1px solid rgba(198, 161, 91, 0.35);
}

body .select2-container .select2-selection--single .select2-selection__rendered {
	color: #e6d5a7;
}