/*
 * Lukasik responsive desktop parity v1.2.0
 * Keeps the desktop grid, left OCFilter and full footer.
 * Extends the approved mobile colour system and interaction density.
 */

:root {
	--lk-rd-accent: #c58d4c;
	--lk-rd-accent-dark: #a86f32;
	--lk-rd-orange: #f47b2a;
	--lk-rd-orange-dark: #df681d;
	--lk-rd-active: #f7ddc4;
	--lk-rd-panel: #fef7f1;
	--lk-rd-panel-soft: #fffaf5;
	--lk-rd-border: #efdecc;
	--lk-rd-line: #ececec;
	--lk-rd-text: #343434;
	--lk-rd-muted: #858585;
	--lk-rd-focus: rgba(244, 123, 42, .28);
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

html body button,
html body a,
html body input,
html body select {
	touch-action: manipulation;
}

html body :where(a, button, input, select, textarea):focus-visible {
	outline: 3px solid var(--lk-rd-focus) !important;
	outline-offset: 2px !important;
}

/* Tablets use the proven inline catalogue/filter while preserving the grid. */
@media (min-width: 768px) and (max-width: 1024px) {
	html body main > .container {
		width: 100% !important;
		max-width: 100% !important;
		padding-right: 20px !important;
		padding-left: 20px !important;
	}

	html body #column-left,
	html body #column-right {
		display: none !important;
	}

	html body #content.col-md-6,
	html body #content.col-md-9,
	html body #content.col-md-12 {
		float: none !important;
		width: 100% !important;
	}

	html body #lk-mobile-filter-panel .ocf-content {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	html body #lk-mobile-filter-panel .ocf-body {
		position: relative !important;
		left: -10px !important;
		width: calc(100% + 20px) !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	html body #lk-mobile-filter-panel .ocf-filter-header {
		min-height: 48px !important;
		padding: 12px 24px !important;
	}

	html body #lk-mobile-filter-panel .ocf-filter-header .ocf-filter-name {
		color: #92571e !important;
		font-size: 16px !important;
		font-weight: 800 !important;
	}

	html body .lukasik-category-toolbar {
		max-width: 760px !important;
		margin-right: auto !important;
		margin-left: auto !important;
	}
}

/* Desktop visual parity. Structural columns and footer remain untouched. */
@media (min-width: 1025px) {
	html body {
		color: var(--lk-rd-text);
	}

	html body main > .container,
	html body .lk-header__shell {
		transition: width .2s ease, max-width .2s ease, padding .2s ease;
	}

	html body .lk-header {
		border-bottom: 1px solid rgba(239, 222, 204, .72) !important;
		box-shadow: 0 5px 20px rgba(82, 56, 28, .045) !important;
	}

	html body .lk-round,
	html body .lk-cart #cart > button {
		width: 44px !important;
		height: 44px !important;
		min-width: 44px !important;
		color: var(--lk-rd-text) !important;
		background: #fff !important;
		border: 1px solid var(--lk-rd-border) !important;
		border-radius: 14px !important;
		box-shadow: 0 4px 12px rgba(71, 48, 23, .07) !important;
	}

	html body .lk-search .header-search {
		border-color: var(--lk-rd-border) !important;
		box-shadow: 0 3px 12px rgba(71, 48, 23, .065) !important;
	}

	html body .lk-desktop-contact > i {
		color: var(--lk-rd-orange) !important;
		background: var(--lk-rd-panel) !important;
		border-color: var(--lk-rd-border) !important;
	}

	html body .breadcrumb-box {
		margin-bottom: 8px !important;
	}

	html body .breadcrumb {
		font-size: 13px;
	}

	html body :where(h1, .lk-category-heading) {
		color: var(--lk-rd-text);
		font-size: clamp(24px, 2vw, 34px);
		line-height: 1.2;
	}

	/* Approved mobile palette on the wide desktop toolbar. */
	html body .lukasik-category-toolbar {
		min-height: 64px !important;
		margin: 10px 0 20px !important;
		padding: 8px 10px !important;
		background: #fff !important;
		border: 1px solid var(--lk-rd-border) !important;
		border-radius: 20px !important;
		box-shadow: 0 8px 24px rgba(82, 56, 28, .055) !important;
	}

	html body .lukasik-toolbar-title {
		color: var(--lk-rd-accent-dark) !important;
		font-size: 15px !important;
		font-weight: 650 !important;
	}

	html body .lukasik-sort-option {
		height: 44px !important;
		min-width: 86px !important;
		padding: 0 14px !important;
		color: var(--lk-rd-muted) !important;
		font-size: 13px !important;
		background: #fff !important;
		border: 1px solid transparent !important;
		border-radius: 13px !important;
		box-shadow: none !important;
	}

	html body .lukasik-sort-option.active,
	html body .lukasik-sort-option.active:hover,
	html body .lukasik-sort-option.active:focus {
		color: var(--lk-rd-accent-dark) !important;
		background: #fdf4eb !important;
		border-color: #e8c89f !important;
		box-shadow: 0 3px 10px rgba(197, 141, 76, .09) !important;
	}

	html body .lukasik-limit-button,
	html body .lukasik-view-button {
		height: 44px !important;
		background: #fff !important;
		border-color: var(--lk-rd-border) !important;
		border-radius: 13px !important;
		box-shadow: 0 3px 10px rgba(71, 48, 23, .045) !important;
	}

	html body .lukasik-limit-button {
		min-width: 74px !important;
		padding: 0 13px !important;
		color: var(--lk-rd-text) !important;
		font-size: 13px !important;
	}

	html body .lukasik-view-button {
		width: 44px !important;
		min-width: 44px !important;
		max-width: 44px !important;
		color: #a0a0a0 !important;
	}

	html body .lukasik-view-button.active,
	html body .lukasik-view-button.active:hover,
	html body .lukasik-view-button.active:focus {
		color: var(--lk-rd-accent-dark) !important;
		background: var(--lk-rd-active) !important;
		border-color: var(--lk-rd-active) !important;
		box-shadow: none !important;
	}

	html body .lukasik-view-button.active svg,
	html body .lukasik-view-button.active svg * {
		color: var(--lk-rd-accent-dark) !important;
		stroke: currentColor !important;
	}

	html body .lukasik-limit-menu {
		border-color: var(--lk-rd-border) !important;
	}

	html body .lukasik-limit-menu > li.active .btn-limit-link,
	html body .lukasik-limit-menu .btn-limit-link:hover {
		color: var(--lk-rd-accent-dark) !important;
		background: var(--lk-rd-active) !important;
	}

	/* Left OCFilter: same hierarchy, colour and section behaviour as mobile. */
	html body #column-left {
		padding-right: 12px !important;
	}

	html body #column-left .ocf-container {
		display: block !important;
		position: relative !important;
		width: 100% !important;
		margin: 0 0 18px !important;
		padding: 0 !important;
		overflow: hidden !important;
		background: var(--lk-rd-panel) !important;
		border: 1px solid var(--lk-rd-border) !important;
		border-radius: 18px !important;
		box-shadow: 0 8px 26px rgba(71, 48, 23, .075) !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}

	/* Keep the filter name inside the same visual panel as its sections. */
	html body #column-left .ocf-header {
		position: static !important;
		display: flex !important;
		align-items: center !important;
		width: 100% !important;
		min-height: 54px !important;
		margin: 0 !important;
		padding: 0 16px !important;
		background: var(--lk-rd-panel) !important;
		border: 0 !important;
		border-bottom: 1px solid var(--lk-rd-border) !important;
		box-sizing: border-box !important;
	}

	html body #column-left .ocf-title {
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		color: #92571e !important;
		font-family: inherit !important;
		font-size: 17px !important;
		font-weight: 750 !important;
		line-height: 1.25 !important;
	}

	html body #column-left .ocf-content,
	html body #column-left .ocf-body,
	html body #column-left .ocf-filter-list {
		position: static !important;
		display: block !important;
		width: 100% !important;
		height: auto !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
		background: var(--lk-rd-panel) !important;
		transform: none !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	html body #column-left .ocf-filter {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		background: #fff !important;
		border: 0 !important;
		border-bottom: 1px solid var(--lk-rd-border) !important;
	}

	html body #column-left .ocf-filter:last-child {
		border-bottom: 0 !important;
	}

	html body #column-left .ocf-filter-header {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		min-height: 48px !important;
		margin: 0 !important;
		padding: 12px 16px !important;
		background: var(--lk-rd-panel) !important;
		border: 0 !important;
		cursor: default !important;
		user-select: none !important;
	}

	html body #column-left .ocf-filter.lk-desktop-toggleable .ocf-filter-header {
		cursor: pointer !important;
	}

	html body #column-left .ocf-filter-name {
		min-width: 0 !important;
		margin: 0 !important;
		color: #92571e !important;
		font-size: 15px !important;
		font-weight: 750 !important;
		line-height: 1.25 !important;
	}

	html body #column-left .ocf-filter-body,
	html body #column-left .ocf-value-list,
	html body #column-left .ocf-value-list-body,
	html body #column-left .ocf-scroll-y {
		width: 100% !important;
		box-sizing: border-box !important;
	}

	html body #column-left .ocf-filter-body > .ocf-value-list {
		padding: 7px 12px 10px 14px !important;
		background: #fff !important;
	}

	html body #column-left .ocf-scroll-y,
	html body #column-left .ocf-value-list-body {
		max-height: 276px !important;
		overflow-y: auto !important;
		scrollbar-width: thin !important;
		scrollbar-color: #d9b58b transparent !important;
		overscroll-behavior: contain !important;
	}

	html body #column-left .ocf-scroll-y::-webkit-scrollbar,
	html body #column-left .ocf-value-list-body::-webkit-scrollbar {
		width: 4px !important;
	}

	html body #column-left .ocf-scroll-y::-webkit-scrollbar-thumb,
	html body #column-left .ocf-value-list-body::-webkit-scrollbar-thumb {
		background: #d9b58b !important;
		border-radius: 999px !important;
	}

	html body #column-left .ocf-value {
		min-height: 34px !important;
		margin: 0 0 3px !important;
		padding: 5px 4px !important;
		border-radius: 8px !important;
	}

	html body #column-left .ocf-value-name,
	html body #column-left .ocf-value-count {
		color: #a65b1a !important;
		font-size: 13px !important;
		font-weight: 400 !important;
		line-height: 1.3 !important;
	}

	html body #column-left .ocf-value.ocf-selected {
		background: #fdf4eb !important;
	}

	html body #column-left .ocf-value.ocf-selected .ocf-value-name,
	html body #column-left .ocf-value.ocf-selected .ocf-value-count {
		color: var(--lk-rd-orange) !important;
		font-weight: 650 !important;
	}

	html body #column-left .ocf-value-input-checkbox {
		border-color: #d9b58b !important;
		border-radius: 5px !important;
	}

	html body #column-left .ocf-value.ocf-selected .ocf-value-input-checkbox,
	html body #column-left .ocf-value.ocf-selected .ocf-value-input-checkbox::before {
		color: #fff !important;
		background: var(--lk-rd-orange) !important;
		border-color: var(--lk-rd-orange) !important;
	}

	html body #column-left .ocf-filter.lk-desktop-toggleable.lk-desktop-collapsed .ocf-filter-body > *:not(.ocf-filter-header) {
		display: none !important;
	}

	html body #column-left .ocf-filter.lk-desktop-toggleable:not(.lk-desktop-collapsed) .ocf-filter-body > .ocf-value-list {
		display: block !important;
	}

	html body #column-left .ocf-filter.lk-desktop-toggleable.lk-desktop-collapsed .ocf-angle {
		transform: rotate(90deg) !important;
	}

	html body #column-left .ocf-filter .ocf-angle {
		color: var(--lk-rd-accent-dark) !important;
		transition: transform .18s ease !important;
	}

	html body #column-left .lk-desktop-zero-value,
	html body #column-left .lk-desktop-empty-filter {
		display: none !important;
	}

	html body #column-left .ocf-footer {
		position: static !important;
		display: block !important;
		width: 100% !important;
		padding: 12px !important;
		background: var(--lk-rd-panel) !important;
		border: 0 !important;
		border-top: 1px solid var(--lk-rd-border) !important;
		box-shadow: none !important;
	}

	html body #column-left .ocf-search-btn-static {
		min-height: 42px !important;
		color: #fff !important;
		font-size: 13px !important;
		font-weight: 700 !important;
		background: var(--lk-rd-accent) !important;
		border: 1px solid var(--lk-rd-accent) !important;
		border-radius: 10px !important;
		box-shadow: none !important;
	}

	html body #column-left .ocf-btn-link {
		color: var(--lk-rd-accent-dark) !important;
	}

	/* Common CTA palette; card geometry is intentionally unchanged. */
	html body main .btn-primary,
	html body main .btn-general:not(.btn-wishlist):not(.btn-compare) {
		color: #fff !important;
		background-color: var(--lk-rd-orange) !important;
		border-color: var(--lk-rd-orange) !important;
		box-shadow: none !important;
	}

	html body main .btn-primary:hover,
	html body main .btn-primary:focus,
	html body main .btn-general:not(.btn-wishlist):not(.btn-compare):hover,
	html body main .btn-general:not(.btn-wishlist):not(.btn-compare):focus {
		background-color: var(--lk-rd-orange-dark) !important;
		border-color: var(--lk-rd-orange-dark) !important;
	}

	html body #content .lk-unified-listing-card,
	html body #content .right-block-inner.lk-card,
	html body #content .lk-product-accordion {
		border-color: var(--lk-rd-line) !important;
	}

	html body #content .container-module .title-module span,
	html body #content .lk-recommendations-root .title-module span {
		color: var(--lk-rd-text) !important;
	}
}

/* Compact laptop range. */
@media (min-width: 1025px) and (max-width: 1199px) {
	html body main > .container,
	html body .lk-header__shell {
		width: calc(100% - 32px) !important;
		max-width: 1120px !important;
	}

	html body .lukasik-category-toolbar {
		grid-template-columns: auto minmax(0, 1fr) auto auto !important;
		gap: 6px !important;
	}

	html body .lukasik-sort-option {
		min-width: 74px !important;
		padding-right: 10px !important;
		padding-left: 10px !important;
	}
}

/* Standard laptops and monitors. */
@media (min-width: 1200px) and (max-width: 1439px) {
	html body main > .container,
	html body .lk-header__shell {
		width: calc(100% - 40px) !important;
		max-width: 1280px !important;
	}
}

/* Large desktop canvas without stretching controls. */
@media (min-width: 1440px) and (max-width: 1919px) {
	html body main > .container,
	html body .lk-header__shell {
		width: calc(100% - 64px) !important;
		max-width: 1440px !important;
	}
}

/* Gaming, 4K and UltraWide: preserve the approved white catalogue canvas. */
@media (min-width: 1920px) {
	html body {
		background-color: #fff !important;
		background-image: none !important;
		background-attachment: scroll !important;
	}

	html body main > .container {
		width: calc(100% - 120px) !important;
		max-width: 1560px !important;
		margin-top: 0 !important;
		margin-bottom: 28px !important;
		padding: 0 15px 28px !important;
		background: #fff !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}

	html body .lk-header__shell {
		width: calc(100% - 120px) !important;
		max-width: 1560px !important;
	}
}

@media (min-width: 2560px) {
	html body main > .container,
	html body .lk-header__shell {
		max-width: 1680px !important;
	}
}

@media (hover: hover) and (pointer: fine) {
	html body .lk-round:hover,
	html body .lk-cart #cart > button:hover {
		color: var(--lk-rd-orange) !important;
		background: var(--lk-rd-panel-soft) !important;
		border-color: #e8c89f !important;
		transform: translateY(-1px);
	}

	html body #column-left .ocf-value:hover {
		background: var(--lk-rd-panel-soft) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	html body *,
	html body *::before,
	html body *::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}