/*
 * Turbo Center Ljubljana - brand layer
 *
 * Loaded after the Druco base CSS and the generated theme-options CSS.
 * Colours for most components come from the palette in framework/turbocenter.php;
 * this file handles shape, spacing, typography and a few components the
 * palette cannot reach.
 *
 *	1. Tokens & base
 *	2. Header
 *	3. Section headings & tabs
 *	4. Product cards
 *	5. Vehicle finder (filter by attribute)
 *	6. Testimonials & brand logos
 *	7. Breadcrumb
 *	8. Single product
 *	9. Footer
 *	10. Motion & small screens
 */

/*--------------------------------------------------------
	1. TOKENS & BASE
---------------------------------------------------------*/
:root{
	--tc-ink: #141517;
	--tc-graphite: #1f2124;
	--tc-steel: #2c2f33;
	--tc-text: #26282c;
	--tc-muted: #5f646b;
	--tc-line: #e4e4e0;
	--tc-surface: #f4f4f1;
	--tc-yellow: #ffb91f;
	--tc-yellow-hover: #f0a800;
	--tc-yellow-ink: #8a5a00;
	--tc-success: #1f7a3a;
	--tc-radius-sm: 4px;
	--tc-radius: 8px;
	--tc-radius-lg: 12px;
	--tc-shadow: 0 1px 2px rgba(20, 21, 23, .06), 0 4px 16px rgba(20, 21, 23, .06);
	--tc-shadow-hover: 0 2px 4px rgba(20, 21, 23, .08), 0 12px 28px rgba(20, 21, 23, .12);
	--tc-ease: cubic-bezier(.2, .7, .2, 1);
}

body{
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection{
	background: var(--tc-yellow);
	color: var(--tc-ink);
}

/* Visible keyboard focus everywhere (the base theme removes most outlines) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
	outline: 2px solid var(--tc-yellow) !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(20, 21, 23, .85);
}

.tc-skip-link{
	position: absolute;
	left: 12px;
	top: -100px;
	z-index: 100000;
	padding: 10px 16px;
	background: var(--tc-ink);
	color: #fff !important;
	font-weight: 600;
	border-radius: var(--tc-radius-sm);
	transition: top .2s var(--tc-ease);
}
.tc-skip-link:focus{
	top: 12px;
}

/* Buttons: consistent shape, a little more presence */
.button,
a.button,
button.button,
input[type="submit"],
input[type="button"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
	border-radius: var(--tc-radius-sm);
	font-weight: 600;
	letter-spacing: .02em;
	transition: background-color .2s var(--tc-ease), color .2s var(--tc-ease), border-color .2s var(--tc-ease), box-shadow .2s var(--tc-ease);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"],
input[type="number"],
select,
textarea{
	border-radius: var(--tc-radius-sm);
	transition: border-color .2s var(--tc-ease);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus{
	border-color: var(--tc-ink);
}

/*--------------------------------------------------------
	2. HEADER
---------------------------------------------------------*/

/* Top bar / store notice */
.header-top{
	font-size: 12px;
	letter-spacing: .04em;
}
.header-top > .container{
	padding-top: 8px;
	padding-bottom: 8px;
}
.header-top .header-store-notice{
	line-height: 1.5;
}
.header-top .header-store-notice strong{
	margin-right: 6px;
	letter-spacing: .08em;
}
.header-top .header-store-notice i{
	margin-right: 6px;
}

/* Middle row: logo, search, phone */
.header-middle{
	box-shadow: 0 1px 0 var(--tc-line);
}
.header-middle > .container{
	padding-top: 18px;
	padding-bottom: 18px;
}

.header-middle .ts-search-by-category .search-table{
	border-radius: 999px;
	overflow: hidden;
	border: 1px solid var(--tc-line);
	transition: border-color .2s var(--tc-ease), box-shadow .2s var(--tc-ease);
}
.header-middle .ts-search-by-category .search-table:focus-within{
	border-color: var(--tc-ink);
	box-shadow: 0 0 0 3px rgba(255, 185, 31, .45);
}
.header-middle .ts-search-by-category .search-table .search-field input[type="text"]{
	border: 0;
	background: transparent;
	padding-left: 22px;
}
.header-middle .ts-search-by-category .search-table .search-button{
	background: var(--tc-yellow);
	border-radius: 999px;
	margin: 4px;
	transition: background-color .2s var(--tc-ease);
}
.header-middle .ts-search-by-category .search-table .search-button:hover{
	background: var(--tc-yellow-hover);
}

/* Phone number: the main conversion path for a phone-order shop */
.header-contact-info.has-icon:before,
.header-middle .header-contact-info:before{
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--tc-yellow);
	background-size: 18px auto;
}
.header-contact-info > div > span{
	color: var(--tc-muted);
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 11px;
}
.header-contact-info > div > a{
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .01em;
	white-space: nowrap;
}

/* Main navigation bar */
.header-bottom{
	border-bottom: 0;
}
.ts-header .header-bottom nav.main-menu > ul > li > a{
	position: relative;
	padding-top: 16px;
	padding-bottom: 16px;
	font-weight: 600;
	letter-spacing: .06em;
	font-size: 14px;
}
.ts-header .header-bottom nav.main-menu > ul > li > a:after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--tc-yellow);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .25s var(--tc-ease);
}
.ts-header .header-bottom nav.main-menu > ul > li:hover > a:after,
.ts-header .header-bottom nav.main-menu > ul > li.current-menu-item > a:after,
.ts-header .header-bottom nav.main-menu > ul > li.current-menu-ancestor > a:after,
.ts-header .header-bottom nav.main-menu > ul > li > a:focus-visible:after{
	transform: scaleX(1);
}
.ts-header nav > ul.menu li ul.sub-menu{
	border-radius: 0 0 var(--tc-radius) var(--tc-radius);
	box-shadow: var(--tc-shadow-hover);
}

/* Sticky header: compact */
.is-sticky .header-middle > .container{
	padding-top: 10px;
	padding-bottom: 10px;
}

/*--------------------------------------------------------
	3. SECTION HEADINGS & TABS
---------------------------------------------------------*/
/* Scoped to shortcode headers: product names also carry .heading-title.
 * Kept plain so they match the Elementor heading widgets on the same page. */
.ts-shortcode > header .heading-title,
.ts-shortcode .heading-tab .heading-title,
.ts-shortcode .shortcode-heading-wrapper .heading-title{
	font-weight: 700;
	letter-spacing: -.01em;
}

/* Category tabs as pills */
.ts-product-in-category-tab-wrapper .list-categories ul.tabs li.tab-item{
	border-radius: 999px;
	border: 1px solid var(--tc-line);
	padding: 6px 16px;
	transition: background-color .2s var(--tc-ease), border-color .2s var(--tc-ease);
}
.ts-product-in-category-tab-wrapper .list-categories ul.tabs li.tab-item:hover{
	border-color: var(--tc-ink);
}
.ts-product-in-category-tab-wrapper .list-categories ul.tabs li.tab-item.current{
	background: var(--tc-ink);
	border-color: var(--tc-ink);
	color: #fff;
}
.ts-product-in-category-tab-wrapper .list-categories ul.tabs li.tab-item.current span{
	color: inherit;
}

/*--------------------------------------------------------
	4. PRODUCT CARDS
---------------------------------------------------------*/
/* Druco draws product grids as shared cell borders; keep that structure and
 * lift the hovered cell above its neighbours instead of boxing every card. */
.woocommerce .products .product:not(.product-category){
	border-color: var(--tc-line);
}
.products .product .product-wrapper{
	position: relative;
	background: #fff;
	transition: box-shadow .25s var(--tc-ease);
}
.products .product .product-wrapper:hover{
	z-index: 2;
	box-shadow: var(--tc-shadow-hover);
}

.products .product .thumbnail-wrapper{
	background: var(--tc-surface);
	border-radius: var(--tc-radius-sm);
	overflow: hidden;
}
.products .product .thumbnail-wrapper figure{
	margin: 0;
	mix-blend-mode: multiply; /* product photos on white blend into the grey tile */
}
.products .product .thumbnail-wrapper img{
	transition: transform .4s var(--tc-ease);
}
.products .product .product-wrapper:hover .thumbnail-wrapper img{
	transform: scale(1.04);
}

.products .product .product-name,
.products .product h3.product-name{
	margin-bottom: 8px;
	font-weight: 600;
	line-height: 1.35;
	/* Part numbers make titles long: keep cards even */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 0;
}
.products .product .meta-wrapper > .price,
.products .product .price{
	font-weight: 700;
	font-size: 18px;
	letter-spacing: -.01em;
}
.products .product .price del{
	font-weight: 400;
	font-size: .8em;
}

/* Labels */
.product-label > span{
	border-radius: var(--tc-radius-sm);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/*--------------------------------------------------------
	5. VEHICLE FINDER
---------------------------------------------------------*/
.ts-product-filter-by-attribute{
	border-radius: var(--tc-radius-lg);
}
.ts-product-filter-by-attribute:before{
	background: var(--tc-ink) !important;
	border-radius: var(--tc-radius-lg);
	box-shadow: 0 10px 30px rgba(20, 21, 23, .18);
}
.ts-product-filter-by-attribute:after{
	/* yellow accent stripe on the left edge */
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 6px;
	z-index: 2;
	background: var(--tc-yellow);
	border-radius: var(--tc-radius-lg) 0 0 var(--tc-radius-lg);
}
.ts-product-filter-by-attribute > h2,
.ts-product-filter-by-attribute > h3{
	color: #fff;
}
.ts-product-filter-by-attribute select{
	background-color: var(--tc-steel);
	border: 1px solid #3a3e44 !important;
	color: #fff;
	border-radius: var(--tc-radius-sm);
	min-height: 48px;
}
.ts-product-filter-by-attribute select:disabled{
	opacity: .55;
}
.ts-product-filter-by-attribute select option{
	color: var(--tc-ink);
	background: #fff;
}
.ts-product-filter-by-attribute input[type="submit"]{
	min-height: 48px;
	background: var(--tc-yellow);
	border-color: var(--tc-yellow);
	color: var(--tc-ink);
	text-transform: uppercase;
}
.ts-product-filter-by-attribute input[type="submit"]:hover{
	background: #fff;
	border-color: #fff;
	color: var(--tc-ink);
}
.ts-product-filter-by-attribute.horizontal{
	padding: 22px 18px 22px 24px;
}

/*--------------------------------------------------------
	6. TESTIMONIALS & BRAND LOGOS
---------------------------------------------------------*/
.ts-testimonial-wrapper .item blockquote{
	height: 100%;
	margin: 0;
	padding: 28px 28px 24px;
	border-radius: var(--tc-radius);
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .1);
	text-align: left;
}
.ts-testimonial-wrapper:not(.text-light) .item blockquote{
	background: #fff;
	border-color: var(--tc-line);
	box-shadow: var(--tc-shadow);
}
.ts-testimonial-wrapper .item blockquote .content{
	font-size: 17px;
	line-height: 1.55;
}
.ts-testimonial-wrapper .item blockquote .author a[href="#"]{
	pointer-events: none; /* author names have placeholder links */
	text-decoration: none;
}

.ts-logo-slider-wrapper .item img{
	filter: grayscale(1);
	opacity: .7;
	transition: filter .25s var(--tc-ease), opacity .25s var(--tc-ease);
}
.ts-logo-slider-wrapper .item a:hover img,
.ts-logo-slider-wrapper .item:hover img{
	filter: none;
	opacity: 1;
}

/*--------------------------------------------------------
	7. BREADCRUMB
---------------------------------------------------------*/
.breadcrumb-title-wrapper{
	border-bottom: 1px solid var(--tc-line);
}
.breadcrumb-title-wrapper .page-title{
	font-weight: 700;
	letter-spacing: -.01em;
}
.breadcrumb-title-wrapper .breadcrumbs-container{
	font-size: 13px;
}

/*--------------------------------------------------------
	8. SINGLE PRODUCT
---------------------------------------------------------*/
.single-product div.product .woocommerce-product-gallery{
	border-radius: var(--tc-radius);
	overflow: hidden;
	background: var(--tc-surface);
}
.single-product div.product .woocommerce-product-gallery img{
	mix-blend-mode: multiply;
}

.woocommerce div.product .summary .product_title{
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.2;
	margin-bottom: 14px;
}
.woocommerce div.product .summary > p.price{
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -.02em;
	margin-bottom: 14px;
}

/* Stock as a status pill */
.woocommerce div.product .summary .availability{
	margin-bottom: 18px;
}
.woocommerce div.product .summary .availability .availability-text{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	background: var(--tc-surface);
}
.woocommerce div.product .summary .availability.in-stock .availability-text{
	color: var(--tc-success);
	background: #e8f4ec;
}
.woocommerce div.product .summary .availability.in-stock .availability-text:before{
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

/* Order-by-phone box (framework/turbocenter.php) */
.tc-order-cta,
.woocommerce div.product .summary > .tc-order-cta{ /* matches Druco's .summary > *:not(.button) */
	margin: 22px 0 26px;
	padding: 22px 22px 22px 26px;
	line-height: 1.5;
	border-radius: var(--tc-radius);
	background: var(--tc-ink);
	color: #d9dade;
	position: relative;
	overflow: hidden;
}
.tc-order-cta:before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 5px;
	background: var(--tc-yellow);
}
.tc-order-cta__title{
	margin: 0 0 4px;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
}
.tc-order-cta__text{
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.5;
}
.tc-order-cta__actions{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.tc-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 22px;
	border-radius: var(--tc-radius-sm);
	border: 2px solid transparent;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	text-decoration: none !important;
	transition: background-color .2s var(--tc-ease), color .2s var(--tc-ease), border-color .2s var(--tc-ease);
}
.tc-btn__icon{
	display: inline-flex;
}
.tc-btn--primary{
	background: var(--tc-yellow);
	color: var(--tc-ink) !important;
	font-size: 17px;
}
.tc-btn--primary:hover{
	background: #fff;
	color: var(--tc-ink) !important;
}
.tc-btn--ghost{
	border-color: rgba(255, 255, 255, .28);
	color: #fff !important;
}
.tc-btn--ghost:hover{
	border-color: var(--tc-yellow);
	color: var(--tc-yellow) !important;
}

/* Meta (brands, tags, SKU) as a tidy list */
.woocommerce div.product .summary .meta-content{
	padding-top: 18px;
	border-top: 1px solid var(--tc-line);
	font-size: 14px;
}
.woocommerce div.product .summary .meta-content > *{
	margin-bottom: 6px;
}
.woocommerce div.product .summary .meta-content > * > span:first-child{
	color: var(--tc-muted);
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs{
	border-bottom: 1px solid var(--tc-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
	box-shadow: inset 0 -3px 0 var(--tc-yellow);
}

/*--------------------------------------------------------
	9. FOOTER
---------------------------------------------------------*/
footer#colophon a{
	transition: color .2s var(--tc-ease);
}
footer#colophon a:hover{
	color: var(--tc-yellow);
}
footer#colophon .elementor-image-box-title{
	color: #fff;
	font-weight: 700;
	letter-spacing: .02em;
}
footer#colophon .elementor-image-box-img img{
	filter: none;
}

#to-top a{
	border-radius: 50%;
	background: var(--tc-yellow);
	color: var(--tc-ink);
	box-shadow: var(--tc-shadow-hover);
}

/*--------------------------------------------------------
	10. MOTION & SMALL SCREENS
---------------------------------------------------------*/
@media (prefers-reduced-motion: reduce){
	*,
	*:before,
	*:after{
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.products .product .product-wrapper:hover .thumbnail-wrapper img{
		transform: none;
	}
}

@media only screen and (max-width: 767px){
	.header-top{
		font-size: 11px;
		letter-spacing: .02em;
	}
	.header-top .header-store-notice{
		text-align: center;
	}
	.products .product .meta-wrapper > .price,
	.products .product .price{
		font-size: 16px;
	}
	.woocommerce div.product .summary > p.price{
		font-size: 26px;
	}
	.tc-order-cta,
	.woocommerce div.product .summary > .tc-order-cta{
		padding: 18px 16px 18px 20px;
	}
	.tc-order-cta__actions .tc-btn{
		flex: 1 1 100%;
	}
	.ts-product-filter-by-attribute.horizontal{
		padding: 16px 12px 16px 18px;
	}
	.ts-product-filter-by-attribute.horizontal > form > *{
		flex: 1 1 100%;
		margin: 5px 0;
	}
}