/*!
Theme Name: Metal Hues
Theme URI: https://metalHues.com/
Author: Avadhana
Author URI: https://avadhana.in/
Description: A sophisticated and modern WordPress theme designed for showcasing exquisite metal art, handcrafted products, and creative portfolios. Features an interactive draggable grid layout with detailed product specifications, smooth animations, and elegant typography for artists and craftspeople.
Version: 1.0.2
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
/* Global font */
@font-face {
	font-family: 'Rota';
	src: url('draggable-grid-assets/public/Rota/Rota-Regular.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/*--------------------------------------------------------------
 * # Arches Heading class 
 * 
 * 
--------------------------------------------------------------*/

.Arches-heading{
	font-family:"Arches", serif;
}

/*--------------------------------------------------------------
# Products Archive Template
--------------------------------------------------------------*/
.products-archive {
	background: #f8f6f2;
	padding: 50px 32px 80px;
}

.products-layout {
	display: grid;
	padding-bottom: 16px;
}

.products-breadcrumb {
	font-size: 13px;
	letter-spacing: 0.04em;
	color: #2d2d2d;
}

.products-meta {
	display: flex;
	align-items: center;
	gap: 18px;
	font-size: 14px;
}

.model-count {
	font-weight: 600;
}

.view-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
}

.view-toggle .toggle {
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.08em;
	color: #1a1a1a;
	cursor: pointer;
}

.view-toggle .toggle.active {
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
/* body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
} */

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
/* a {
	color: #4169e1;
} */

/* a:visited {
	color: unset;
} */

/* a:hover,
a:focus,
a:active {
	color: #191970;
} */

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
/* button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
} */

/* button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
} */

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

/* .post,
.page {
	margin: 0 0 1.5em;
} */

body{
	margin: 0;
	font-family: 'Rota', sans-serif;
}


.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
	width: 90px;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
# Products Archive Template
--------------------------------------------------------------*/
/* .products-archive {
	padding: 60px 20px;
	max-width: 1400px;
	margin: 0 auto;
} */

.products-container {
	width: 100%;
}

.products-archive .page-header {
	text-align: center;
	margin-bottom: 60px;
	padding-bottom: 30px;
	border-bottom: 2px solid #e0e0e0;
}

.products-archive .page-title {
	font-size: 48px;
	font-weight: 700;
	color: #333;
	margin: 0;
	letter-spacing: 1px;
}

.products-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 40px;
	margin-top: 40px;
}

.product-card {
	background: #f8f6f2;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
}

.product-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.product-image {
	width: 100%;
	height: 350px;
	overflow: hidden;
	background: #f5f5f5;
	position: relative;
}

.product-image a {
	display: block;
	width: 100%;
	height: 100%;
}

.product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.product-card:hover .product-image img {
	transform: scale(1.08);
}

.product-info {
	padding: 25px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.product-title {
	font-size: 22px;
	font-weight: 600;
	margin: 0 0 15px;
	line-height: 1.3;
}

.product-title a {
	color: #15373d;
	text-decoration: none;
	transition: color 0.3s ease;
}

.product-title a:hover {
	color: #666;
}

.product-excerpt {
	color: #15373d;
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 20px;
	flex: 1;
}

.view-product-btn {
	display: inline-block;
	padding: 12px 30px;
	background: #333;
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-radius: 4px;
	transition: background 0.3s ease;
	text-align: center;
	align-self: flex-start;
}

.view-product-btn:hover {
	background: #555;
}

.no-products {
	grid-column: 1 / -1;
	text-align: center;
	padding: 80px 20px;
}

.no-products p {
	font-size: 18px;
	color: #666;
	margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
	.products-grid {
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: 30px;
	}

	.products-archive .page-title {
		font-size: 40px;
	}
}

@media (max-width: 768px) {
	.products-archive {
		padding: 40px 15px;
	}

	.products-grid {
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		gap: 20px;
	}

	.products-archive .page-title {
		font-size: 32px;
	}

	.product-image {
		height: 280px;
	}

	.product-title {
		font-size: 20px;
	}
}

@media (max-width: 480px) {
	.products-grid {
		grid-template-columns: 1fr;
	}

	.products-archive .page-title {
		font-size: 28px;
	}

	.product-image {
		height: 250px;
	}
}

/*--------------------------------------------------------------
# 404 Error Page
--------------------------------------------------------------*/
.error-page-main {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
	position: relative;
	overflow: hidden;
}

.error-404 {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.error-404-container {
	position: relative;
	width: 100%;
	max-width: 900px;
	padding: 40px;
	text-align: center;
	z-index: 1;
}

/* Decorative Elements */
.error-decoration {
	position: absolute;
	opacity: 0.05;
	pointer-events: none;
}

.error-decoration--top-left {
	top: -100px;
	left: -100px;
	width: 300px;
	height: 300px;
	border: 2px solid #fff;
	border-radius: 50%;
}

.error-decoration--bottom-right {
	bottom: -150px;
	right: -150px;
	width: 400px;
	height: 400px;
	border: 2px solid #fff;
	border-radius: 50%;
}

/* 404 Number */
.error-404-number {
	font-size: clamp(120px, 35vw, 280px);
	font-weight: 900;
	background: linear-gradient(135deg, #c9a960 0%, #d4af37 50%, #8b7620 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 20px;
	line-height: 1;
	text-shadow: 0 4px 20px rgba(201, 169, 96, 0.3);
	letter-spacing: -5px;
	font-family: 'Arches', serif;
}

/* Error Header */
.error-404-header {
	margin-bottom: 50px;
}

.error-404-title {
	font-size: clamp(32px, 8vw, 56px);
	font-weight: 700;
	color: #fff;
	margin: 0 0 20px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-family: 'Rota', sans-serif;
}

.error-404-subtitle {
	font-size: 16px;
	color: #b0b0b0;
	margin: 0;
	line-height: 1.6;
	max-width: 600px;
	margin: 0 auto;
	font-weight: 300;
}

/* Navigation Buttons */
.error-404-nav {
	display: flex;
	gap: 20px;
	justify-content: center;
	margin-bottom: 50px;
	flex-wrap: wrap;
}

.error-404-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 36px;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-radius: 4px;
	text-decoration: none;
	transition: all 0.3s ease;
	border: 2px solid transparent;
	cursor: pointer;
}

.error-404-btn--primary {
	background: linear-gradient(135deg, #c9a960 0%, #d4af37 100%);
	color: #000;
}

.error-404-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(201, 169, 96, 0.4);
}

.error-404-btn--secondary {
	background: transparent;
	color: #fff;
	border-color: #c9a960;
}

.error-404-btn--secondary:hover {
	background: rgba(201, 169, 96, 0.1);
	border-color: #d4af37;
	box-shadow: 0 8px 24px rgba(201, 169, 96, 0.2);
}

/* Search Form */
.error-404-search {
	margin-top: 40px;
	padding-top: 40px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.error-404-search p {
	color: #b0b0b0;
	margin-bottom: 20px;
	font-size: 14px;
}

.error-404-search form {
	display: flex;
	gap: 10px;
	max-width: 500px;
	margin: 0 auto;
	justify-content: center;
}

.search-submit{
	display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 16px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
	font-family: 'Rota', sans-serif
}

.error-404-search input[type="search"] {
	flex: 1;
	padding: 12px 16px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(201, 169, 96, 0.5);
	border-radius: 4px;
	color: #fff;
	font-size: 14px;
	transition: all 0.3s ease;
}

.error-404-search input[type="search"]:focus {
	outline: none;
	background: rgba(255, 255, 255, 0.08);
	border-color: #c9a960;
	box-shadow: 0 0 12px rgba(201, 169, 96, 0.3);
}

.error-404-search input[type="search"]::placeholder {
	color: #808080;
}

.error-404-search button {
	padding: 12px 24px;
	background: linear-gradient(135deg, #c9a960 0%, #d4af37 100%);
	border: none;
	border-radius: 4px;
	color: #000;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.3s ease;
	letter-spacing: 0.5px;
}

.error-404-search button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(201, 169, 96, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
	.error-404-container {
		padding: 30px 20px;
	}

	.error-404-number {
		font-size: clamp(80px, 25vw, 160px);
		letter-spacing: -3px;
	}

	.error-404-title {
		font-size: clamp(28px, 6vw, 40px);
		letter-spacing: 1px;
	}

	.error-404-subtitle {
		font-size: 15px;
	}

	.error-404-nav {
		gap: 15px;
	}

	.error-404-btn {
		padding: 12px 28px;
		font-size: 13px;
	}

	.error-decoration {
		display: none;
	}
}

@media (max-width: 480px) {
	.error-404-container {
		padding: 20px 16px;
	}

	.error-404-nav {
		flex-direction: column;
	}

	.error-404-btn {
		width: 100%;
	}

	.error-404-search form {
		flex-direction: column;
	}

	.error-404-search input[type="search"],
	.error-404-search button {
		width: 100%;
	}
}

/*--------------------------------------------------------------
# Search Results Page
--------------------------------------------------------------*/
.search-results-main {
	min-height: 100vh;
}

.search-results-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

/* Search Results Header */
.search-results-header {
	background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
	padding: 60px 0;
	margin-bottom: 60px;
	position: relative;
	overflow: hidden;
}

.search-results-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(circle at 30% 70%, rgba(201, 169, 96, 0.1) 0%, transparent 50%);
	pointer-events: none;
}

.search-results-title {
	font-size: clamp(32px, 8vw, 48px);
	font-weight: 700;
	color: #fff;
	margin: 0 0 30px;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-family: 'Rota', sans-serif;
	position: relative;
	z-index: 1;
}

.search-query {
	background: linear-gradient(135deg, #c9a960 0%, #d4af37 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Search Results Meta */
.search-results-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}

.result-count {
	color: #b0b0b0;
	font-size: 14px;
	margin: 0;
	white-space: nowrap;
}

.search-results-refine {
	flex: 1;
	min-width: 250px;
}

.search-results-refine form {
	display: flex;
	gap: 8px;
	align-items: center;
}

.search-results-refine input[type="search"] {
	flex: 1;
	padding: 10px 14px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(201, 169, 96, 0.5);
	border-radius: 4px;
	color: #fff;
	font-size: 13px;
	transition: all 0.3s ease;
}

.search-results-refine input[type="search"]:focus {
	outline: none;
	background: rgba(255, 255, 255, 0.08);
	border-color: #c9a960;
	box-shadow: 0 0 12px rgba(201, 169, 96, 0.3);
}

.search-results-refine input[type="search"]::placeholder {
	color: #808080;
}

.search-results-refine button {
	padding: 10px 18px;
	background: linear-gradient(135deg, #c9a960 0%, #d4af37 100%);
	border: none;
	border-radius: 4px;
	color: #000;
	font-weight: 600;
	font-size: 12px;
	cursor: pointer;
	transition: all 0.3s ease;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	white-space: nowrap;
}

.search-results-refine button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(201, 169, 96, 0.4);
}

/* Search Results Grid */
.search-results-content {
	margin-bottom: 60px;
}

.search-results-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 30px;
	margin-bottom: 40px;
}

/* Search Result Item (uses existing content-search template) */
.post {
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
}

.post:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.post-thumbnail {
	display: block;
	width: 100%;
	height: 250px;
	overflow: hidden;
	background: #f5f5f5;
}

.post-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.post:hover .post-thumbnail img {
	transform: scale(1.08);
}

.entry-header,
.entry-content {
	padding: 25px;
}

.entry-header {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.entry-title {
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 12px;
	line-height: 1.3;
}

.entry-title a {
	color: #333;
	text-decoration: none;
	transition: color 0.3s ease;
}

.entry-title a:hover {
	color: #c9a960;
}

.entry-content {
	padding-top: 0;
	color: #666;
	font-size: 14px;
	line-height: 1.6;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.entry-content p {
	margin: 0;
}

/* Pagination */
.search-results-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 40px;
}

.page-numbers {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
	justify-content: center;
}

.page-numbers li {
	margin: 0;
}

.page-numbers a,
.page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	color: #333;
	text-decoration: none;
	font-weight: 600;
	font-size: 13px;
	transition: all 0.3s ease;
}

.page-numbers a:hover {
	background: #c9a960;
	color: #fff;
	border-color: #c9a960;
	transform: translateY(-2px);
}

.page-numbers .current {
	background: linear-gradient(135deg, #c9a960 0%, #d4af37 100%);
	color: #000;
	border-color: #c9a960;
}

/* No Results Found */
.search-no-results {
	background: white;
	min-height: calc(100vh - 200px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 0;
	position: relative;
	overflow: hidden;
	margin-top: -60px;
}

.search-no-results::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(circle at 30% 70%, rgba(201, 169, 96, 0.08) 0%, transparent 50%);
	pointer-events: none;
}

.no-results-content {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: 700px;
	margin: 0 auto;
	padding: 40px;
}

.no-results-icon {
	margin-bottom: 30px;
	display: flex;
	justify-content: center;
}

.no-results-icon svg {
	width: 80px;
	height: 80px;
	animation: float 3s ease-in-out infinite;
}

@keyframes float {
	0%, 100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-10px);
	}
}

.no-results-title {
	font-size: 42px;
	font-weight: 700;
	color: black;
	margin: 0 0 20px;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-family: 'Rota', sans-serif;
}

.no-results-text {
	color: black;
	font-size: 16px;
	line-height: 1.6;
	margin: 0 0 40px;
}

.no-results-text strong {
	color: #d4af37;
	font-weight: 600;
}

/* Suggestions */
.no-results-suggestions {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(201, 169, 96, 0.2);
	border-radius: 8px;
	padding: 30px;
	margin: 40px 0;
	text-align: left;
}

.no-results-suggestions h3 {
	font-size: 14px;
	font-weight: 600;
	color: #d4af37;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0 0 15px;
	text-align: center;
}

.no-results-suggestions ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 15px;
}

.no-results-suggestions li {
	color: #b0b0b0;
	font-size: 14px;
	padding-left: 20px;
	position: relative;
}

.no-results-suggestions li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: #c9a960;
	font-weight: bold;
}

/* Search Form in No Results */
.no-results-search {
	margin: 40px 0;
}

.no-results-search form {
	display: flex;
	gap: 10px;
	max-width: 500px;
	margin: 0 auto;
	justify-content: center;
}

.no-results-search input[type="search"] {
	flex: 1;
	padding: 12px 16px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(201, 169, 96, 0.5);
	border-radius: 4px;
	color: black;
	font-size: 14px;
	transition: all 0.3s ease;
}

.no-results-search input[type="search"]:focus {
	outline: none;
	background: rgba(255, 255, 255, 0.08);
	border-color: #c9a960;
	box-shadow: 0 0 12px rgba(201, 169, 96, 0.3);
}

.no-results-search input[type="search"]::placeholder {
	color: #808080;
}

.no-results-search button {
	padding: 12px 24px;
	background: linear-gradient(135deg, #c9a960 0%, #d4af37 100%);
	border: none;
	border-radius: 4px;
	color: #000;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.3s ease;
	letter-spacing: 0.5px;
}

.no-results-search button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(201, 169, 96, 0.4);
}

/* Navigation Buttons */
.no-results-nav {
	display: flex;
	gap: 20px;
	justify-content: center;
	margin-top: 40px;
	flex-wrap: wrap;
}

.no-results-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 36px;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-radius: 4px;
	text-decoration: none;
	transition: all 0.3s ease;
	border: 2px solid transparent;
	cursor: pointer;
}

.no-results-btn--primary {
	background: linear-gradient(135deg, #c9a960 0%, #d4af37 100%);
	color: #000;
}

.no-results-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(201, 169, 96, 0.4);
}

.no-results-btn--secondary {
	background: transparent;
	color: #000;
	border-color: #c9a960;
}

.no-results-btn--secondary:hover {
	background: rgba(201, 169, 96, 0.1);
	border-color: #d4af37;
	box-shadow: 0 8px 24px rgba(201, 169, 96, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
	.search-results-container {
		padding: 0 20px;
	}

	.search-results-header {
		padding: 40px 0;
		margin-bottom: 40px;
	}

	.search-results-title {
		font-size: 28px;
		margin-bottom: 20px;
	}

	.search-results-meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
	}

	.search-results-refine {
		width: 100%;
	}

	.search-results-refine form {
		flex-direction: column;
	}

	.search-results-refine input[type="search"],
	.search-results-refine button {
		width: 100%;
	}

	.search-results-grid {
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		gap: 20px;
	}

	.no-results-suggestions ul {
		grid-template-columns: 1fr;
	}

	.no-results-nav {
		flex-direction: column;
	}

	.no-results-btn {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.search-results-container {
		padding: 0 16px;
	}

	.search-results-title {
		font-size: 24px;
	}

	.search-results-grid {
		grid-template-columns: 1fr;
	}

	.no-results-content {
		padding: 30px 16px;
	}

	.no-results-title {
		font-size: 32px;
	}

	.no-results-text {
		font-size: 14px;
	}

	.no-results-suggestions {
		padding: 20px;
	}

	.no-results-search form {
		flex-direction: column;
	}

	.no-results-search input[type="search"],
	.no-results-search button {
		width: 100%;
	}
}