/*
Theme Name: Waveme
Theme URI: https://demo.avtheme.com/waveme
Author: AVtheme.com
Author URI: https://avtheme.com
Support: https://avtheme.com
Description: A responsive music WordPress theme, Manage audio, album, genres, artist and sell the audio files to customer.
Version: 12.2
Plugin: 14.2
License: Envato License
License URI: http://themeforest.net/licenses/standard
Text Domain: waveme
Tags: custom-colors, editor-style, featured-images, translation-ready
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Accessibility
# Alignments
# Clearings
# Widgets
# Infinite scroll
# Media
	## Captions
	## Galleries
# Forms
# Navigation
	## Links
	## Menus
# Content
	## Posts and pages
	## Comments
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
:root{
	--x-gap: 5vw; /* Horizontal gap for layout */
	--y-gap: 1.5rem; /* Vertical gap for layout */
	--column-gap: 0; /* Gap between columns */
	--color-primary: #FF5500; /* Primary color for theme */
	--color-secondary: #065fd4; /* Secondary color for theme */
	--color-grey-30: #fafbfc; /* Light grey color */
	--color-grey-40: #f7f8f9; /* Light grey color */
	--color-grey-50: #f1f2f3; /* Light grey color */
	--color-grey-60: #b1b2b3; /* Medium grey color */
	--color-grey-70: #919293; /* Medium grey color */
	--color-grey-80: #818383; /* Medium grey color */
	--color-grey-100: #717273; /* Dark grey color */
	--color-grey-200: #636567; /* Dark grey color */
	--color-grey-300: #515355; /* Dark grey color */
	--color-grey-400: #454749; /* Dark grey color */
	--color-grey-500: #3a3c3e; /* Dark grey color */
	--color-grey-600: #202326; /* Dark grey color */
	--color-grey-700: #101316; /* Dark grey color */
	--color-grey-800: #010305; /* Dark grey color */
	--box-shadow: 0 1px 1px rgba(130,140,150,0.1), 0 -1px 0px rgba(120, 130, 140, 0.05); /* Box shadow for elements */
	--border-radius: 0.5rem; /* Border radius for rounded corners */
	--button-radius: 2rem; /* Border radius for buttons */
	--input-radius: 0.25rem; /* Border radius for inputs */
	--font-size: 0.875rem; /* Base font size */
	--line-height: 1.5; /* Base line height */
	--font-article-size: 1rem; /* Font size for articles */
	--font-weight-heading: 600; /* Font weight for headings */
	--color-border: rgba(150,155,160,0.25); /* Border color */
	--plyr-color-main: var(--color-primary); /* Main color for Plyr */
	--navbar-height: 4rem; /* Height of the navbar */
	--adminbar-height: 0rem; /* Height of the admin bar */
	--open-player-height: 0rem; /* Height of the open player */
	--mobile-menu-height: 0rem; /* Height of the mobile menu */
	--mobile-menu-icon-width: 1.25rem; /* Width of mobile menu icons */
	--mobile-menu-icon-height: 1.625rem; /* Height of mobile menu icons */
	--mobile-menu-font-size: 0.625rem; /* Font size for mobile menu */
	--side-width: 12.5rem; /* Width of the sidebar */
	--side-folded-width: 5rem; /* Width of the folded sidebar */
	--side-icon-width: 1.5rem; /* Width of sidebar icons */
	--side-icon-height: 1rem; /* Height of sidebar icons */
	--side-menu-gap: 1.5rem; /* Gap between sidebar menu items */
	--side-menu-item-height: 1.5rem; /* Height of sidebar menu items */
	--side-menu-item-grid-gap: 0.75rem; /* Grid gap for sidebar menu items */
	--side-menu-item-row-gap: 0; /* Row gap for sidebar menu items */
	--sidebar-width: 18.75rem; /* Width of the sidebar */
	--content-width: 60rem; /* Width of the content area */
	--content-margin-top: var(--navbar-height); /* Margin top for content */
	--body-bg-color: #fff; /* Background color for body */
	--text-color: #212529; /* Text color */
	--text-secondary-color: #888; /* Secondary text color */
	--offcanvas: -100%; /* Offcanvas position */
	--transform-rotate: 0; /* Rotation transform */
}

.rtl{
	direction: rtl; /* Right-to-left text direction */
	--offcanvas: 100%; /* Offcanvas position for RTL */
	--transform-rotate: 180deg; /* Rotation transform for RTL */
}

*,
*::before,
*::after {
  box-sizing: border-box; /* Box sizing for all elements */
}

html {
  font-family: sans-serif; /* Default font family */
  line-height: 1.15; /* Default line height */
  -webkit-text-size-adjust: 100%; /* Prevent text size adjustment */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Disable tap highlight color */
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block; /* Block display for semantic elements */
}

body {
  margin: 0; /* Remove default margin */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* Font stack for body */
  overflow-x: hidden; /* Prevent horizontal overflow */
  color: var(--text-color); /* Text color */
  background-color: var(--body-bg-color); /* Background color */
  font-size: var(--font-size); /* Base font size */
  font-weight: var(--font-weight, 400); /* Base font weight */
  line-height: var(--line-height, 1.5); /* Base line height */
  --wp--preset--font-size--large: calc(18px + 2.5vw); /* Large font size */
  --wp--preset--font-size--x-large: calc(24px + 4.5vw); /* Extra large font size */
}

[tabindex="-1"]:focus {
  outline: 0 !important; /* Remove outline for elements with tabindex */
}

hr {
  box-sizing: content-box; /* Box sizing for horizontal rules */
  height: 0; /* Height for horizontal rules */
  overflow: visible; /* Overflow for horizontal rules */
}

p {
  margin-top: 0; /* Remove top margin for paragraphs */
  margin-bottom: 1.5rem; /* Bottom margin for paragraphs */
}

abbr[title],
abbr[data-original-title] {
  text-decoration: underline; /* Underline for abbreviations */
  -webkit-text-decoration: underline dotted; /* Dotted underline for abbreviations */
  text-decoration: underline dotted; /* Dotted underline for abbreviations */
  cursor: help; /* Help cursor for abbreviations */
  border-bottom: 0; /* Remove border for abbreviations */
  -webkit-text-decoration-skip-ink: none; /* Prevent ink skipping for abbreviations */
  text-decoration-skip-ink: none; /* Prevent ink skipping for abbreviations */
}

address {
  margin-bottom: 1rem; /* Bottom margin for addresses */
  font-style: normal; /* Normal font style for addresses */
  line-height: inherit; /* Inherit line height for addresses */
}

ol,
ul,
dl {
  margin-top: 0; /* Remove top margin for lists */
  margin-bottom: 1rem; /* Bottom margin for lists */
}

li > ol,
li > ul,
li > ul,
li > ol {
  margin-bottom: 0; /* Remove bottom margin for nested lists */
}

dt {
  font-weight: 700; /* Bold font weight for definition terms */
}

dd {
  margin: 0 1rem 2rem; /* Margin for definition descriptions */
}

blockquote {
  margin: 0 0 1rem; /* Bottom margin for blockquotes */
}

b,
strong {
  font-weight: 600; /* Bold font weight for strong elements */
}

small {
  font-size: 90%; /* Smaller font size for small elements */
}

sub,
sup {
	font-size: 0.15em; /* Font size for subscript and superscript */
	letter-spacing: 0; /* No letter spacing for subscript and superscript */
}

a {
  color: inherit; /* Inherit color for links */
  text-decoration: none; /* No underline for links */
  background-color: transparent; /* Transparent background for links */
}

a:not([href]):not([tabindex]):focus {
  outline: 0; /* Remove outline for links without href */
}

pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Monospace font for code elements */
  font-size: 1em; /* Font size for code elements */
}

pre {
  margin-top: 0; /* Remove top margin for preformatted text */
  margin-bottom: 1rem; /* Bottom margin for preformatted text */
  overflow: auto; /* Allow overflow for preformatted text */
}

figure {
  margin: 0 0 2rem 0; /* Bottom margin for figures */
}

img {
  max-width: 100%; /* Responsive image width */
  height: auto; /* Auto height for images */
  vertical-align: middle; /* Vertical alignment for images */
  border-style: none; /* No border for images */
  border-radius: inherit; /* Inherit border radius for images */
}

img[src=""] {
	content:url("data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="); /* Placeholder for empty image src */
	background-color: rgba(150,160,170,0.1); /* Background color for empty image src */
}

svg {
  overflow: hidden; /* Hide overflow for SVGs */
  vertical-align: middle; /* Vertical alignment for SVGs */
}

table {
  border-collapse: collapse; /* Collapse table borders */
}

caption {
  padding-top: 0.75rem; /* Top padding for captions */
  padding-bottom: 0.75rem; /* Bottom padding for captions */
  color: #6c757d; /* Caption text color */
  text-align: left; /* Left align captions */
  caption-side: bottom; /* Caption position */
}

th {
  text-align: inherit; /* Inherit text alignment for table headers */
}

label {
  display: inline-block; /* Inline block display for labels */
  margin-bottom: 0.5rem; /* Bottom margin for labels */
}

button {
  border-radius: 0; /* No border radius for buttons */
}

button:focus {
  outline: none; /* Remove outline for focused buttons */
}

input,
button,
select,
optgroup,
textarea {
  margin: 0; /* Remove margin for form elements */
  font-family: inherit; /* Inherit font family for form elements */
  font-size: inherit; /* Inherit font size for form elements */
  line-height: inherit; /* Inherit line height for form elements */
}

button,
input {
  overflow: visible; /* Allow overflow for buttons and inputs */
}

button,
select {
  text-transform: none; /* No text transformation for buttons and selects */
}

select {
  word-wrap: normal; /* Normal word wrap for selects */
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* Default button appearance */
}

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
  cursor: pointer; /* Pointer cursor for clickable buttons */
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0; /* No padding for inner focus state */
  border-style: none; /* No border for inner focus state */
}

input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box; /* Box sizing for radio and checkbox inputs */
  padding: 0; /* No padding for radio and checkbox inputs */
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  -webkit-appearance: listbox; /* Default appearance for date inputs */
}

textarea {
  overflow: auto; /* Allow overflow for textareas */
  resize: vertical; /* Allow vertical resizing for textareas */
}

fieldset {
  min-width: 0; /* No minimum width for fieldsets */
  padding: 0; /* No padding for fieldsets */
  margin: 0; /* No margin for fieldsets */
  border: 0; /* No border for fieldsets */
}

legend {
  display: block; /* Block display for legends */
  width: 100%; /* Full width for legends */
  max-width: 100%; /* Max width for legends */
  padding: 0; /* No padding for legends */
  margin-bottom: .5rem; /* Bottom margin for legends */
  font-size: 1.5rem; /* Font size for legends */
  line-height: inherit; /* Inherit line height for legends */
  color: inherit; /* Inherit color for legends */
  white-space: normal; /* Normal white space for legends */
}

progress {
  vertical-align: baseline; /* Vertical alignment for progress elements */
}

input::placeholder{
	opacity: 0.3; /* Placeholder opacity */
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; /* Auto height for number input spinners */
}

[type="search"] {
  outline-offset: -2px; /* Negative outline offset for search inputs */
  -webkit-appearance: none; /* Default appearance for search inputs */
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; /* No decoration for search inputs */
}

::-webkit-file-upload-button {
  font: inherit; /* Inherit font for file upload buttons */
  -webkit-appearance: button; /* Default appearance for file upload buttons */
}

output {
  display: inline-block; /* Inline block display for output elements */
}

summary {
  display: list-item; /* List item display for summary elements */
  cursor: pointer; /* Pointer cursor for summary elements */
}

template {
  display: none; /* Hide template elements */
}

[hidden] {
  display: none !important; /* Hide hidden elements */
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-top: 0; /* Remove top margin for headings */
  margin-bottom: var(--y-gap); /* Bottom margin for headings */
  font-weight: var(--font-weight-heading); /* Font weight for headings */
  line-height: 1.1; /* Line height for headings */
}

h1, .h1 {
  font-size: 2.5rem; /* Font size for h1 */
}

h2, .h2 {
  font-size: 2rem; /* Font size for h2 */
}

h3, .h3 {
  font-size: 1.5rem; /* Font size for h3 */
}

h4, .h4 {
  font-size: 1.25rem; /* Font size for h4 */
}

h5, .h5 {
  font-size: 1rem; /* Font size for h5 */
}

h6, .h6 {
  font-size: 0.75rem; /* Font size for h6 */
}

table {
	margin: 0 0 1.5em; /* Margin for tables */
	width: 100%; /* Full width for tables */
	border-spacing: 0; /* No border spacing for tables */
}
table td, table th{
	padding: 0.5em 0.75em; /* Padding for table cells */
	text-align: inherit; /* Inherit text alignment for table cells */
	border-bottom: 1px solid #ccc; /* Bottom border for table cells */
}
thead th{
	border-bottom-width: 2px; /* Bottom border width for table headers */
}
audio,
video{
	outline: 0; /* No outline for audio and video elements */
	width: auto; /* Auto width for audio and video elements */
}

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

.screen-reader-text:focus {
	background-color: #f1f1f1; /* Background color for focused screen reader text */
	border-radius: 3px; /* Border radius for focused screen reader text */
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); /* Box shadow for focused screen reader text */
	clip: auto !important; /* Auto clip for focused screen reader text */
	clip-path: none; /* No clip path for focused screen reader text */
	color: inherit; /* Inherit color for focused screen reader text */
	display: block; /* Block display for focused screen reader text */
	font-size: 14px; /* Font size for focused screen reader text */
	font-size: 0.875rem; /* Font size for focused screen reader text */
	font-weight: bold; /* Bold font weight for focused screen reader text */
	height: auto; /* Auto height for focused screen reader text */
	left: 5px; /* Left position for focused screen reader text */
	line-height: normal; /* Normal line height for focused screen reader text */
	padding: 15px 23px 14px; /* Padding for focused screen reader text */
	text-decoration: none; /* No text decoration for focused screen reader text */
	top: 5px; /* Top position for focused screen reader text */
	width: auto; /* Auto width for focused screen reader text */
	z-index: 100000; /* High z-index for focused screen reader text */
	/* Above WP toolbar. */
}

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

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
	float: left; /* Float left for aligned elements */
	margin-inline-start: 0; /* No start margin for left aligned elements */
  margin-inline-end: var(--x-gap); /* End margin for left aligned elements */
}

.alignright {
	float: right; /* Float right for aligned elements */
	margin-inline-end: 0; /* No end margin for right aligned elements */
  margin-inline-start: var(--x-gap); /* Start margin for right aligned elements */
}

.aligncenter {
	clear: both; /* Clear floats for centered elements */
	display: block; /* Block display for centered elements */
	margin-left: auto; /* Auto left margin for centered elements */
	margin-right: auto; /* Auto right margin for centered elements */
}

.alignmiddle {
	display: flex; /* Flex display for middle aligned elements */
	align-items: center; /* Center items vertically */
	justify-content: center; /* Center items horizontally */
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: ""; /* Clearfix content */
	display: table; /* Table display for clearfix */
	table-layout: fixed; /* Fixed table layout for clearfix */
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both; /* Clear floats for clearfix */
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
	margin: 0 0 1.5em; /* Bottom margin for widgets */
	/* Make sure select elements fit in widgets. */
}

.widget select {
	max-width: 100%; /* Max width for select elements in widgets */
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
	display: block; /* Display sticky posts */
}

.sticky-post{
	border-radius: 0; /* No border radius for sticky posts */
	padding: 0px 8px; /* Padding for sticky posts */
	font-size: 12px; /* Font size for sticky posts */
  border: 1px solid; /* Border for sticky posts */
  position: relative; /* Relative position for sticky posts */
  display: inline-block; /* Inline block display for sticky posts */
  margin: 0 1rem; /* Margin for sticky posts */
}

.updated:not(.published) {
	display: none; /* Hide updated posts that are not published */
}

.post-navigation .post-title, 
.entry-title, 
.not-found .page-title, 
.error-404 .page-title, 
.comments-title,
.user-title,
.user-description,
.comment-author,
.comment-content,
blockquote{
	-webkit-hyphens: auto; /* Auto hyphenation for text */
    -moz-hyphens: auto; /* Auto hyphenation for text */
    -ms-hyphens: auto; /* Auto hyphenation for text */
    hyphens: auto; /* Auto hyphenation for text */
    word-break: break-word; /* Break words for long text */
    word-wrap: break-word; /* Wrap words for long text */
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	/* Theme Footer (when set to scrolling) */
	display: none; /* Hide footer when infinite scroll is active */
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
	display: block; /* Show footer when infinite scroll ends */
}

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

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

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block; /* Inline block display for logo links */
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
	margin-bottom: 1.5em; /* Bottom margin for captions */
	max-width: 100%; /* Max width for captions */
}

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

.wp-caption .wp-caption-text {
	margin: 0.8075em 0; /* Margin for caption text */
}

.wp-caption-text {
	text-align: center; /* Centered text for caption */
	font-size: 10px; /* Font size for caption text */
	line-height: 1.2; /* Line height for caption text */
	margin: 4px 0; /* Margin for caption text */
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
	margin-bottom: 1.5em; /* Bottom margin for galleries */
}

.gallery-item {
	display: inline-block; /* Inline block display for gallery items */
	text-align: center; /* Centered text for gallery items */
	vertical-align: top; /* Top vertical alignment for gallery items */
	width: 100%; /* Full width for gallery items */
}

.gallery-columns-2 .gallery-item {
	max-width: 50%; /* Max width for 2-column galleries */
}

.gallery-columns-3 .gallery-item {
	max-width: 33.33%; /* Max width for 3-column galleries */
}

.gallery-columns-4 .gallery-item {
	max-width: 25%; /* Max width for 4-column galleries */
}

.gallery-columns-5 .gallery-item {
	max-width: 20%; /* Max width for 5-column galleries */
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%; /* Max width for 6-column galleries */
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%; /* Max width for 7-column galleries */
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%; /* Max width for 8-column galleries */
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%; /* Max width for 9-column galleries */
}

.gallery-caption {
	display: block; /* Block display for gallery captions */
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
.button,
.input,
button,
input,
select,
textarea{
	position: relative; /* Relative position for form elements */
	align-items: center; /* Center items vertically */
  font-weight: 500; /* Font weight for form elements */
  color: inherit; /* Inherit color for form elements */
  border: 1px solid var(--color-border); /* Border for form elements */
  background-color: #fff; /* Background color for form elements */
  border-radius: var(--input-radius, 0.25rem); /* Border radius for form elements */
  font-size: 0.875rem; /* Font size for form elements */
  padding: 0.5rem 0.75rem; /* Padding for form elements */
  height: 2.5rem; /* Height for form elements */
  line-height: 1.5; /* Line height for form elements */
  outline: none; /* No outline for form elements */
  transition: border .3s ease-in-out; /* Transition for border on focus */
}

.button,
button,
input[type='button'], 
input[type='submit'], 
input[type='reset']{
	color: #333; /* Text color for buttons */
	display: inline-flex; /* Inline flex display for buttons */
	cursor: pointer; /* Pointer cursor for buttons */
	text-align: center; /* Centered text for buttons */
	padding: 0.53125rem 1.25rem; /* Padding for buttons */
	border-radius: var(--button-radius); /* Border radius for buttons */
	height: auto; /* Auto height for buttons */
}
[disabled]{
	pointer-events: none; /* Disable pointer events for disabled elements */
	opacity: 0.5; /* Reduced opacity for disabled elements */
}

input[type='checkbox'], 
input[type='radio']{
	width: 18px; /* Width for checkboxes and radio buttons */
	min-width: 18px; /* Minimum width for checkboxes and radio buttons */
	height: 18px;
	margin-inline-end: 0.5rem;
	-webkit-margin-end: 0.5rem;
	vertical-align: middle;
	display: inline-block;
	padding: 0;
	text-align: center;
	line-height: 0;
	border-color: var(--text-secondary-color);
	border-radius: 2px;
	border-width: 2px;
	transition: all .3s ease-in-out;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
input[type='radio']{
	border-radius: 50%;
}
input[type='checkbox']:checked,
input[type='radio']:checked{
	border-color: currentColor;
}
input[type='checkbox']:before, 
input[type='radio']:before{
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	border-radius: inherit;
	width: 10px;
	height: 10px;
	background-color: currentColor;
	transform: translate(-50%, -50%) scale(0);
	transition: transform 0.2s;
}
input[type='checkbox']:checked:before,
input[type='radio']:checked:before{
	transform: translate(-50%, -50%) scale(1);
}
input[type='checkbox']:checked{
	background-color: currentColor;
	border-width: 9px;
}
input[type='checkbox']:checked:before{
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	border-radius: 0;
	width: 10px;
	height: 6px;
	transform: translate(-50%, calc(-50% - 1px)) rotate(-45deg);
	background-color: transparent;
}

select{
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23888888' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right .5rem center;
	background-size: 8px 10px;
	padding-inline-end: 1.5rem !important;
	-webkit-padding-end: 1.5rem !important;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.rtl select{
	background-position: left .5rem center;
}
select[multiple],
select[size]:not([size="1"]),
textarea,
textarea.input{
	height: auto;
	padding-inline-end: 0.75rem;
	-webkit-padding-end: 0.75rem;
	background-image: none;
}

input.switch{
	border-radius: 5rem;
	width: 36px;
}
input.switch:before{
	transform: translate(-14px, -50%);
	width: 14px;
	height: 14px;
	opacity: 0.35;
}
input.switch:checked{
	color: #33cc66;
	background-color: currentColor;
}
input.switch:checked:before{
	transform: translate(0, -50%);
	opacity: 1;
	color: #fff;
}
form p{
	margin-bottom: 1em;
}
form label{
	color: var(--text-secondary-color);
	font-size: 0.875rem;
	display: inline-block;
	margin: 0 0 0.5rem 0;
}
form label + label{
	margin-left: 1rem;
	margin-right: 1rem;
}
.btn-follow,
.button-primary{
	border-color: currentColor;
}
button.button-sm,
a.button-sm,
.button-sm a{
	padding-top: 0.65rem;
	padding-bottom: 0.65rem;
	font-size: 13px;
}
button.button-xs,
a.button-xs,
.button-xs a{
	height: 1.125rem;
  padding: 0 .5rem;
  font-size: 12px;
  vertical-align: text-bottom;
  margin-left: 2px;
  margin-right: 2px;
}
a.btn-lg,
.btn-lg a,
a.button-lg,
.button-lg a{
	font-size: 1.2rem;
	padding: 1.25rem 2rem;
}
.button-rounded{
	border-radius: 3rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}
.button-link{
	color: inherit;
	border-color: transparent;
	background-color: transparent;
}
.button-reverse{
	color: #fff;
	background-color: #000;
}
.button + .button{
	margin-inline-start: 0.5rem;
	-webkit-margin-start: 0.5rem;
}
.button ins{
	text-decoration: none;
}
.form .input{
	width: 100%;
}
.post-password-form{
	padding: 4rem 0;
}
.post-password-form label{
	margin: 0;
}
button[type="submit"]{
	min-width: 3rem;
	justify-content: center;
}

.search-form{
	display: flex;
	align-items: center;
	margin-bottom: 2rem;
}
.search-form label input{
	width: 100%;
}
.search-form label{
	margin-bottom: 0;
}
.search-form .search-submit{
	margin: 0 0.5rem;
}
.search-results .product .entry-footer{
	display: none;
}
/* search */
.site-header .search-form{
	display: flex;
	flex: 10;
	align-items: center;
	background-color: #f7f8f9;
	border-radius: 2rem;
/*	padding: 0 0.5rem; */
	padding-left: 0.5rem;
	position: relative;
}
.site-header .search-form input{
	border: 0;
	outline: 0 !important;
	box-shadow: none !important;
	color: inherit;
	display: block;
	flex: 1;
	width: 1%;
	height: 1.5rem;
	padding: 0 0.5rem;
	background-color: transparent !important;
}
.site-header .search-form input::placeholder {
   color: inherit;
   opacity: 0.3;
}
.site-header .search-form label{
	margin: 0;
}
.site-header .search-form .dropdown-menu:empty{
	display: none;
}
.site-header .search-form .dropdown-menu{
	width: 100%;
	left: 0;
	top: 100% !important;
	transform: none !important;
	min-width: 240px; /* Minimum width for dropdown menu */
	max-height: 300px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overflow: -moz-scrollbars-none;
	-ms-overflow-style: none;
}
.site-header .search-form .dropdown-menu a{
	display: flex;
	grid-gap: 0.5rem;
	align-items: center;
	padding: 0.5rem 1rem;
	word-break: break-word;
}
.site-header .search-form .dropdown-menu img{
	border-radius: 3px;
	display: inline-block;
	vertical-align: middle;
}
.site-header .search-form .dropdown-menu img,
.site-header .search-form .dropdown-menu .avatar{
	width: 2.5rem;
}
.site-header .search-form .dropdown-menu span.author{
	display: block;
	color: var(--text-secondary-color);
	font-size: 12px;
}
.site-header .search-form .dropdown-menu a > span:not(.avatar){
  display: block;
  width: 1%;
  flex: 1;
}
.site-header .search-form .dropdown-menu a > span:not(.avatar) span{
	display: block;
	white-space: nowrap;
	overflow: hidden;
  text-overflow: ellipsis;
}
.site-header .search-form .dropdown-user img{
	border-radius: 50%;
}
.is-touch .site-header .menu-item-has-children > a{
	pointer-events: none;
}
#menu-state:checked ~ .site-header{
	z-index: 1001;
}
#search-state:checked ~ .site-header .search-form{
	position: absolute;
	z-index: 1000;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	color: #333;
	margin: 0;
	border-radius: 0;
	padding: 0 0.5rem;
	max-width: initial;
}
#search-state:checked ~ .site-header .search-form input{
	padding: 0 1rem;
	opacity: 1;
	display: block;
	transform: translate3d(0, 0%, 0);
}

/* header alternative */
.hide-search .site-header .search-form{
	display: none;
}
.hide-sidenav-icon .menu-toggle,
.hide-sidenav-icon .site-sidebar{
	display: none !important;
}
.site-header-transparent{
	--side-width: 0;
	--side-folded-width: 0;
	--sub-menu-color: var(--color-grey-600);
}
.site-header-transparent .site-content{
	margin-top: 0;
}
.site-header-transparent .site-header{
	color: rgba(255,255,255,1);
	position: absolute;
	box-shadow: none;
	background: transparent !important;
}
.site-header-transparent .site-sidebar{
	top: 0;
	border: none;
	z-index: 100000;
	--side-width: 15rem;
	--side-folded-width: 5rem;
	transform: translate3d(var(--offcanvas), 0, 0) !important;
}
.site-header-transparent #menu-state.hide-sidenav:checked ~ .site-sidebar{
	transform: none !important;
}
@media (min-width: 600px){
	.site-header-transparent .site-header .search-form{
		background-color: rgba(255, 255, 255, 0.35);
	}
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
nav ul{
	list-style: none;
	padding: 0;
	margin: 0;
}
.nav,
.nav ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav{
	display: flex;
	flex-wrap: nowrap;
	-webkit-overflow-scrolling: touch;
	overflow: -moz-scrollbars-none;
	-ms-overflow-style: none;
}
.nav::-webkit-scrollbar { 
	display: none;
}
.nav li{
	position: relative;
	float: none;
	display: flex;
	flex-direction: column;
}
.nav li > a{
	display: flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	position: relative;
	transition: color linear 0.2s;
}
.nav .current-menu-item > a,
.nav a:hover{
	transition: color 0.3s ease;
}
.nav ul a{
	white-space: normal;
}
.nav .sub-menu{
	display: none;
	font-weight: 400;
	font-size: max(90%, 13px);
}
.nav li.active > .sub-menu,
.user-navigation .nav li.current-menu-ancestor > .sub-menu,
.site-sidebar .nav li.current-menu-ancestor > .sub-menu{
	display: block;
}
.nav .current-menu-item > a{
	font-weight: 600;
}
.nav .menu-item-has-children:before,
.nav .menu-item-has-children > a:after{
	content: "";
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	width: 2rem;
	height: 100%;
	opacity: 0.5;
	cursor: pointer;
}
.nav .menu-item-has-children > a:after{
	position: static;
  width: 0;
  height: 0;
  top: 50%;
  margin: 1px 2px 0 2px;
  border-color: currentColor transparent transparent;
  border-style: solid;
  border-width: 4px 3px 0;
  background-color: transparent;
  opacity: 0.5;
	z-index: 0;
	transition: transform 0.3s;
}
.is-touch .nav .menu-item-has-children.no-toggle > a{
	pointer-events: none;
}
.nav .menu-item-has-children.current-menu-ancestor > a:after{
	transform: rotate(180deg);
}
.nav .button{
	color: inherit;
	mix-blend-mode: different;
}
.nav .avatar{
	width: 30px;
	border-radius: 100%;
	vertical-align: middle;
}
.nav .user-display-name{
	margin-inline-end: 0.5rem;
	-webkit-margin-end: 0.5rem;
}
.nav .svg-icon + span{
	margin-inline-start: 0.5rem;
	-webkit-margin-start: 0.5rem;
}
.nav li.btn-link a{
	position: relative;
	color: #fff !important;
	padding: 0.125rem 1rem;
	background-color: var(--text-secondary-color);
	border-radius: var(--button-radius, 2rem);
	min-height: 30px;
}
.nav li.hide-text > a{
	padding-left: 0;
	padding-right: 0;
	min-width: 30px;
	text-align: center;
	justify-content: center;
}
.nav li.hide-text > a > span{
	display: none;
}

.admin-bar{
	--adminbar-height: 32px;
}
@media (max-width: 782px){
	.admin-bar{
		--adminbar-height: 46px;
	}
}
.site-header{
	font-size: 0.875rem;
	left: 0;
	right: 0;
	top: var(--adminbar-height);
	z-index: 1000;
	position: fixed;
	background-color: #fff;
	box-shadow: var(--box-shadow);
}
.site-header .nav{
	min-height: var(--navbar-height);
}
.site-header .nav > li{
	flex-direction: row;
	align-items: center;
}
.is-touch .site-header li.current-menu-ancestor > .sub-menu,
html:not(.is-touch) .site-header li:hover > .sub-menu{
	display: block;
}
.is-touch li.fullscreen{
	display: none;
}
.site-header .sub-menu{
	position: absolute;
	background-color: var(--sub-menu-color, #fff);
	right: 50%;
	transform: translate(50%, 0);
	top: 100%;
	min-width: 10rem;
	padding: 0.5rem 0;
	border-radius: var(--border-radius);
	line-height: 1.5;
	box-shadow: 0 10px 30px rgb(0,0,0,0.1);
}
.site-header .menu-after-login{
	display: flex;
}
.site-header .menu-after-login .sub-menu{
	right: 0;
	transform: none;
}
.site-header .sub-menu a{
	padding-left: 1rem;
	padding-right: 1rem;
}
.site-header .sub-menu .sub-menu{
	transform: none;
	right: 100%;
	top: -0.5rem;
}
.site-header .secondary-menu{
	display: none;
}
.header-container{
	padding-left: 10px;
	position: relative;
}
.site-navbar{
	display: flex;
	align-items: center;
	min-height: var(--navbar-height);
}
.site-brand{
	display: flex;
	align-items: center;
	user-select: none;
	min-height: var(--navbar-height);
}
.menu-toggle{
	display: flex;
	align-items: center;
	align-self: stretch;
	padding: 0.75rem;
	margin: 0;
	cursor: pointer;
}
.site-brand .site-tagline{
	margin: 0 0.25rem;
}
.site-title{
	padding-left: 5px; 
	margin: 0 0.25rem;
	font-size: 1.15rem;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: -0.023em;
	color: inherit;
}
.site-title a:hover{
	color: inherit;
}
.hide-site-title .site-title{
	display: none;
}
.site-logo{
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
.site-logo figcaption{
	font-size: var(--site-logo-font-size, 1.15rem);
	font-weight: bold;
	padding: 0 1rem;
	margin: 0;
	color: inherit;
}
.site-logo svg,
.site-logo img{
	width: auto;
	height: var(--site-logo-height, 2rem);
}
.nav .avatar img{
	max-width: 24px;
}

/* side menu */
.site-sidebar{
	--icon-width: 0rem;
	background-color: #fff;
	border-right: 1px solid rgba(130,140,150,0.1);
	width: var(--side-width);
	padding-top: 1rem;
	flex-shrink: 0;
	position: fixed;
	z-index: 990;
	left: 0;
	top: calc(var(--adminbar-height) + var(--navbar-height));
	bottom: 0;
	overflow-y: auto; 
	scrollbar-width: none;
    -ms-overflow-style: none;
    transition: transform 0.2s;
    -webkit-overflow-scrolling: touch;
}
.site-sidebar .site-brand{
	display: none;
	padding: 0 calc(var(--side-menu-gap) - 0.5rem);
	align-items: center;
}
.site-sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
}
.site-sidebar .svg-icon{
	width: var(--icon-width, 24px);
	height: var(--icon-height, 16px);
	flex-shrink: 0;
}
.site-sidebar .menu-has-icon{
	--icon-width: var(--side-icon-width);
	--icon-height: var(--side-icon-height);
}
.site-sidebar .nav{
	flex-direction: column;
	grid-gap: var(--side-menu-item-row-gap);
}
.site-sidebar .nav a{
	display: flex;
	grid-gap: var(--side-menu-item-grid-gap);
	min-height: var(--side-menu-item-height);
	padding: 0.375rem 0;
}
.site-sidebar .nav a span{
	margin: 0;
}
.site-sidebar .theme-color i{
	margin: calc(var(--side-icon-height)/2 - 0.5rem) calc(var(--side-icon-width)/2 - 0.5rem);
}
.site-sidebar .theme-switch i{
	margin: calc(var(--side-icon-height)/2 - 0.375rem) calc(var(--side-icon-width)/2 - 0.75rem);
}
.site-sidebar .theme-color,
.site-sidebar .theme-switch{
	grid-gap: var(--side-menu-item-grid-gap);
}
.site-sidebar .sub-menu a{
	--padding: calc( var(--icon-width) + var(--side-menu-item-grid-gap) );
	padding-inline-start: var(--padding);
	-webkit-padding-start: var(--padding);
}
.site-sidebar .menu-item-has-children{
	padding: 0 !important;
}
.site-sidebar .menu-item-has-children > a:after{
	margin-inline-start: auto;
	-webkit-margin-start: auto;
}
.site-sidebar .menu-header{
	padding: 0.5rem 0;
	opacity: 0.5;
	font-size: 0.85em;
}
.site-sidebar li ~ .menu-header{
	padding-top: 1.5rem;
}
.site-sidebar .menu-header a{
	padding: 0;
	pointer-events: none;
}
.site-sidebar .primary-menu{
	padding: 0 var(--side-menu-gap);
}
.site-sidebar .site-sidebar-header:not(:empty),
.site-sidebar .site-sidebar-footer:not(:empty){
	font-size: 0.875rem;
}
.site-sidebar .site-sidebar-footer a{
	color: var(--text-secondary-color);
	margin-inline-end: 0.75rem;
	-webkit-margin-end: 0.75rem;
}
.with-left-sidebar .sidebar{
	order: -1;
}
.site-content{
	margin-top: var(--content-margin-top);
	min-height: calc(100vh - var(--navbar-height) - var(--adminbar-height) - var(--open-player-height) - var(--mobile-menu-height));
	transition: margin 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.open-player body{
	--open-player-height: var(--plyr-height);
	padding-bottom: calc(var(--open-player-height) + var(--mobile-menu-height));
}
/* Navigation links styling */
.nav-links{
	display: flex; /* Use flexbox for layout */
	align-items: center; /* Center items vertically */
	justify-content: center; /* Center items horizontally */
	margin-bottom: calc(var(--y-gap)*1.5); /* Bottom margin using gap variable */
}

/* Style for page numbers (excluding prev/next buttons) */
.nav-links .page-numbers:not(.prev):not(.next){
	padding: 0.25rem 0.5rem; /* Padding around page numbers */
	font-size: 1rem; /* Font size for page numbers */
	position: relative; /* Relative positioning for hover effects */
	display: inline-block; /* Inline block display for page numbers */
	margin: 0.25rem 0.25rem; /* Margin around page numbers */
}

/* Hover effect underline animation for page numbers */
.nav-links a.page-numbers:not(.prev):not(.next):after{
	content: ""; /* Empty content for decorative underline */
	display: block; /* Block display for underline */
	position: absolute; /* Absolute position for underline */
	left: 25%; /* Left offset for underline */
	bottom: 0; /* Bottom position for underline */
	width: 50%; /* Width of underline */
	border-bottom: 1px solid; /* Solid border for underline */
	transform: translate3d(0,0,0) scaleX(0); /* Initial scale of 0 for animation */
	transform-origin: right top; /* Transform origin for animation */
	transition: transform 0.2s ease-in-out 0.1s; /* Smooth transition for hover effect */
}

/* Hover state for page number underline */
.nav-links a.page-numbers:not(.prev):not(.next):hover:after{
	transform: translate3d(0,0,0) scaleX(1); /* Scale to full width on hover */
	transform-origin: left top; /* Change transform origin for hover animation */
}

/* Current page and span styling */
.nav-links .current,
.nav-links .page-numbers span{
	color: var(--text-secondary-color); /* Secondary text color for current page and spans */
}

/* Meta navigation styling */
.nav-links .meta-nav{
	font-size: 10px; /* Small font size for meta navigation */
	text-transform: uppercase; /* Uppercase text for meta navigation */
	font-weight: bold; /* Bold font weight for meta navigation */
	color: var(--text-secondary-color); /* Secondary text color for meta navigation */
	top: -4px; /* Slight upward offset */
    position: relative; /* Relative positioning for offset */
}

/* Previous/Next navigation links */
.nav-links .prev,
.nav-links .next,
.nav-links .nav-previous,
.nav-links .nav-next{
	display: flex; /* Flex display for navigation links */
	align-items: center; /* Center align items vertically */
	width: 50%; /* Half width for each navigation link */
	margin-right: auto; /* Auto right margin for spacing */
	line-height: 1.2; /* Line height for text */
}

/* Navigation arrows styling */
.nav-links .prev:before,
.nav-links .next:before,
.nav-links .nav-previous:before,
.nav-links .nav-next:before{
	font-family: serif; /* Serif font for navigation arrows */
	content: "\2039"; /* Left-pointing arrow character */
	display: inline-block; /* Inline block display for arrow */
	text-align: center; /* Center align arrow */
	height: 2.25rem; /* Height of arrow container */
	width: 2.25rem; /* Width of arrow container */
	font-size: 28px; /* Font size for arrow */
	border-radius: 50%; /* Circular shape for arrow container */
	flex-shrink: 0; /* Prevent arrow from shrinking */
	color: var(--text-secondary-color); /* Secondary color for arrow */
	box-shadow: var(--box-shadow); /* Box shadow for depth */
	transform: scale(1); /* Initial scale */
	transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); /* Smooth transition for hover */
	background-color: #fff; /* White background for arrow container */
}

/* Right-pointing arrow for next links */
.nav-links .next:before,
.nav-links .nav-next:before{
	content: "\203a"; /* Right-pointing arrow character */
}

/* Next navigation link layout */
.nav-links .next,
.nav-links .nav-next{
	flex-direction: row-reverse; /* Reverse flex direction for next links */
	margin-left: auto; /* Auto left margin for spacing */
	margin-right: inherit; /* Inherit right margin */
}

/* Post title styling in navigation */
.nav-links .post-title{
	margin: 0 1rem; /* Margin around post title */
	display: block; /* Block display for post title */
}

/* Hover states for navigation arrows */
.nav-links .prev:hover:before,
.nav-links .next:hover:before,
.nav-links .nav-previous:hover:before,
.nav-links .nav-next:hover:before{
	border-color: currentColor; /* Border color matches text on hover */
	color: currentColor; /* Arrow color matches text on hover */
}

/* SVG icon rotation */
.nav-links .prev svg, 
.nav-links .next svg{
	transform: rotate(var(--transform-rotate)); /* Rotate SVG icons based on direction */
}

/* Right alignment for next navigation text */
.nav-links .nav-next a{
	text-align: right; /* Right align text for next navigation */
}

/* Previous and Next link spacing */
.nav-links .prev, 
.nav-links .next{
	margin: 0 0.5rem; /* Margin for previous and next links */
	width: auto; /* Auto width for navigation links */
}
/* Page links container */
.page-links {
	clear: both; /* Clear floats */
	font-size: 0.85rem; /* Smaller font size */
}

/* Hide page links title */
.page-links .page-links-title{
	display: none; /* Hide the title */
}

/* Page links and current page styling */
.page-links .current,
.page-links a{
	display: inline-block; /* Inline block display */
	text-align: center; /* Center text */
	padding: 0; /* No padding */
	width: 2rem; /* Fixed width */
	height: 2rem; /* Fixed height */
	line-height: 1.9rem; /* Line height for vertical centering */
	border-radius: 50%; /* Circular shape */
	border: 1px solid rgba(150,160,170,0.2); /* Light border */
	color: var(--text-secondary-color); /* Secondary text color */
	transition: all 0.3s; /* Smooth transition for hover effects */
}

/* Hover state for page links */
.page-links a:hover{
	border-color: currentColor; /* Border color matches text on hover */
	color: inherit; /* Inherit text color on hover */
}

/* Current page styling */
.page-links .current{
	background-color: rgba(150,160,170,0.1); /* Light background for current page */
	border-color: transparent; /* Transparent border for current page */
}

/* Entry meta container */
.entry-meta{
	display: flex; /* Flex display */
	align-items: center; /* Center items vertically */
	flex-wrap: wrap; /* Allow wrapping */
	grid-gap: var(--entry-meta-grid-gap, 1rem); /* Gap between items */
	margin-bottom: var(--y-gap); /* Bottom margin */
}

/* Entry term and tag spacing */
.entry-term > *,
.entry-tag > *{
	margin-inline-end: 0.5rem; /* End margin */
	-webkit-margin-end: 0.5rem; /* Webkit end margin */
	margin-bottom: 0.5rem; /* Bottom margin */
}

/* Entry tag and category list items */
.entry-tag li,
.entry-cat li{
	display: inline-block; /* Inline block display */
}

/* Entry info container */
.entry-info{
	display: flex; /* Flex display */
	align-items: center; /* Center items vertically */
	flex-wrap: wrap; /* Allow wrapping */
	margin-bottom: 1rem; /* Bottom margin */
}

/* Separator dots for entry info and categories */
.entry-info > span + span:before,
.entry-cat li + li:before{
	display: inline-block; /* Inline block display */
	content: '\00B7'; /* Bullet point character */
	color: var(--text-secondary-color); /* Secondary text color */
	width: 1.25rem; /* Fixed width */
	font-weight: bold; /* Bold font weight */
	text-align: center; /* Center text */
}

/* Category links container */
.cat-links{
	display: block; /* Block display */
	margin-left: -0.5rem; /* Negative left margin */
	margin-right: -0.5rem; /* Negative right margin */
	margin-bottom: var(--y-gap); /* Bottom margin */
	white-space: pre-wrap; /* Preserve whitespace */
	text-transform: uppercase; /* Uppercase text */
}

/* Category link styling */
.cat-links a{
	display: inline-flex; /* Inline flex display */
	align-items: center; /* Center items vertically */
	position: relative; /* Relative positioning */
	margin: 0 0.5rem; /* Horizontal margin */
}

/* Category link underline animation */
.cat-links a:before{
	content: ""; /* Empty content */
	display: block; /* Block display */
	position: absolute; /* Absolute positioning */
	bottom: 0; /* Position at bottom */
	left: 0; /* Position at left */
	right: 0; /* Position at right */
	border-bottom: 1px solid; /* Bottom border */
	transform: translate3d(0,0,0) scaleX(0); /* Initial scale of 0 */
	transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); /* Smooth transition */
	transform-origin: right top; /* Transform origin */
}

/* Category link hover state */
.cat-links a:hover:before{
	transform: translate3d(0,0,0) scaleX(1); /* Scale to full width on hover */
	transform-origin: left top; /* Change transform origin */
}
/* User links container */
.user-links{
	display: flex; /* Flex display for layout */
	flex-wrap: wrap; /* Allow wrapping of items */
	list-style: none; /* No bullet points */
	padding: 0; /* No padding */
	margin: 0; /* No margin */
}

/* User links list items */
.user-links li{
	display: flex; /* Flex display for list items */
	align-items: center; /* Center align items vertically */
}

/* User links anchor tags */
.user-links li a{
	display: inline-block; /* Inline block display for links */
	padding: 0.375rem; /* Padding around links */
	line-height: 0; /* No line height */
}

/* Tags container */
.tags{
	display: block; /* Block display for tags container */
	margin-top: calc(var(--y-gap)*2); /* Top margin using gap variable */
	margin-bottom: calc(var(--y-gap)*2); /* Bottom margin using gap variable */
}

/* Entry tags and general tags styling */
.entry-tag a,
.tags a{
	color: inherit; /* Inherit text color */
	display: inline-block; /* Inline block display for tag links */
	padding: 2px 10px; /* Padding for tag links */
	border: 1px solid rgba(150,170,170,0.2); /* Light border for tags */
	background-color: #fff; /* White background */
	border-radius: 4px; /* Rounded corners */
	margin-bottom: 4px; /* Bottom margin between tags */
	text-transform: capitalize; /* Capitalize tag text */
	transition: all 0.2s; /* Smooth transition for hover effects */
}

/* Hover state for tags */
.entry-tag a:hover,
.tags a:hover{
	border-color: inherit; /* Border color matches text on hover */
}

/* Links after tags */
.tags + a{
	color: var(--text-secondary-color); /* Secondary text color for links after tags */
	margin: 0 var(--tag-gap, 0.5rem); /* Horizontal margin using tag gap variable */
}
.byline,
.posted-on,
.comments-link,
.post-edit-link{
	color: var(--text-secondary-color); /* Secondary text color for meta links */
}
.avatar{
	display: block;
	position: relative;
	border-radius: 50%;
	flex-shrink: 0;
	background-color: #666;
	color: #fff;
}
.avatar:before{
	content: '';
	display: block;
	padding-top: 100%;
}
.avatar img,
.avatar > .avatar-name{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	object-fit: cover;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: bolder;
	text-transform: capitalize;
}
.avatar-name svg{
	color: var(--text-secondary-color);
}
#wp-admin-bar-my-account > .ab-item .avatar{
	display: none;
}

.count{
	color: var(--text-secondary-color);
	font-weight: 500;
}
.count:empty{
	display: none;
}

.user-social-links{
	margin-bottom: 1rem;
	color: var(--text-secondary-color);
}

.user-social-links a:after{
	content: '';
	display: inline-block;
	width: 1rem;
}
/* User bio container */
.user-bio{
	display: flex; /* Flex display */
	width: 100%; /* Full width */
	font-size: 14px; /* Small font size */
	margin-bottom: var(--y-gap); /* Bottom margin */
}

/* User follower text styling */
.user-bio .user-follower span{
	color: var(--text-secondary-color); /* Secondary text color */
}

/* User follower count styling */
.user-bio .user-follower .count{
	color: inherit; /* Inherit text color */
}

/* User meta container */
.user-meta{
	display: flex; /* Flex display */
	width: 100%; /* Full width */
}

/* User avatar container */
.user-avatar{
	flex-shrink: 0; /* Prevent shrinking */
	display: inline-flex; /* Inline flex display */
	align-items: flex-start; /* Align items to top */
}

/* User avatar size */
.user-avatar .avatar{
	width: 3.75rem; /* Fixed width */
}

/* Spacing after user elements */
.user-link:after,
.user-avatar:after,
.user-title h3:after{
	content: ''; /* Empty content */
	display: inline-block; /* Inline block display */
	width: 1rem; /* Fixed width spacing */
}

/* User title styling */
.user-title{
	text-transform: capitalize; /* Capitalize text */
	display: flex; /* Flex display */
	align-items: center; /* Center items vertically */
}

/* Author name styling */
.author-name{
	text-transform: capitalize; /* Capitalize text */
}

/* User info container */
.user-info{
	flex: 1; /* Flex grow */
	display: flex; /* Flex display */
	flex-wrap: wrap; /* Allow wrapping */
	align-items: center; /* Center items vertically */
}

/* User title heading styling */
.user-info .user-title > h3{
	font-size: 1.1rem; /* Font size */
	margin: 0.25rem 0; /* Vertical margin */
	display: flex; /* Flex display */
	align-items: center; /* Center items vertically */
}

/* User links margin */
.user-bio .user-links{
	margin-top: 0.5rem; /* Top margin */
}

/* Follow button styling */
.user-bio .btn-follow{
	padding: 0.25rem 1rem; /* Horizontal padding */
}

/* Entry header user title */
.entry-header .user-title h3{
	font-size: 14px; /* Small font size */
}

/* Entry footer user bio styling */
.entry-footer .user-bio{
	padding: 1.5rem 1.5rem; /* Equal padding */
	background-color: #fff; /* White background */
	box-shadow: var(--box-shadow); /* Box shadow */
	border-radius: 4px; /* Rounded corners */
	margin-top: var(--y-gap); /* Top margin */
}

/* Hide spacing after user link in footer */
.entry-footer .user-bio .user-link:after{
	display: none; /* Hide element */
}

/* User heading styling */
.user-heading{
	display: none; /* Hidden by default */
	font-size: 10px; /* Small font size */
	font-weight: bold; /* Bold font weight */
	color: var(--text-secondary-color); /* Secondary text color */
}

/* User description styling */
.user-description{
	color: var(--text-secondary-color); /* Secondary text color */
}

/* Show user heading in single view */
.single .user-heading{
	display: block; /* Show element */
}

/* Font size for single post and archive content */
.single-post .entry-content,
.archive-content p{
	font-size: var(--font-article-size); /* Use article font size variable */
}
/*--------------------------------------------------------------
## Comments 
--------------------------------------------------------------*/
.comments-area{
	margin-bottom: calc(var(--y-gap)*2);
}
.comments-title{
	display: flex;
	align-items: center;
}
.comments-title .close{
	margin-inline-start: auto;
	-webkit-margin-start: auto;
	font-weight: 100;
	cursor: pointer;
	padding: 0 0.25rem;
	display: none;
}
.comment-list,
.comment-list .comment-list,
.comment-list .comment,
.comment-list .children{
    list-style: none;
    padding: 0;
    margin: 0;
}

.comment-list .trackback,
.comment-list .pingback{
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.comment-list .says{
	font-size: 0;
	display: none;
}
.comment-content,
.comment-body > .reply,
.children .comment,
.comment-toolbar,
.comment-meta,
.comment .comment-respond{
	padding-inline-start: 3.25rem;
	-webkit-padding-start: 3.25rem;
	line-height: 1.5;
}

#cancel-comment-reply-link{
	padding-inline-start: 0.75rem;
	-webkit-padding-start: 0.75rem;
}
.comment-body{
	margin-bottom: var(--y-gap);
	font-size: 14px;
}
.comment-toolbar{
	display: flex;
	align-items: center;
	margin-top: 4px;
	color: var(--text-secondary-color);
}
.comment-author .avatar{
	position: absolute;
	left: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	font-size: 0.85rem;
}
.rtl .nav .menu-item-has-children:before{
	left: 0;
	right: auto;
}
.rtl .site-header .menu-after-login .sub-menu{
	left: 0;
	right: auto;
}
.rtl .site-header .sub-menu .sub-menu{
	left: 100%;
	right: auto;
}
.rtl .site-sidebar{
	left: auto;
	right: 0;
}
.rtl .comment-author .avatar{
	left: auto;
	right: 0;
}
.comment-meta{
	position: relative;
	display: flex;
	flex-wrap: wrap;
}
.comment-metadata{
	display: flex;
	flex: 1;
	margin: 0 4px;
}
.comment-metadata > a{
	margin-inline-end: auto;
	-webkit-margin-end: auto;
}
.comment-metadata time,
.comment-metadata > a{
	font-size: 0;
}
.comment-meta,
.comment-metadata > a .comment-human-time{
	font-size: 13px;
	line-height: 1.5;
}
.comment-metadata > a .comment-human-time{
	color: var(--text-secondary-color);
}
.comment-content a {
	word-wrap: break-word;
}
.comment-content p{
	color: inherit !important;
}
.comment-content p:last-child{
	margin-bottom: 0;
}
.bypostauthor > .comment-body .comment-author b a{
	background-color: #999;
	color: #fff;
	font-size: 12px;
	padding: 0px 8px;
	border-radius: 10px;
  display: inline-block;
}
.comment-author a:hover{
	color: inherit;
}
/* Comment form container */
.comment-respond{
	position: relative; /* Relative positioning */
	margin-bottom: 1.5rem; /* Bottom margin */
	display: flex; /* Flex display */
	grid-gap: 0.75rem; /* Gap between elements */
	align-items: start; /* Align items to top */
}

/* Nested comment response spacing */
.comment-list .comment-respond{
	margin-top: 2rem; /* Top margin for nested comments */
}

/* No comments message */
.no-comments{
	font-size: 14px; /* Small font size */
	color: var(--text-secondary-color); /* Secondary text color */
	text-align: center; /* Center align text */
	padding: 1rem; /* Padding around message */
}

/* Comment message styling */
.comment-message{
	margin-top: 0.5rem; /* Top margin */
	order: 2; /* Order in flex container */
}

/* Hide empty paragraphs and links in comment message */
.comment-message p:empty,
.comment-message p a{
	display: none; /* Hide elements */
}

/* Comment form avatar */
.comment-respond .avatar{
	width: 2.5rem; /* Fixed width */
	height: 2.5rem; /* Fixed height */
	border-radius: 50%; /* Circular shape */
	margin: 0 !important; /* No margin */
}

/* Comment form header */
.comment-respond .comment-reply-header{
	display: flex; /* Flex display */
	align-items: center; /* Center items vertically */
}

/* Comment reply title */
.comment-respond .comment-reply-title{
	font-size: 1rem; /* Font size */
	margin: 0 1rem; /* Horizontal margin */
	height: 2rem; /* Fixed height */
	overflow: hidden; /* Hide overflow */
}

/* Comment reply title span */
.comment-respond .comment-reply-title span{
	display: flex; /* Flex display */
	align-items: center; /* Center items vertically */
	color: var(--text-secondary-color); /* Secondary text color */
	height: 2rem; /* Fixed height */
	transition: all 0.2s ease-in-out; /* Smooth transition */
}

/* Small text in reply header */
.comment-respond .comment-reply-header small{
	margin-inline-start: auto; /* Push to end */
	-webkit-margin-start: auto; /* Webkit support */
}

/* Comment form container */
.comment-form{
	transition: max-height 0.3s ease-in-out; /* Height transition */
	overflow: hidden; /* Hide overflow */
	display: flex; /* Flex display */
	flex: 1; /* Flex grow */
	flex-wrap: wrap; /* Allow wrapping */
}

/* Logged in comment form */
.is-logged-in ~ .comment-form{
	max-height: inherit; /* Inherit max height */
}

/* Comment form label */
.comment-form-comment label{
	width: 100%; /* Full width */
	height: 2.375rem; /* Fixed height */
	position: absolute; /* Absolute position */
	top: 0; /* Align to top */
	padding: 0.375rem 0.75rem; /* Padding */
	margin: 0; /* No margin */
	z-index: 2; /* Stack order */
}

/* Hide label when logged in */
.is-logged-in + .comment-form .comment-form-comment label{
	display: none; /* Hide label */
}

/* Comment form state */
#commentform-state{
	display: none; /* Hidden by default */
}

/* Expanded comment form */
#commentform-state:checked ~ .comment-form{
	max-height: 50rem; /* Maximum height when expanded */
}

/* Hide label when form expanded */
#commentform-state:checked ~ .comment-form .comment-form-comment label{
	display: none; /* Hide label */
}

/* Comment form inputs */
.comment-form input[name="author"], 
.comment-form input[name="email"], 
.comment-form input[name="url"],
.comment-form textarea {
    display: block; /* Block display */
    width: 100%; /* Full width */
}

/* Comment form paragraphs */
.comment-form > p{
	order: 10; /* Order in flex container */
	position: relative; /* Relative position */
}

/* Comment form notes */
.comment-form .comment-notes{
	font-size: 0.85rem; /* Small font size */
	color: var(--text-secondary-color); /* Secondary text color */
	order: 3; /* Order in flex container */
	width: 100%; /* Full width */
	margin-top: 0.5rem; /* Top margin */
}

/* Cookie consent checkbox */
.comment-form .comment-form-cookies-consent{
	display: flex; /* Flex display */
}

/* Comment form comment area */
.comment-form .comment-form-comment{
	flex: 1; /* Flex grow */
	display: flex; /* Flex display */
}

/* Spacing after comment area */
.comment-form .comment-form-comment:after{
	display: inline-block; /* Inline block display */
	width: 1rem; /* Fixed width */
}

/* Comment form layout */
.comment-form .comment-form-comment,
.comment-form .form-submit{
	width: 100%; /* Full width */
	flex: auto; /* Flex grow */
}

/* Comment reply title margin */
.comment-reply-title{
	margin-bottom: 0; /* No bottom margin */
}

/* Logged in message */
.comment-form .logged-in-as{
	margin-top: 0.5rem; /* Top margin */
	font-size: 0.85em; /* Small font size */
	color: var(--text-secondary-color); /* Secondary text color */
}
.comment-list .pingback .comment-body a:not(.comment-edit-link), 
.comment-list .trackback .comment-body a:not(.comment-edit-link) {
    font-weight: 500;
    font-size: 14px;
    padding-right: 0.5rem;
    display: block;
}
.comment-edit-link,
.comment-reply-link{
	font-size: 0.75rem;
	color: var(--text-secondary-color);
	text-transform: uppercase;
	display: inline-block;
}
.comment-toolbar .comment-reply-link{
	padding: 0.5rem;
}
.comment-edit-link:hover,
.comment-reply-link:hover{
	color: inherit;
	border-color: currentColor;
}
#cancel-comment-reply-link{
	position: absolute;
	top: -1.5rem;
	color: #999;
	font-size: 13px;
}
.comment-reply-login{
	display: none;
}
.comment-respond .must-log-in{
	flex: 1;
	display: flex;
}
.comment-respond .must-log-in p{
	flex: 1;
	display: block;
	text-align: inherit;
	height: auto;
	margin-bottom: 0;
}
.comment-respond .must-log-in + button{
	display: none;
}
.comment-respond .must-log-in:after{
	content: '';
	display: inline-block;
	width: 0.75rem;
}
.comment-awaiting-moderation{
	width: 100%;
	display: block;
	margin-top: 0.5rem;
	font-size: 0.85em;
}
.comment-form .comment-form-author, 
.comment-form .comment-form-email, 
.comment-form .comment-form-url{
	width: 100%;
}
.comment-navigation{
	margin: 1rem 0;
	width: auto !important;
	max-width: auto !important;
}
/* Base button styling */
.btn{
	position: relative; /* Relative positioning for pseudo-elements */
    display: inline-flex; /* Inline flex display */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    vertical-align: middle; /* Middle vertical alignment */
    padding: .375rem 1rem; /* Padding */
    border-radius: 0; /* No border radius */
    font-size: 0.875rem; /* Font size */
    color: #222 !important; /* Text color */
    background-color: transparent !important; /* Transparent background */
    user-select: none; /* Prevent text selection */
    outline: none; /* No outline */
    cursor: pointer; /* Pointer cursor */
}

/* Button background layers */
.btn:before,
.btn:after{
	position: absolute; /* Absolute positioning */
	content: ""; /* Empty content */
	z-index: -2; /* Stack below button */
	left: 0; /* Align to left */
	top: 0; /* Align to top */
	bottom: 0; /* Align to bottom */
	width: 100%; /* Full width */
	background: #fff; /* White background */
	border-radius: inherit; /* Inherit border radius */
	transform: translate3d(0,0,0) scaleX(1); /* Initial transform */
	transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1); /* Smooth transition */
	transform-origin: right center; /* Transform from right */
}

/* Button hover layer */
.btn:after{
	z-index: -1; /* Stack above base layer */
	background-color: #000; /* Black background */
	transform: translate3d(0,0,0) scaleX(0); /* Initially hidden */
}

/* Button hover and focus states */
.btn:hover,
.btn:focus{
	color: #fff !important; /* White text on hover/focus */
}

/* Button hover/focus animation */
.btn:hover:after,
.btn:focus:after{
	transform: translate3d(0,0,0) scaleX(1); /* Show hover layer */
	transform-origin: left center; /* Transform from left */
}

/* Small button variant */
.btn-sm,
.btn-sm a{
	padding: 4px 12px; /* Smaller padding */
	font-size: 12px; /* Smaller font size */
}

/* Reverse color button */
.btn-reverse{
	color: #fff; /* White text */
}

/* Reverse button background */
.btn-reverse:before{
	background: #000; /* Black background */
}

/* Reverse button hover layer */
.btn-reverse:after{
	background: #fff; /* White background */
}
/* Navigation and search icons */
#icon-nav,
#icon-search{
	line-height: 0; /* No line height */
	padding: 0.5rem; /* Equal padding */
	margin: 0; /* No margin */
	text-align: center; /* Center text */
	color: inherit; /* Inherit color */
	cursor: pointer; /* Pointer cursor */
	white-space: nowrap; /* No text wrapping */
	border-top-left-radius: 0; /* No top left radius */
    border-bottom-left-radius: 0; /* No bottom left radius */
}

/* Hide navigation icon by default */
#icon-nav{
	display: none; /* Hidden */
}

/* Menu icon container */
i.icon-menu {
  position: relative; /* Relative positioning */
  display: inline-block; /* Inline block display */
  vertical-align: middle; /* Middle vertical alignment */
  width: 20px; /* Fixed width */
  height: 20px; /* Fixed height */
  cursor: pointer; /* Pointer cursor */
  font-size: 0; /* No font size */
}

/* Menu icon bars */
i.icon-menu:before, 
i.icon-menu:after,
i.icon-menu i:before,
i.icon-menu i:after {
    content: ''; /* Empty content */
    position: absolute; /* Absolute positioning */
    width: 80%; /* Bar width */
    height: 2px; /* Bar height */
    border-radius: 1px; /* Rounded corners */
    top: 50%; /* Center vertically */
    left: 10%; /* Center horizontally */
    margin-top: -1px; /* Vertical offset */
    background-color: currentColor; /* Inherit color */
    transition: transform .2s ease-in-out; /* Smooth transition */
    transform-origin: left center; /* Transform from left */
}

/* Top bar */
i.icon-menu:before {
    top: 37.5%; /* Position top bar */
    transition-delay: .3s; /* Delay transition */
}

/* Bottom bar */
i.icon-menu:after {
    top: 62.5%; /* Position bottom bar */
    transition-delay: .4s; /* Delay transition */
}

/* Hover effect for bottom bar */
i.icon-menu:hover:after {
    transform: scaleX(1); /* Full width on hover */
}

/* Middle bar container */
i.icon-menu i {
    position: absolute; /* Absolute positioning */
    left: 10%; /* Center horizontally */
    top: 10%; /* Center vertically */
    width: 80%; /* Container width */
    height: 80%; /* Container height */
    -webkit-transform: rotate(-45deg); /* Rotate for animation */
    transform: rotate(-45deg); /* Rotate for animation */
}

/* Middle bar before state */
i.icon-menu i:before {
	top: 0; /* Align to top */
	left: 50%; /* Center horizontally */
	transform: rotate(90deg) scaleX(0); /* Initial rotation and scale */
	transition-delay: 0.1s; /* Delay transition */
}

/* Middle bar after state */
i.icon-menu i:after {
	top: 50%; /* Center vertically */
	right: 0; /* Align to right */
	transform: scaleX(0); /* Initially hidden */
	transition-delay: 0s; /* No transition delay */
}
i.icon-nav,
i.icon-nav:before,
i.icon-nav:after{
	content: "";
	display: inline-block;
	position: relative;
	height: 1px;
	width: 18px;
	border-radius: 2px;
	background-color: var(--text-secondary-color, currentcolor);
}
i.icon-nav:before{
	position: absolute;
	left: 0;
	top: -0.3125em;
}
i.icon-nav:after{
	position: absolute;
	left: 0;
	bottom: -0.3125em;
}
i.icon-search{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 1.5em;
	height: 1.5em;
	cursor: pointer;
	color: black;
}

i.icon-search:before,
i.icon-search:after{
	content: '';
    position: absolute;
    width: 25%;
    height: 1px;
    border-radius: 1px;
    background-color: currentColor;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: transform .1s ease-in-out;
}
i.icon-search:before{
	width: 50%;
	height: 50%;
	border-radius: 100%;
	border: 1px solid currentColor;
	background-color: transparent;
}
i.icon-search:after{
	transform: rotate(45deg);
	transform-origin: left top;
	left: 62.5%;
	top: 62.5%;
}

#nav-state,
#menu-state,
#search-state{
	display: none;
}
#menu-state:checked ~ * i.icon-menu:before {
    transition-delay: 0.1s;
    transform: scaleX(0);
    transform-origin: right center;
}
#menu-state:checked ~ * i.icon-menu:after {
    transition-delay: 0s;
    transform: scaleX(0);
    transform-origin: right center;
}
#menu-state:checked ~ * i.icon-menu i:before {
    transition-delay: .4s;
    -webkit-transform: rotate(90deg) scaleX(1);
    transform: rotate(90deg) scaleX(1);
}
#menu-state:checked ~ * i.icon-menu i:after {
    transition-delay: .5s;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

#menu-state:checked ~ .site-sidebar{
	transform: translate3d(var(--offcanvas), 0, 0);
}

#search-state:checked ~ * i.icon-search:before{
	width: 75%;
	height: 1px;
	border-radius: 1px;
	background-color: currentColor;
	border: none;
	transform: translate(-50%, -50%) rotate(45deg);
}
#search-state:checked ~ * i.icon-search:after{
	width: 75%;
	transform: translate(-50%, -50%) rotate(-45deg);
	left: 50%;
	top: 50%;
	transform-origin: center center;
}

/* Theme color and switch containers */
.theme-color,
.theme-switch{
	display: inline-flex; /* Inline flex display */
	align-items: center; /* Center items vertically */
	margin: 0; /* No margin */
}

/* Theme color indicator */
.theme-color i{
	display: inline-block; /* Inline block display */
	position: relative; /* Relative positioning */
	width: 1rem; /* Fixed width */
	height: 1rem; /* Fixed height */
	padding: 0; /* No padding */
	margin: 0 0.25rem; /* Horizontal margin */
    border-radius: 50%; /* Circular shape */
   	flex-shrink: 0; /* Prevent shrinking */
}

/* Theme color input */
.theme-color input{
	width: 1px; /* Minimal width */
	height: 1px; /* Minimal height */
	padding: 0; /* No padding */
	order: 5; /* Order in flex container */
	position: absolute; /* Absolute positioning */
	border: none; /* No border */
	background-color: transparent; /* Transparent background */
}

/* Theme color swatch styling */
.theme-color input::-webkit-color-swatch {
    border: none; /* No border for color swatch */
}

/* Theme switch toggle */
.theme-switch i{
	display: inline-block; /* Inline block display */
	position: relative; /* Relative positioning */
	width: 1.5rem; /* Fixed width */
	height: 0.75rem; /* Fixed height */
	border-radius: 2rem; /* Pill shape */
	background-color: rgba(120,130,140,0.2); /* Light background */
	line-height: 1; /* Normal line height */
	cursor: pointer; /* Pointer cursor */
	flex-shrink: 0; /* Prevent shrinking */
}

/* Theme switch toggle button */
.theme-switch i:before{
	content: ""; /* Empty content */
	display: block; /* Block display */
	opacity: 1; /* Full opacity */
	width: 1rem; /* Fixed width */
	height: 1rem; /* Fixed height */
	margin-top: -2px; /* Negative top margin */
	background-color: #fff; /* White background */
	box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26); /* Drop shadow */
	position: absolute; /* Absolute positioning */
	border-radius: 2rem; /* Circular shape */
	transition: all 0.2s; /* Smooth transition */
	left: 0; /* Initial position */
}

/* Dark theme toggle position */
.dark .theme-switch i:before{
	left: 0.5rem; /* Moved position for dark theme */
}

/* Loading spinner animation */
.loading-spin {
	animation-duration: .75s; /* Animation duration */
	transform-origin: center center; /* Rotation origin */
	animation-iteration-count: 1; /* Play once */
	animation-name: loading; /* Use loading keyframes */
}

/* Bouncing animation for children */
.loading-bounce > *{
	animation-duration: .75s; /* Animation duration */
	animation-name: bounce; /* Use bounce keyframes */
	animation-iteration-count: 1; /* Play once */
	animation-fill-mode: forwards; /* Keep final state */
	animation-delay: calc(var(--n) * 0.075s); /* Staggered delay */
	transform-origin: center center; /* Scale origin */
}

/* Progress bar */
.page-progress{
	position: fixed; /* Fixed position */
	z-index: 100000; /* High z-index */
	top: 0; /* Align to top */
	left: 0; /* Align to left */
	width: 0; /* Initial width */
	height: 2px; /* Fixed height */
	background-color: var(--color-primary); /* Primary color */
}

/* Loading state animations */
.page-loading .loading-spin{
	animation-iteration-count: infinite; /* Infinite rotation */
}

.page-loading .loading-bounce > * {
	animation-iteration-count: infinite; /* Infinite bounce */
}

/* Spinner element */
.spinner{
	display: inline-block; /* Inline block display */
    width: 1rem; /* Fixed width */
    height: 1rem; /* Fixed height */
    vertical-align: text-bottom; /* Bottom alignment */
    background-color: currentColor; /* Inherit color */
    border-radius: 50%; /* Circular shape */
    opacity: 0; /* Initially hidden */
    -webkit-animation: spinner .75s linear infinite; /* Webkit animation */
    animation: spinner .75s linear infinite; /* Standard animation */
}

/* Loading cursor */
.page-loading body,
.page-loading a{
	cursor: wait; /* Wait cursor */
}

/* Spinner animation keyframes */
@keyframes spinner {
  0% {
  	opacity: 0; /* Start hidden */
    transform: scale(0); /* Start small */
  }
  50% {
    opacity: 1; /* Full opacity */
    transform: scale(0.5); /* Half size */
  }
  100% {
  	opacity: 0; /* End hidden */
    transform: scale(1); /* Full size */
  }
}

/* Loading rotation animation */
@keyframes loading {
  0% {
    transform: translateZ(0) rotate(0deg); /* Start rotation */
  }
  100% {
    transform: translateZ(0) rotate(359deg); /* Full rotation */
  } 
}

/* Bounce animation */
@keyframes bounce {
  0% {
    transform: scaleY(1); /* Normal height */
  }
  50% {
    transform: scaleY(0); /* Squished */
  }
  100% {
    transform: scaleY(1); /* Back to normal */
  }
}

/* refine */
.has-white-color{
	color: #fff !important;;
}
.has-black-color{
	color: #000 !important;;
}
.has-white-background-color{
	background-color: #fff !important;;
}
.has-black-background-color{
	background-color: #000 !important;;
}

.flex{
	width: 1%;
	flex: 1;
	min-width: 1rem;
}

.flex-sm-row{
	display: flex;
}

.separator{
	display: flex;
	height: 2rem;
}
.separator:before,
.separator:after{
	content: '';
	border-bottom: 1px solid rgba(156,160,170,0.2);
	width: 1%;
	height: 1rem;
	flex: 1;
}
.separator span{
	margin: 0 1rem;
	line-height: 2;
}

.wp-block-button__link{
    font-size: 0.875rem;
    padding: 0.8125rem 1.5rem;
    line-height: 1;
    box-shadow: 0 0 0 1px rgba(0,0,0,0);
    transition: all .3s ease-in-out;
}
.has-drop-cap{
	line-height: inherit;
}
.has-drop-cap:not(:focus):first-letter{
	float: left;
	font-size: 5.1em;
	line-height: .6;
	font-weight: inherit;
	margin-top: .15em;
	margin-right: .2em;
	text-transform: uppercase;
	font-style: inherit;
}
.has-drop-cap-2:not(:focus):first-letter{
	font-size: 3.2em;
	margin-right: .3em;
}
.has-drop-cap:after {
	content: "";
	display: table;
	clear: both;
}
ul, ol {
		padding-inline-start: 1.5rem;
		-webkit-padding-start: 1.5rem;
}
ul {
    list-style: disc;
}
ol {
    list-style: decimal;
}
.wp-block-pullquote blockquote,
blockquote{
	padding: 2rem 4rem !important;
	color: #333;
	background-color: var(--color-blockquote, #fff);
	border-radius: 1rem;
	border-width: 0;
	position: relative;
	font-family: Georgia, Cambria, "Times New Roman", Times, serif;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.025);
	margin-bottom: 3rem !important;
	font-style: italic;
}
blockquote p{
	font-size: 1.25rem;
}
blockquote:after{
	position: absolute;
	bottom: -1rem;
	left: 2rem;
	content: "";
	display: inline-block;
	border-width: 1rem 0 0 2rem;
	border-style: solid;
	border-color: var(--color-blockquote, #fff) transparent transparent;
}
blockquote.is-style-large:after,
blockquote.has-text-align-right:after{
	left: auto;
	right: 2rem;
	border-width: 1rem 2rem 0 0;
}
blockquote:before{
	content: '\201C';
	font-family: arial;
	position: absolute;
	left: 1rem;
	top: 4rem;
	font-size: 6rem;
	line-height: 0;
	opacity: 0.1;
	z-index: 1;
}
.wp-block-quote cite,
blockquote cite{
	display: block;
	color: #888;
	position: relative;
	bottom: -3rem;
	height: 0;
	margin: 0 !important;
}
blockquote p:last-of-type{
	margin-bottom: 0;
}
.wp-block-pullquote{
	border-width: 0;
	padding: 0 !important;
}
.wp-block-pullquote cite{
	text-align: left;
}
.wp-block-pullquote blockquote{
	border-top: 2px solid;
	border-color: inherit;
}
.wp-block-pullquote.is-style-solid-color{
	border-radius: 1rem;
}
.wp-block-pullquote.is-style-solid-color blockquote{
	max-width: 100%;
	background-color: transparent;
	border-width: 0;
}

mark, ins{
/* 	background-color: #fff9c0;*/
	color: #dddddd;
	text-decoration: none;
}
address{
	font-style: italic;
}

.wp-block-separator{
	border-color: rgba(150,160,170,0.2);
}
.wp-block-separator.is-style-dots:before{
	color: rgba(150,160,170,0.5);
}
.wp-block-cover-contain{
	background-size: contain;
	background-repeat: no-repeat;
	background-color: transparent;
}
.wp-block-cover-contain .wp-block-cover__inner-container{
	color: inherit;
}
.has-large-font-size,
.has-x-large-font-size{
	line-height: 1.05;
	letter-spacing: -0.015em;
}
.wp-block-image{
	margin-bottom: 2rem;
}
/* layout style */
.is-layout-flex{
	display: flex;
}
.is-content-justification-left{
	justify-content: flex-start;
}
.is-content-justification-center{
	justify-content: center;
}
.is-content-justification-right{
	justify-content: flex-end;
}
.is-vertical{
	flex-direction: column;
}
.is-content-justification-left.is-vertical{
	align-items: flex-start;
}
.is-content-justification-center.is-vertical{
	align-items: center;
}
.is-content-justification-right.is-vertical{
	align-items: flex-end;
}
.is-nowrap{
	flex-wrap: nowrap;
}

.with-padding{
	padding: var(--x-gap);
}
.with-padding-x{
	padding-left: var(--x-gap);
	padding-right: var(--x-gap);
}
.with-padding-y{
	padding-top: var(--x-gap);
	padding-bottom: var(--x-gap);
}
.with-column-gap{
	--column-gap: 1.5rem;
	gap: var(--column-gap);
}
.with-gap{
	gap: var(--x-gap);
}
.no-padding{
	padding: 0 !important;
}
.no-margin{
	margin: 0 !important;
}
.no-gap{
	gap: 0;
}
.wp-block-columns.alignfull p{
	margin-left: 2rem;
	margin-right: 2rem;
}
.wp-block-cover.no-padding .wp-block-cover__inner-container{
	width: 100%;
}
.wp-block-cover.has-background-dim{
	color: #fff;
}
.wp-block-group.has-background{
	margin-bottom: 0;
}
.is-style-squared a{
	border-radius: 0;
}
.single-post figure[style]{
	max-width: 100% !important;
}
/* container */
.container,
.container-wrap .wp-block-cover__inner-container,
.container-wrap .wp-block-group__inner-container,
.navigation,
.page-header,
.page-content,
.archive-header,
.archive-content,
.archive-footer,
.site-main > .comments-area,
.site-main > .entry > .entry-header-container,
.site-main > .entry > .entry-header,
.site-main > .entry > .entry-summary,
.site-main > .entry > .entry-footer,
.site-main > .entry > .post-thumbnail,
.site-main > .entry > .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
	width: calc(100% - var(--x-gap) * 2);
	max-width: var(--content-width);
	margin-left: auto;
  margin-right: auto;
}
.entry-content > .alignleft{
	margin-inline-end: var(--x-gap);
}
.entry-content > .alignright{
	margin-inline-start: var(--x-gap);
}
.entry-content > .alignwide{
	width: calc(100% - var(--x-gap) * 1);
	max-width: calc(var(--content-width) + 10vw);
	margin-left: auto;
  margin-right: auto;
}
.container-wrap{
	padding: 0 !important;
}
/* Main */
.error-404,
.not-found{
	padding: 5rem 0 5rem 0;
}
.error-404,
.not-found{
	text-align: center;
}
.error-404 h2{
	font-size: 9rem;
}
.error-404 .search-form,
.not-found .search-form{
	margin-left: auto;
	margin-right: auto;
	max-width: 280px;
	margin: 3rem auto;
}
.entry-header{
	margin-top: calc(var(--y-gap)*2);
}
.hide-title{
	display: none;
}
.entry-description{
	color: var(--text-secondary-color);
	margin-bottom: 1rem;
}
.entry-footer{
	margin-bottom: calc(var(--y-gap)*2);
}
.entry-artist a:after{
	display: none;
}
.entry-content > *{
	word-wrap: break-word;
	margin-bottom: var(--y-gap);
}
.search-title,
.archive-title{
	font-size: 1.25rem;
	margin-top: calc(var(--y-gap)*2);
	line-height: inherit;
}
.archive-description{
	color: var(--text-secondary-color);
}
.byline{
	display: inline-flex;
	align-items: center;
}
.byline .avatar{
	width: 24px;
	height: 24px;
}
.byline .avatar + .author-name:before,
.byline .svg-icon + .author:before{
	content: '';
	display: inline-block;
	width: 0.25rem;
}

.navigation .nav{
	overflow: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
}
.navigation .nav a{
	white-space: nowrap;
}

.page-navigation .nav{
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	padding-top: 2px;
	padding-bottom: 2px;
}

.user-navigation{
	margin-bottom: 1.5rem;
	font-weight: 600;
}
.user-navigation a span{
	font-size: 0.85em;
	margin-inline-start: 4px;
	-webkit-margin-start: 4px;
}
.user-navigation a span:empty{
	display: none;
}
.user-placeholder{
	text-align: center;
	padding: 3rem 0;
}
.user-placeholder p{
	margin-top: 1rem;
	color: var(--text-secondary-color);
}
.menu-mega .menu-item-has-children > a{
	font-weight: bold;
}
.menu-divider{
	border-top: 1px solid rgba(130,140,150,0.1);
}
/* Footer */
.site-footer{
	font-size: 0.875rem;
	position: relative;
}
.site-footer ul{
  list-style: none;
	margin: 0 0 1.5rem 0;
  padding: 0;
  line-height: 2;
}
.site-footer .site-info{
	margin-bottom: calc(var(--y-gap)*2);
}

.site-info{
	display: flex;
}
.site-info .site-copyright{
	font-size: 85%;
	margin-inline-start: auto;
	-webkit-margin-start: auto;
	margin-top: 1.25rem;
}

.sticky-top{
	position: -webkit-sticky;
    position: sticky;
    top: 6rem;
    z-index: 10;
}

/* archive */
.archive-content-column{
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: calc(var(--y-gap)*2);
	margin-top: calc(var(--y-gap)*2);
	margin-bottom: calc(var(--y-gap)*2);
}
.archive-content-column > h3{
	grid-column: 1/-1;
	margin-bottom: -0.5rem;
}
.archive-content-column > .entry{
	display: inline-block;
	width: 100%;
}
.archive-content-column .entry-header{
	margin-top: 0;
}
.archive-content-column .entry-title{
	font-size: 1.25rem;
}
.archive-content-column .block-loop-items{
	margin-bottom: 0;
}

.accordion p{
	display: none;
}
.accordion h3,
.accordion h4{
	display: flex;
	align-items: center;
	margin: 0;
	padding: 1.5rem 0;
}
.accordion h3 ~ h3,
.accordion h4 ~ h4{
	border-top: 1px solid var(--color-border);
}
.accordion h3:after,
.accordion h4:after{
	content: "";
	display: block;
	border: 0.35rem solid transparent;
  border-top-color: currentColor;
  border-bottom-width: 0;
  opacity: 0.5;
  margin-inline-start: auto;
  -webkit-margin-start: auto;
}
.accordion h3.open:after,
.accordion h4.open:after{
	transform: rotate(-180deg);
}

/* dark theme */
.dark,
.dark body{
	--text-color: #fff;
	--text-secondary-color: #aaa;
	--body-bg-color: #121212;
	--tooltip-color: var(--color-grey-500);
	--sub-menu-color: var(--color-grey-600);
}

.dark .site-header,
.dark .site-header .search-form,
.dark .site-sidebar,
.dark .plyr-playlist{
	background-color: inherit;
}
.dark #search-state:checked ~ .site-header .search-form,
.dark .entry-footer .user-bio,
.dark .modal-content,
.dark .dropdown-menu,
.dark .wp-block-code,
.dark .wp-block-table.is-style-stripes tbody tr:nth-child(odd),
.dark .nav-links .prev:before,
.dark .nav-links .next:before,
.dark .nav-links .nav-previous:before,
.dark .nav-links .nav-next:before,
.dark .button:not(.button-primary){
	color: #fff;
	background-color: var(--color-grey-600);
}
.dark .dark-white,
.dark .tags a,
.dark .entry-tag a{
	color: #fff;
	background-color: var(--color-grey-500);
}
.dark .dark-white .has-white-background-color{
	background-color: var(--color-grey-500) !important;
}

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6,
.dark .dark-white .wp-block-cover__inner-container,
.dark .dropdown-menu .dropdown-item{
	color: inherit;
}
.dark .input,
.dark input:not([type='range']):not([type='button']):not([type='submit']):not([type='reset']):not([type='checkbox']):not([type='radio']),
.dark select,
.dark textarea,
.dark .button-primary,
.dark input[type="checkbox"],
.dark input[type="radio"]{
	background-color: transparent;
	color: #f1f1f1;
}

/* theme color */
.text-primary,
.text-primary:hover,
.site-logo,
.button-primary,
.button-primary,
input.button-primary, 
button.button-primary:hover, 
input.button-primary:hover, 
.btn-follow, 
.btn-like.active,
.album-track.active .icon-play,
.user-navigation a span,
input[type="checkbox"]:checked, 
input[type="radio"]:checked{
/*     color: var(--color-primary); */
	color: #cdcdcdcf;
}
.text-primary:hover{
	text-decoration: underline;
}

[data-plyr="like"] .icon--pressed,
.btn-like.active svg{
    stroke: var(--color-primary);
    fill: var(--color-primary);
}

input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):focus,
select:focus,
textarea:focus,
.dropdown-toggle.button:hover,
.waveform .waveform-container{
 /*   border-color: var(--color-primary);*/
	border-color: #5f5f5f;
}
.theme-color i,
.nav li.btn-link a,
.btn-primary a{
    color: #fff !important;
    background-color: var(--color-primary) !important;
}
.is--repeat svg,
.is--shuffle svg{
    fill: var(--color-primary);
}

.wp-block-loop:not(.block-loop-row) .btn-like.active svg{
    stroke: currentColor;
    fill: currentColor;
}
.progress-bar,
.block-loop-hover .block-loop-item:hover, 
.block-loop-hover .block-loop-item.active{
    background-color: var(--color-primary);
}
.block-loop-hover .block-loop-item:hover .post-thumbnail:after, 
.block-loop-hover .block-loop-item.active .post-thumbnail:after{
    background-color: var(--color-primary);
    background: linear-gradient(180deg, rgba(0,0,0,0.2), var(--color-primary));
}

.user-description a,
.entry-content > p a,
.entry-content > table a,
.entry-content > dl a,
.entry-content > ul a,
.entry-content > ol a,
.station-content a{
/*	color: var(--color-secondary); */
	color: #e1e1e1;
}

/* page animate */
.backdrop{
	transform: translate3d(0, 0, 0);
  transform-origin: top right;
  position: fixed;
  z-index: 980;
  top: 0;
  right: 0;
  left: 0;
  height: 0;
  display: flex;
	background-color: inherit;
  transition: transform 0.2s cubic-bezier(0.32, 0.08, 0.24, 1);
  transition-delay: 0.3s;
}
.backdrop i{
	display: flex;
	flex: 1;
	flex-shrink: 0;
	background-color: inherit;
	background-clip: padding-box;
}
.backdrop i:before,
.backdrop i:after{
	flex: 1;
	flex-shrink: 0;
	background-color: inherit;
	content: "";
	display: block;
	height: 100vh;
	transform: translate3d(0, 0, 0) scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s cubic-bezier(0.32, 0.08, 0.24, 1);
  transition-delay: 1;
  border-left: 1px solid rgba(150,160,170,0.1);
}
.page-loading .backdrop i:before,
.page-loading .backdrop i:after{
	/*transform: translate3d(0, 0, 0) scaleX(1);
	transform-origin: left center;*/
}
.entry-header-container > .entry-header .entry-title{
	clip-path: polygon(0 0, 100% 0, 100% 120%, 0 120%);
  transform: translate3d(0, 0, 0);
  transition: clip-path cubic-bezier(0.075,.82,.165,1) 1s;
  transition-delay: 0.35s;
}
.page-animate.page-animating .featured-image .entry-header-container > .post-thumbnail{
  opacity: 0;
  transition-delay: 0s;
  transform: translate3d(0, 0, 0);
}
.page-animate.page-animating .entry-header-container > .entry-header .entry-title{
  clip-path: polygon(0 0,0 0,0 120%,0 120%);
  transition-delay: 0s;
}

/* mobile */
.mobile-menu{
	position: fixed;
  bottom: 0;
  background-color: inherit;
  z-index: 1000;
  width: 100%;
  height: var(--mobile-menu-height);
  overflow-y: hidden;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  transition: transform 0.2s;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 -1px 0 rgba(130,140,150,0.1);
  background-clip: padding-box;
  display: none;
}
.mobile-menu::-webkit-scrollbar{
	display: none;
}
.mobile-menu .nav{
	display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--mobile-menu-font-size);
  min-height: var(--mobile-menu-height);
}
.mobile-menu .nav li{
	flex: 1 1;
}
.mobile-menu .nav li > a{
	display: flex;
	flex-direction: column;
	align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.mobile-menu .nav li > a span{
	margin: 0;
	line-height: 1;
}
.mobile-menu .nav li.hide-text a{
	max-width: 30px;
	margin: 0 auto;
}
.mobile-menu .nav a > svg{
	width: var(--mobile-menu-icon-width);
	height: var(--mobile-menu-icon-height);
	color: inherit;
	display: block;
}
.mobile-menu li.current_page_item > a,
.mobile-menu li.current-menu-item > a{
	color: var(--color-primary);
}
.mobile-menu .menu-item-has-children > a:after{
	display: none;
}
/* simple wp member */
.swpm-login-widget-form input[type="text"],
.swpm-login-widget-form input[type="password"],
.swpm-pw-reset-widget-form input[type="text"],
.swpm-validate-form input[type="text"], 
.swpm-validate-form input[type="password"]{
	width: 100%;
}
input.swpm-buy-now-button-submit{
	min-width: 10rem;
	justify-content: center;
	color: #fff;
	background-color: var(--color-primary);
}
.swpm-validate-form table{
	margin-bottom: 0;
}
.swpm-password-input,
.swpm-validate-form td{
	position: relative;
}
.swpm-validate-form th,
.swpm-validate-form td{
	display: block;
	border: none;
	padding: 0;
}
.swpm-validate-form tr{
	display: block;
	margin-bottom: 1rem;
}
.swpm-edit-profile-submit-section,
.swpm-registration-submit-section{
	text-align: inherit !important;
}
.swpm-remember-me{
	margin-bottom: 1rem;
}
.swpm-registration-widget-form .formError{
	display: none !important;
}
.formError .formErrorArrow div,
.formError .formErrorContent{
	box-shadow: none !important;
	border: none !important;
}
/* responsive */
@media (min-width: 360px){
	.site-header .secondary-menu{
		display: block;
	}
	.site-header .nav > li.menu-has-icon{
		min-width: 2.5rem;
		justify-content: center;
	}
}

@media (max-width: 359px){
	.user-info,
	.user-meta{
		display: block;
	}
}

@media (min-width: 600px){
	.site-header .search-form{
		margin: 0 1rem;;
	}
	.archive-content-column{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 599px){
	.mobile-menu{
		display: block;
	}
	.with-mobile-menu{
		--mobile-menu-height: 3rem;
	}
	.plyr-playlist{
		bottom: var(--mobile-menu-height);
	}
	.site-header .search-form{
		flex: inherit;
		margin: 0 0.5rem;
		background-color: transparent;
		padding: 0;
		margin: 0;
	}
	.site-header .search-form input{
		display: none;
	}
	.site-header .flex ~ .flex{
		display: none;
	}
	.comment-list .children .children .comment{
		margin-left: 0;
		margin-right: 0;
	}
	.hide-sm{
		display: none;
	}
	.no-float-sm{
		float: none;
	}
	.align-center-sm,
	.text-center-sm{
		text-align: center;
		justify-content: center !important;
	}
	.wp-block-columns.column-sm-2 > .wp-block-column {
	    flex-basis: calc(50% - var(--column-gap)) !important;
	}
	.wp-block-columns.column-sm-1 > .wp-block-column {
	    flex-basis: 100% !important;
	}
}

@media (max-width: 781px){
	h1.entry-title{
		font-size: 2rem;
	}
	.site-brand{
		min-width: auto;
	}
	.admin-bar .site-header{
		top: 0;
		position: relative;
	}
	.admin-bar .site-sidebar{
		top: 0;
		z-index: 100000;
	}
	.admin-bar .site-content{
		margin-top: 0;
	}
	.site-sidebar{
		transform: translate3d(var(--offcanvas), 0, 0);
	}
	.site-sidebar .site-brand{
		display: flex;
		align-items: center;
	}
	#menu-state:checked ~ .site-header .menu-toggle {
	    background-color: rgba(0,0,0,0.5);
	    position: fixed;
	    z-index: 990;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 100%;
	}
	#menu-state:checked ~ .site-sidebar{
		top: 0;
		padding-top: 0;
		z-index: 100000;
		transform: none !important;
		width: 300px;
	}
	.site-header .menu-avatar > a > span:not(.avatar),
	.site-header .nav > .menu-has-icon > a > span{
		display: none;
	}
	.site-header .menu-has-icon.btn-link a{
		padding-left: 0;
		padding-right: 0;
		min-width: 30px;
		text-align: center;
		justify-content: center;
	}
	#icon-nav{
		display: block;
		padding: 0 0.5rem;
		font-size: 12px;
		min-height: var(--navbar-height);
		line-height: var(--navbar-height);
	}
	.site-header .secondary-menu .nav{
		padding: 0;
		border-radius: 0;
		min-width: 10rem;
		display: block;
		opacity: 0;
		transform: translate3d(0, 2rem, 0);
		transition: opacity .5s 0.25s cubic-bezier(0.52, 0.16, 0.24, 1), transform .5s 0.25s cubic-bezier(0.52, 0.16, 0.24, 1);
	}
	.site-header .secondary-menu .nav li{
		flex-direction: column;
		align-items: stretch;
	}
	.site-header .secondary-menu .nav a{
		padding: 0.75rem 1rem;
	}
	.site-header .secondary-menu > div > .nav > li > a{
		border-top: 1px solid rgba(140,150,160,0.1);
	}
	.site-header .secondary-menu > div{
		height: 0;
		overflow: hidden;
		position: absolute;
		right: 0;
		left: 0;
		top: 100%;
		background-color: var(--sub-menu-color, #fff);
    	transition: height .35s cubic-bezier(0.52, 0.16, 0.24, 1);
    	-webkit-overflow-scrolling: touch;
	    overflow: -moz-scrollbars-none;
	    -ms-overflow-style: none;
	}
	.site-header .secondary-menu.current-menu-ancestor > div{
		height: calc(100vh - var(--navbar-height));
		overflow-y: auto;
		padding-bottom: 4rem;
	}
	.site-header .secondary-menu.current-menu-ancestor .nav{
		opacity: 1;
		transform: none;
	}
	.site-header .secondary-menu .sub-menu{
		transform: none;
		position: static;
		padding: 0;
		box-shadow: none;
		left: 0;
	}
	.site-header .secondary-menu .menu-item-has-children > a:after{
		margin-inline-start: auto;
		-webkit-margin-start: auto;
	}
	.nav-links .prev span, 
	.nav-links .next span{
		display: none;
	}
	.hide-md{
		display: none;
	}
	.wp-block-columns.column-md-2 > .wp-block-column {
	    flex-basis: calc(50% - var(--column-gap)) !important;
	}
	.wp-block-columns.column-md-1 > .wp-block-column {
	    flex-basis: 100% !important;
	}
}

@media (max-width: 991px){
	.wp-block-columns.column-lg-2 > .wp-block-column {
	    flex-basis: calc(50% - var(--column-gap)) !important;
	}
	.wp-block-columns.column-lg-1 > .wp-block-column {
	    flex-basis: 100% !important;
	}
}

@media (max-width: 1200px){
	.wp-block-columns[class*="column-"]{
		flex-wrap: wrap !important;
	}
	.wp-block-columns.column-xl-1 > .wp-block-column {
	    flex-basis: 100% !important;
	}
	.wp-block-columns.column-xl-2 > .wp-block-column {
	    flex-basis: calc(50% - var(--column-gap)) !important;
	}
}

@media (min-width: 782px){
	.site-sidebar ~ .site-content,
	.site-sidebar ~ .site-footer{
		margin-inline-start: var(--side-width);
		-webkit-margin-start: var(--side-width);
	}
	#menu-state:checked ~ .site-content,
	#menu-state:checked ~ .site-footer{
		margin-left: 0;
		margin-right: 0;
	}
	#menu-state:checked ~ .site-sidebar .hide-menu-folded{
		display: none;
	}

	.hide-sidenav ~ .site-sidebar{
		transform: translate3d(var(--offcanvas), 0, 0);
	}
	.hide-sidenav ~ .site-content,
	.hide-sidenav ~ .site-footer{
		margin-left: 0;
		margin-right: 0;
	}
	#menu-state.hide-sidenav:checked ~ .site-sidebar{
		transform: none;
	}
	#menu-state.hide-sidenav:checked ~ .site-content,
	#menu-state.hide-sidenav:checked ~ .site-footer{
		margin-inline-start: var(--side-width);
		-webkit-margin-start: var(--side-width);
	}

	.site-header .search-form{
		margin: 0 2rem;
		max-width: 35rem;
	}
	.menu-mega .sub-menu .sub-menu{
		display: block;
		position: static;
		padding: 0;
		box-shadow: none;
	}
	.menu-mega:hover > .sub-menu,
	.menu-mega.active > .sub-menu{
		display: flex !important;
		flex-wrap: wrap;
		width: 21rem;
	}
	.menu-mega > .sub-menu > li{
		width: 10rem;
	}
	.menu-mega-3 > .sub-menu{
		width: 31rem !important;
	}
	.menu-mega-4 > .sub-menu{
		width: 41rem !important;
	}
	#commentform{
		display: flex;
		flex-wrap: wrap;
	}
	.comment-form-cookies-consent,
	.comment-message{
		width: 100%;
	}
	.comment-form .comment-form-author, 
	.comment-form .comment-form-email,
	.comment-form .comment-form-url{
		width: calc(33.33% - 0.75rem);
	}
	.comment-form .comment-form-email {
		width: calc(33.33% + 1.5rem);
	    padding: 0 1rem;
	}
	.has-medium-gap{
		gap: 4rem;
	}
	.nav .menu-item-has-children.no-toggle > a:after{
		display: none;
	}
}

@media (min-width: 992px){
	h1, .h1{
		font-size: 3rem;
	}
	.with-sidebar .content-area,
	.with-sidebar .entry-content-wrap{
		display: flex;
	}
	.with-sidebar .site-main,
	.with-sidebar .entry-content-inner{
		flex: 1;
		width: 1%;
	}
	.sidebar{
	    flex-shrink: 0;
	    width: var(--sidebar-width);
	    margin-inline-start: 2rem;
	    -webkit-margin-start: 2rem;
	}
	.content-area > .sidebar{
		margin: 0;
		margin-inline-end: 2rem;
		-webkit-margin-end: 2rem;
	}
	.with-sidebar .entry-content-inner .wp-block-loop:not(.block-loop-row){
		--loop-columns: 3;
	}
}

@media (min-width: 1660px){
	#menu-state:checked ~ .site-content{
		--side-width: 0rem;
	}
	.site-header .site-brand + .flex{
		flex: 2;
	}
	.entry-content > .alignleft{
		position: absolute;
		right: calc(( 100vw - var(--content-width) - var(--side-width) ) / 2 + var(--content-width));
    	margin-left: -13rem;
    	max-width: 11rem;
    	height: auto;
	}
	.entry-content > .alignright{
		position: absolute;
		left: calc(( 100vw - var(--content-width) + var(--side-width) ) / 2 + var(--content-width));
    	margin-right: -13rem;
    	max-width: 11rem;
    	height: auto;
	}
}

/* Category pages and Sidebar styling */

/* Parent container for grid layout, takes up full viewport height */
.custom-product-category-page {
    display: grid;
    grid-template-columns: 200px 1fr; /* Sidebar at 200px, content takes the rest */
    min-height: 100vh; /* Full viewport height */
    box-sizing: border-box;
}

/* Sidebar styling, sticks to the top of the viewport, full viewport height, independent scrolling */
.product-category-sidebar {
    background-color: #252525;
    position: sticky;
    top: 0; /* Stick to the top of the viewport */
    height: 100vh; /* Full viewport height */
    overflow-y: auto; /* Independent scrolling */
    box-sizing: border-box;
    z-index: 1;
    
    /* Modern Scrollbar Styling */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #494949 #242424; /* Firefox */
}

/* Webkit (Chrome, Safari, Edge) scrollbar styling */
.product-category-sidebar::-webkit-scrollbar {
    width: 7px;
}

.product-category-sidebar::-webkit-scrollbar-track {
    background: #242424;
}

.product-category-sidebar::-webkit-scrollbar-thumb {
    background-color: #494949;
    border-radius: 10px;
}

/* Hidden scrollbar by default, visible on hover with thinner appearance and rounded corners */
.product-category-sidebar {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.product-category-sidebar::-webkit-scrollbar {
    width: 0; /* Chrome, Safari, Opera */
    display: none;
}

.product-category-sidebar:hover {
    scrollbar-width: thin; /* Firefox */
    -ms-overflow-style: auto; /* IE and Edge */
}

.product-category-sidebar:hover::-webkit-scrollbar {
    width: 7px;
    display: block;
}

.product-category-sidebar:hover::-webkit-scrollbar-thumb {
    background-color: rgb(73, 73, 73);
    border-radius: 10px;
}

.product-category-sidebar:hover::-webkit-scrollbar-track {
    background-color: #242424;
}



/* Main content and footer area styling */
.main-content-and-footer {
    display: flex; /* Flex container for main content and footer */
    flex-direction: column; /* Stack items vertically */
    box-sizing: border-box; /* Include padding and border in element's total width and height */
}

/* Main content styling */
.product-category-main-content {
    padding: 20px; /* Top and bottom padding for main content */
    box-sizing: border-box; /* Include padding and border in element's total width and height */
    overflow-y: auto; /* Independent scrolling for main content */
}

/* Footer styling */
.product-category-footer {
    background-color: #121212; /* Dark grey footer background color */
    padding: 20px; /* Top and bottom padding for footer */
    text-align: center; /* Centered text in footer */
    box-sizing: border-box; /* Include padding and border in element's total width and height */
}

/* Truendo text colour */
p.tru_cookie-dialog_message.mdc-typography--body2 {
    color: white !important;
}

h1.mdc-typography--headline5   {
    color: white !important;
}

/* ===========================================================================
   SEARCH BUTTON LANDING ON THE WORDMARK ON MOBILE  (20 August 2026)

   Below 600px the theme hides the search input:

       @media (max-width: 599px){
           .site-header .search-form { flex: inherit; padding: 0; margin: 0; }
           .site-header .search-form input { display: none; }
       }

   #icon-search is position:absolute, so once the input is gone the form has no
   in-flow children and collapses to 0 x 0. The button is anchored
   left:-50px / right:2px against that zero-width form, which resolves to
   width 48px at 50px to the LEFT of the form's origin. Measured at 390px it
   rendered at x 110-158, y 34-50, sitting across the bottom of the SONNISS
   wordmark (x 91-156, y 21-42) and covering 368px2, about 27% of it.

   It is not a z-index problem and the button is not decorative: on mobile it
   is the ONLY route to search. There is no label[for="search-state"] anywhere
   in the theme, so the checkbox toggle is unreachable on a phone and tapping
   this button submits the form with an empty s, landing on /?s= which is the
   search page. So it must MOVE, not be hidden.

   Fix: below 600px let the button sit in the navbar flex row as a normal
   static item instead of escaping a zero-width container. The form then sizes
   to the button (48px) and lands in the empty gap after the brand, which the
   flexible .flex spacer simply gives up. Measured after: button at x 165-213,
   zero overlap with the wordmark, logo, hamburger, secondary menu or cart, and
   the tap target doubles from 48x16 to 48x32.

   The open state is left exactly as the theme has it: when #search-state is
   checked the form goes full-width absolute and the button returns to
   position:absolute at the right-hand end of the input.

   Verified 320 / 360 / 390 / 480 / 599 fixed, and 600 byte-identical with and
   without this block, so the desktop search bar is untouched.
   =========================================================================== */

@media (max-width: 599px) {

    .site-header .search-form {
        margin-left: 0.35rem;          /* separate the icon from the wordmark */
    }

    .site-header .search-form #icon-search {
        position: static;              /* stop it escaping the collapsed form */
    }

    /* Search open: hand both back to the theme's own rules. */
    #search-state:checked ~ .site-header .search-form {
        margin-left: 0;
    }
    #search-state:checked ~ .site-header .search-form #icon-search {
        position: absolute;
    }
}