/*
|--------------------------------------------------------------------------
| Bargchi Product Category — WORKING V1.2
|--------------------------------------------------------------------------
| Keeps the original working WooCommerce/WoodMart hook architecture.
| Current stage: category header only.
|--------------------------------------------------------------------------
*/

body.bargchi-product-category-page {
	--bc-navy: #102f5b;
	--bc-navy-2: #173d6d;
	--bc-orange: #ed6a20;
	--bc-text: #24364c;
	--bc-muted: #7d8998;
	--bc-line: #e4eaf1;
	--bc-soft: #f7f9fc;

	background: var(--bc-soft);
}


/* ==========================================================================
   Hide WoodMart's duplicate archive title / breadcrumb
   ========================================================================== */

body.bargchi-product-category-page .wd-page-title,
body.bargchi-product-category-page .wd-page-title-el,
body.bargchi-product-category-page .wd-title-bar,
body.bargchi-product-category-page .woocommerce-products-header__title,
body.bargchi-product-category-page .woocommerce-breadcrumb,
body.bargchi-product-category-page .wd-breadcrumbs,
body.bargchi-product-category-page .woodmart-breadcrumbs {
	display: none !important;
}


/* ==========================================================================
   Current design phase: NOTHING below our category header
   Products, toolbar, filters and sidebar will be designed later.
   ========================================================================== */

body.bargchi-category-header-only .sidebar-container,
body.bargchi-category-header-only .area-sidebar-shop,
body.bargchi-category-header-only .shop-sidebar,
body.bargchi-category-header-only .wd-sidebar,
body.bargchi-category-header-only aside.sidebar-widget-area,
body.bargchi-category-header-only .wd-filter-buttons,
body.bargchi-category-header-only .woodmart-show-sidebar-btn,
body.bargchi-category-header-only .wd-open-sidebar,
body.bargchi-category-header-only .filters-area,
body.bargchi-category-header-only .shop-loop-head,
body.bargchi-category-header-only .woocommerce-result-count,
body.bargchi-category-header-only .woocommerce-ordering,
body.bargchi-category-header-only .wd-products-per-page,
body.bargchi-category-header-only .wd-products-shop-view,
body.bargchi-category-header-only .wd-products,
body.bargchi-category-header-only ul.products,
body.bargchi-category-header-only .products,
body.bargchi-category-header-only .woocommerce-pagination,
body.bargchi-category-header-only .woocommerce-no-products-found,
body.bargchi-category-header-only .woocommerce-info,
body.bargchi-category-header-only .wd-products-footer,
body.bargchi-category-header-only .products-footer {
	display: none !important;
}

body.bargchi-category-header-only .shop-content-area,
body.bargchi-category-header-only .site-content,
body.bargchi-category-header-only .content-with-products,
body.bargchi-category-header-only .main-page-wrapper .site-content {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
}




/* ==========================================================================
   REMOVE LEGACY ELEMENTOR / WOODMART CATEGORY ARCHIVE COLUMNS
   --------------------------------------------------------------------------
   These are the two old archive columns identified in the live DOM:
   - a15f674 = old main archive content / duplicate title area
   - 955734  = old category sidebar / off-canvas column

   Scope is ONLY WooCommerce product-category pages.
   The approved Bargchi category header above is not touched.
   ========================================================================== */

body.bargchi-product-category-page .elementor-element-a15f674,
body.bargchi-product-category-page [data-id="a15f674"],
body.bargchi-product-category-page .elementor-element-955734,
body.bargchi-product-category-page [data-id="955734"] {
	display: none !important;
}

/*
 * Semantic WoodMart fallbacks for the same legacy archive row.
 * These are also category-page scoped, so Shop and other pages are untouched.
 */
body.bargchi-product-category-page .wd-col-content-md-sm,
body.bargchi-product-category-page .wd-col-offcanvas-md-sm {
	display: none !important;
}



/* ==========================================================================
   Category header distance from the main site header — ALL DEVICES
   ========================================================================== */

body.bargchi-product-category-page .main-page-wrapper {
	padding-top: 8px !important;
}

body.bargchi-product-category-page .main-page-wrapper > .container,
body.bargchi-product-category-page .main-page-wrapper > .container-fluid,
body.bargchi-product-category-page .site-content {
	margin-top: 0 !important;
}

/* ==========================================================================
   Main category header
   ========================================================================== */

body.bargchi-product-category-page #bargchi-category-head {
	display: block !important;

	/*
	 * Full-bleed category header:
	 * break only this section out of WoodMart/Elementor's boxed container.
	 * The inner content remains centered and limited to 1320px.
	 */
	width: 100vw !important;
	max-width: 100vw !important;
	margin-inline: calc(50% - 50vw) !important;
	padding: 0 !important;

	background: #fff;
	border-top: 1px solid #eef2f6;
	border-bottom: 1px solid var(--bc-line);
}

body.bargchi-product-category-page
#bargchi-category-head
.bargchi-category-head__inner {
	width: min(100%, 1320px);
	margin: 0 auto;
	padding: 20px 26px 22px;
}


/* Breadcrumb */

.bargchi-category-head__breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;

	margin: 0 0 9px;
	padding: 0;

	color: var(--bc-muted);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.8;
	text-align: right;
}

.bargchi-category-head__breadcrumb a {
	color: #7b8999;
	text-decoration: none;
	transition: color 150ms ease;
}

.bargchi-category-head__breadcrumb a:hover {
	color: var(--bc-navy);
}

.bargchi-category-head__breadcrumb-home {
	color: var(--bc-navy) !important;
	font-weight: 750 !important;
}

.bargchi-category-head__breadcrumb-separator {
	color: #b5bfca;
	font-size: 13px;
	line-height: 1;
}

.bargchi-category-head__breadcrumb-current {
	color: #596a7c;
	font-weight: 650;
}


/* Title */

body.bargchi-product-category-page
#bargchi-category-head
.bargchi-category-head__title {
	display: block !important;

	margin: 0;
	padding: 0;

	color: var(--bc-navy);
	font-size: clamp(25px, 2.05vw, 33px);
	font-weight: 900;
	line-height: 1.4;
	letter-spacing: -.4px;
	text-align: right;
}


/* Dynamic WooCommerce category description */

.bargchi-category-head__description {
	max-width: 1040px;
	margin-top: 10px;
	padding: 2px 12px 2px 0;

	color: #687789;
	font-size: 12.5px;
	font-weight: 450;
	line-height: 2;
	text-align: right;

	border-right: 2px solid var(--bc-orange);
	background: linear-gradient(
		to left,
		rgba(237, 106, 32, .055),
		rgba(237, 106, 32, 0) 72%
	);
	border-radius: 0 4px 4px 0;
}

.bargchi-category-head__description > *:first-child {
	margin-top: 0;
}

.bargchi-category-head__description > *:last-child {
	margin-bottom: 0;
}

.bargchi-category-head__description p {
	margin: 0 0 6px;
}

.bargchi-category-head__description a {
	color: var(--bc-navy-2);
	font-weight: 650;
	text-decoration: none;
}

.bargchi-category-head__description a:hover {
	color: var(--bc-orange);
}

.bargchi-category-head__description ul,
.bargchi-category-head__description ol {
	margin: 7px 0 0;
	padding-right: 19px;
}

.bargchi-category-head__description li {
	margin: 2px 0;
}


/* ==========================================================================
   Child-category carousel
   ========================================================================== */

.bargchi-category-nav {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) 32px;
	align-items: center;
	gap: 7px;

	width: 100%;
	margin-top: 17px;
}

.bargchi-category-nav__viewport {
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;

	padding: 2px 0;

	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x proximity;

	outline: none;
	cursor: grab;
}

.bargchi-category-nav__viewport.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	user-select: none;
}

.bargchi-category-nav__viewport::-webkit-scrollbar {
	display: none;
}

.bargchi-category-nav__track {
	display: flex;
	align-items: stretch;
	gap: 7px;

	width: max-content;
	min-width: 100%;
	padding: 1px;
}

.bargchi-category-nav__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 39px;
	padding: 8px 15px;

	color: #344d69 !important;
	background: #fff !important;
	border: 1px solid #dbe4ed !important;
	border-radius: 9px !important;

	font-size: 11px;
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none !important;
	white-space: nowrap;

	box-shadow: 0 1px 2px rgba(16, 47, 91, .025);
	scroll-snap-align: start;

	transition:
		color 150ms ease,
		background 150ms ease,
		border-color 150ms ease,
		box-shadow 150ms ease,
		transform 150ms ease;
}

.bargchi-category-nav__item:hover {
	color: var(--bc-navy) !important;
	background: #fbfdff !important;
	border-color: #b8cadc !important;
	box-shadow: 0 5px 15px rgba(16, 47, 91, .055);
	transform: translateY(-1px);
}


/* Carousel arrows — stronger reset against WoodMart button styles */

body.bargchi-product-category-page
#bargchi-category-head
.bargchi-category-nav__arrow {
	appearance: none !important;
	-webkit-appearance: none !important;

	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: 30px !important;
	height: 30px !important;
	min-width: 30px !important;
	min-height: 30px !important;
	margin: 0 !important;
	padding: 0 !important;

	color: #61748a !important;
	background: #fff !important;
	border: 1px solid #dde6ef !important;
	border-radius: 50% !important;

	box-shadow: 0 2px 7px rgba(16, 47, 91, .045) !important;

	font: inherit !important;
	line-height: 1 !important;

	cursor: pointer !important;

	transition:
		color 150ms ease,
		border-color 150ms ease,
		background 150ms ease,
		opacity 150ms ease,
		transform 150ms ease !important;
}

body.bargchi-product-category-page
#bargchi-category-head
.bargchi-category-nav__arrow:hover {
	color: var(--bc-navy) !important;
	background: #f9fbfd !important;
	border-color: #c4d2e0 !important;
	transform: scale(1.04);
}

body.bargchi-product-category-page
#bargchi-category-head
.bargchi-category-nav__arrow svg {
	display: block !important;
	width: 14px !important;
	height: 14px !important;

	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
}

body.bargchi-product-category-page
#bargchi-category-head
.bargchi-category-nav__arrow.is-hidden {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 1024px) {

	body.bargchi-product-category-page
	#bargchi-category-head
	.bargchi-category-head__inner {
		padding: 18px 20px 20px;
	}

	body.bargchi-product-category-page
	#bargchi-category-head
	.bargchi-category-head__title {
		font-size: 26px;
	}

	.bargchi-category-head__description {
		max-width: 900px;
		font-size: 12px;
		line-height: 1.95;
	}

	.bargchi-category-nav {
		grid-template-columns: 30px minmax(0, 1fr) 30px;
		gap: 6px;
		margin-top: 15px;
	}

	.bargchi-category-nav__item {
		min-height: 37px;
		padding: 8px 13px;
		font-size: 10.8px;
	}
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 767px) {

	body.bargchi-product-category-page
	#bargchi-category-head
	.bargchi-category-head__inner {
		padding:
			14px
			max(14px, env(safe-area-inset-right))
			16px
			max(14px, env(safe-area-inset-left));
	}

	.bargchi-category-head__breadcrumb {
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 5px;

		margin-bottom: 7px;

		font-size: 10px;
		white-space: nowrap;

		scrollbar-width: none;
	}

	.bargchi-category-head__breadcrumb::-webkit-scrollbar {
		display: none;
	}

	body.bargchi-product-category-page
	#bargchi-category-head
	.bargchi-category-head__title {
		font-size: 21px;
		line-height: 1.45;
		letter-spacing: -.2px;
	}

	.bargchi-category-head__description {
		margin-top: 8px;
		padding-right: 10px;
		font-size: 11.2px;
		line-height: 1.9;
	}

	/*
	 * Mobile UX:
	 * no tiny arrow buttons; native finger swipe owns the carousel.
	 */
	.bargchi-category-nav {
		display: block;
		margin-top: 13px;
	}

	body.bargchi-product-category-page
	#bargchi-category-head
	.bargchi-category-nav__arrow {
		display: none !important;
	}

	.bargchi-category-nav__viewport {
		width: calc(100% + 14px);
		margin-left: -14px;
		padding-left: 14px;
		cursor: default;
	}

	.bargchi-category-nav__track {
		min-width: max-content;
		gap: 6px;
		padding-left: 14px;
	}

	.bargchi-category-nav__item {
		min-height: 35px;
		padding: 7px 11px;

		border-radius: 8px !important;

		font-size: 10.3px;
		font-weight: 700;
	}
}

/* ==========================================================================
   Breadcrumb typography only
   - current page: 14px
   - all other breadcrumb items: 13px
   ========================================================================== */

body.bargchi-product-category-page
#bargchi-category-head
.bargchi-category-head__breadcrumb {
	font-size: 13px !important;
}

body.bargchi-product-category-page
#bargchi-category-head
.bargchi-category-head__breadcrumb a,
body.bargchi-product-category-page
#bargchi-category-head
.bargchi-category-head__breadcrumb-separator {
	font-size: 13px !important;
}

body.bargchi-product-category-page
#bargchi-category-head
.bargchi-category-head__breadcrumb-current {
	font-size: 14px !important;
}

/* ==========================================================================
   Remove WoodMart page vertical padding on product-category pages
   - Applies to all devices
   ========================================================================== */

body.bargchi-product-category-page .wd-content-layout {
	padding-block: 0 !important;
}