/**
 * Avira Core frontend styles.
 *
 * @package Avira_Core
 */

:root {
	--avira-radius: 8px;
	--avira-border: #e2e2e2;
	/*
	 * Match the theme's own button color (header "Get in Touch", built with
	 * Elementor): --tc-link/--tc-hover/--tc-title are the Pharma theme's
	 * global "Theme Color" custom properties (Customizer-editable), also
	 * exposed as --wp--preset--color--theme-color-* and
	 * --e-global-color-theme_color_* on the Elementor kit. Inheriting them
	 * here means our buttons stay in sync if the theme's colors change.
	 * The hex fallbacks are the current values of those variables, only
	 * used if the theme's variables are ever unavailable.
	 */
	--avira-accent: var( --tc-link, #1d6f5e );
	--avira-accent-hover: var( --tc-hover, #17594b );
	--avira-accent-contrast: var( --tc-title, #ffffff );
	--avira-text: #222222;
	--avira-muted: #666666;
	--avira-gap: 1.5rem;
	/*
	 * Single product page only: the Pharma theme's own "Theme Color"
	 * heading/body-text custom properties (Customizer-editable), used to
	 * match the muted-intro-paragraph + plain-meta-line look of the
	 * theme's WooCommerce single product template (see
	 * skins/default/plugins/woocommerce/woocommerce.css .product_title /
	 * .product_meta). Hex fallbacks are that CSS's current computed
	 * values ( --theme-color-title / --theme-color-text ), only used if
	 * the theme's variables are ever unavailable. Kept separate from
	 * --avira-text / --avira-muted above, which are shared with the
	 * card/grid partial used on the category and archive pages.
	 */
	--avira-single-title-color: var( --theme-color-title, #02086a );
	--avira-single-muted-color: var( --theme-color-text, #7393ae );
}

.avira-grid {
	--avira-columns: 3;
	display: grid;
	grid-template-columns: repeat( var( --avira-columns ), 1fr );
	gap: var( --avira-gap, 1.5rem );
	margin: 1.5rem 0;
}

@media ( max-width: 900px ) {
	.avira-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 600px ) {
	.avira-grid {
		grid-template-columns: repeat( 1, 1fr );
	}
}

.avira-card {
	border: 1px solid var( --avira-border, #e2e2e2 );
	border-radius: var( --avira-radius, 8px );
	overflow: hidden;
	background: #fff;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.avira-card:hover {
	transform: translateY( -4px );
	box-shadow: 0 10px 24px rgba( 0, 0, 0, 0.08 );
}

.avira-card-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.avira-card-image {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f5f5f5;
}

.avira-card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.avira-card-body {
	padding: 1rem;
}

.avira-card-title {
	margin: 0 0 0.75rem;
	font-size: 1.05rem;
	line-height: 1.35;
	color: var( --avira-text, #222 );
}

.avira-card-cta {
	display: inline-block;
	padding: 0.5rem 1.1rem;
	border-radius: 0;
	background: var( --avira-accent, #1d6f5e );
	color: var( --avira-accent-contrast, #fff );
	font-size: 0.9rem;
	line-height: 1;
	transition: background-color 0.2s ease;
}

.avira-card-link:hover .avira-card-cta {
	background: var( --avira-accent-hover, #17594b );
	color: var( --avira-accent-contrast, #fff );
}

.avira-empty {
	padding: 2rem 0;
	color: var( --avira-muted, #666 );
}

.avira-archive-title {
	margin-bottom: 0.5rem;
}

.avira-term-description {
	color: var( --avira-muted, #666 );
	margin-bottom: 1.5rem;
}

/* Single product layout. */

.avira-single-wrap {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: 2.5rem;
	margin: 2rem 0;
}

@media ( max-width: 900px ) {
	.avira-single-wrap {
		grid-template-columns: 1fr;
	}
}

.avira-single-main-image {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var( --avira-radius, 8px );
	border: 1px solid var( --avira-border, #e2e2e2 );
	background: #f5f5f5;
}

.avira-single-main-image-tag {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.avira-gallery-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 0.75rem;
}

.avira-gallery-thumb {
	width: 70px;
	height: 70px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: calc( var( --avira-radius, 8px ) - 2px );
	overflow: hidden;
	background: none;
	cursor: pointer;
	line-height: 0;
}

.avira-gallery-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.avira-gallery-thumb.is-active {
	border-color: var( --avira-accent, #1d6f5e );
}

.avira-single-title {
	margin-top: 0;
}

/*
 * Intro paragraph: sits directly under the title with no heading above
 * it. Muted color matches the theme's own body-text color, which is
 * already the ".product_meta > span > *:not(a)" / default paragraph
 * color in its WooCommerce single product template -- see the
 * --avira-single-muted-color comment in :root above. Line-height is
 * inherited from the theme's global paragraph style.
 */
.avira-single-content > .avira-content {
	color: var( --avira-single-muted-color );
	margin-bottom: 1.5rem;
}

/*
 * Key Features / Usage headings: styled at the theme's own h4 scale
 * (see --theme-font-h4_* in skins/default/css/__custom.css) instead of
 * the page's global h2 (47px), so they stay clearly smaller than the
 * product title without touching the theme's global heading styles.
 */
.avira-section-heading {
	margin: 1.75rem 0 0.75rem;
	font-family: var( --theme-font-h4_font-family, inherit );
	font-size: var( --theme-font-h4_font-size, 1.75rem );
	font-weight: var( --theme-font-h4_font-weight, 500 );
	line-height: var( --theme-font-h4_line-height, 1.2 );
	color: var( --avira-single-title-color );
}

/*
 * Product meta: plain label/value lines (no table, no heavy background)
 * with light separators between rows -- matches the theme's own
 * .product_meta spacing/type scale from its WooCommerce single product
 * template.
 */
.avira-product-meta {
	margin: 1.5rem 0;
	font-size: 0.9375em;
	line-height: 1.35em;
}

.avira-meta-row {
	margin: 0;
	padding: 0.55rem 0;
	border-bottom: 1px solid var( --avira-border, #e2e2e2 );
}

.avira-meta-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.avira-meta-label {
	font-weight: 600;
	color: var( --avira-single-title-color );
}

.avira-meta-value {
	font-weight: 400;
	color: var( --avira-single-muted-color );
}

.avira-meta-value a {
	color: var( --theme-color-link, var( --avira-accent ) );
}

.avira-key-features {
	margin: 0;
	padding-left: 1.25rem;
}

.avira-key-features li {
	margin-bottom: 0.4rem;
}

.avira-back-link {
	margin-top: 2rem;
}

.avira-back-link a {
	text-decoration: none;
}

/*
 * Opt-in breadcrumbs (Product Settings → Show Breadcrumbs on Product Pages).
 * Off by default -- this block only ever matches an element in the DOM
 * when the setting is switched on, so it has no effect on the finalized
 * default layout.
 */

.avira-breadcrumbs {
	margin-bottom: 1rem;
	font-size: 0.9rem;
	color: var( --avira-muted, #666 );
}

.avira-breadcrumbs-link {
	color: inherit;
	text-decoration: none;
}

.avira-breadcrumbs-link:hover {
	text-decoration: underline;
}

.avira-breadcrumbs-sep {
	margin: 0 0.5em;
}

.avira-breadcrumbs-current {
	color: var( --avira-text, #222 );
}

/*
 * The theme reserves a fixed 9rem (144px) top/bottom padding above
 * .page_content_wrap by default. Elementor-built pages (Contact, Our
 * Company, Our Products) opt out of this via the theme's "remove margins"
 * page option and set their own 80px section padding instead. Our 3
 * templates can't use that per-page option (they're not Elementor
 * documents), so this matches the same 80px top spacing directly --
 * scoped to only these 3 templates so no other archive/blog page is
 * affected.
 */
body.tax-avira_product_cat .page_content_wrap,
body.post-type-archive-avira_product .page_content_wrap,
body.single-avira_product .page_content_wrap {
	padding-top: 80px;
}