/**
 * Custom Shop & Categories Styles.
 *
 * Applies custom styling to WooCommerce shop and category pages.
 *
 * @package Astra
 */

/* ============================================================
   Breadcrumbs Spacing
   ============================================================ */

/* Directly control breadcrumbs top spacing */
.ast-breadcrumbs-wrapper,
.woocommerce-breadcrumb {
	margin-top: var(--klyna-shop-breadcrumbs-top-spacing, 40px) !important;
}

/* ============================================================
   Breadcrumbs Visibility
   ============================================================ */

/* Hide breadcrumbs on mobile if disabled */
@media (max-width: 767px) {
	.ast-breadcrumbs-wrapper,
	.woocommerce-breadcrumb {
		display: var(--klyna-shop-breadcrumbs-show-mobile, block) !important;
	}
}

/* Hide breadcrumbs on desktop if disabled */
@media (min-width: 768px) {
	.ast-breadcrumbs-wrapper,
	.woocommerce-breadcrumb {
		display: var(--klyna-shop-breadcrumbs-show-desktop, block) !important;
	}
}

/* ============================================================
   Mobile Product Title Truncation
   ============================================================ */

@media (max-width: 767px) {

	/* Product title in grid/list view */
	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
		/* Use CSS variable for number of lines, default 4 */
		display: -webkit-box;
		-webkit-line-clamp: var(--klyna-shop-title-lines-mobile, 4);
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.4;
		max-height: calc(1.4em * var(--klyna-shop-title-lines-mobile, 4)); /* Fallback for browsers without -webkit-line-clamp */
	}
	
	/* Ensure the product card layout accommodates the truncated title */
	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product {
		/* Allow image to take more space since title is now truncated */
		display: flex;
		flex-direction: column;
	}
	
	.woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
	.woocommerce-page ul.products li.product .astra-shop-thumbnail-wrap {
		/* Ensure image has proper space */
		flex: 0 0 auto;
		margin-bottom: 10px;
	}
}

/* ============================================================
   Category Description Truncation
   ============================================================ */

/* Wrapper for category description with toggle functionality */
.klyna-term-description-wrapper {
	position: relative;
}

/* Truncated state */
.klyna-term-description-wrapper.klyna-desc-truncated .term-description {
	display: -webkit-box;
	-webkit-line-clamp: var(--klyna-shop-desc-lines-desktop, 0);
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.6;
}

/* Mobile truncation */
@media (max-width: 767px) {
	.klyna-term-description-wrapper.klyna-desc-truncated .term-description {
		-webkit-line-clamp: var(--klyna-shop-desc-lines-mobile, 3);
		max-height: calc(1.6em * var(--klyna-shop-desc-lines-mobile, 3));
	}
}

/* Expanded state - show full description */
.klyna-term-description-wrapper.klyna-desc-expanded .term-description {
	display: block;
	-webkit-line-clamp: unset;
	max-height: none;
}

/* Toggle button styling */
.klyna-desc-toggle {
	display: inline-block;
	margin-left: 4px;
	color: var(--ast-global-color-2, #1a2b4c);
	text-decoration: underline;
	cursor: pointer;
	font-size: inherit;
	font-weight: 500;
	transition: color 0.2s ease;
}

.klyna-desc-toggle:hover {
	color: var(--ast-global-color-1, #e02b2b);
}

/* ============================================================
   Category Description Accordion
   ============================================================ */

.klyna-category-accordion {
	clear: both;
	width: 100%;
	margin-top: 30px;
	border: 1px solid var(--ast-border-color, #e0e0e0);
	border-radius: var(--ast-border-radius, 8px);
	overflow: hidden;
	background: var(--ast-global-bg-color, #fff);
}

/* The result count is moved right before the accordion via PHP hooks and
   defaults to float: left in WooCommerce's own CSS. Clear it so it doesn't
   shrink/float alongside the following elements. */
.woocommerce-result-count {
	float: none;
	clear: both;
	display: block;
	width: 100%;
}

.klyna-accordion-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 20px;
	background: var(--ast-global-bg-alt, #f8f9fa);
	cursor: pointer;
	transition: background 0.2s ease;
}

.klyna-accordion-header:hover {
	background: var(--ast-global-bg-alt-hover, #f0f1f2);
}

.klyna-accordion-title {
	font-weight: var(--ast-font-weight-heading, 600);
	font-size: var(--ast-font-size-body, 1rem);
	font-family: var(--ast-global-font-family, inherit);
	color: var(--ast-global-color-2, #1a2b4c);
}

.klyna-accordion-icon {
	width: 20px;
	height: 20px;
	transition: transform 0.3s ease;
	position: relative;
}

/* Down arrow */
.klyna-icon-down::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 8px solid var(--ast-global-color-2, #1a2b4c);
}

/* Up arrow when collapsed (closed) */
.klyna-category-accordion:not(.klyna-accordion-open) .klyna-accordion-icon {
	transform: rotate(180deg);
}

.klyna-accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out;
}

.klyna-category-accordion.klyna-accordion-open .klyna-accordion-content {
	max-height: 1000px;
	transition: max-height 0.5s ease-in;
}

.klyna-accordion-content .term-description {
	padding: 20px;
	line-height: var(--ast-content-line-height, 1.6);
	color: var(--ast-global-color-3, #333);
	font-family: var(--ast-global-font-family, inherit);
	font-size: var(--ast-font-size-body, inherit);
}

/* ============================================================
   Custom Sort Dropdown
   Colors/font inherit from Astra's own global CSS variables —
   nothing new is introduced here.
   ============================================================ */

/* Visually hide the native select but keep it functional/in the DOM. */
.klyna-sort-select-native {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.klyna-sort-dropdown {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	width: auto;
	max-width: 320px;
	font-family: var(--ast-global-font-family, inherit);
	font-size: var(--ast-font-size-body, inherit);
	color: var(--ast-global-color-3, inherit);
}

.klyna-sort-label {
	flex-shrink: 0;
	white-space: nowrap;
	cursor: pointer;
}

.klyna-sort-trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 12px;
	background: var(--ast-global-bg-color, #fff);
	border: 1px solid var(--ast-border-color, #e0e0e0);
	border-radius: var(--ast-border-radius, 4px);
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	line-height: 1.4;
}

.klyna-sort-trigger:hover {
	background: var(--ast-global-bg-alt, #f8f9fa);
}

.klyna-sort-value {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left;
	font-weight: var(--ast-font-weight-heading, 600);
}

.klyna-sort-arrow {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	position: relative;
	transition: transform 0.2s ease;
}

.klyna-sort-arrow::before {
	content: '';
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid var(--ast-global-color-3, currentColor);
}

.klyna-sort-dropdown.klyna-sort-open .klyna-sort-arrow {
	transform: rotate(180deg);
}

.klyna-sort-list {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 20;
	width: 100%;
	min-width: 200px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: var(--ast-global-bg-color, #fff);
	border: 1px solid var(--ast-border-color, #e0e0e0);
	border-radius: var(--ast-border-radius, 4px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.klyna-sort-option {
	padding: 8px 14px;
	cursor: pointer;
	white-space: nowrap;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

.klyna-sort-option:hover {
	background: var(--ast-global-bg-alt, #f8f9fa);
}

.klyna-sort-option-active {
	color: var(--ast-global-color-1, inherit);
	font-weight: var(--ast-font-weight-heading, 600);
}