/*

     _         _              _                          
    / \  _   _| |_ ___  _ __ | |__   __ _ _ __ _ __ ___  
   / _ \| | | | __/ _ \| '_ \| '_ \ / _` | '__| '_ ` _ \ 
  / ___ \ |_| | || (_) | |_) | | | | (_| | |  | | | | | |
 /_/   \_\__,_|\__\___/| .__/|_| |_|\__,_|_|  |_| |_| |_|
                       |_|                               
 
 * CMS per eCommerce in Farmacia
 * Copyright © 2022 - Cartzilla Template
                                                                                                                                       
==============================================================================================*/

/* -------------------------------------------------------------------------------

		HEADER HEIGHT VARIABLE
		Used to offset position-sticky elements below the sticky navbar.
		Override in autopharm.vars.X.css if the header height differs.

/* -----------------------------------------------------------------------------*/

:root {
	--ap-header-height: 50px;
	--ap-content-px: 0rem;
}

.product-sticky-aside {
	margin-top: calc(-1 * var(--ap-sticky-pt, 100px));
}

.product-sticky-sidebar {
	top: calc(var(--ap-header-height) + var(--ap-sticky-gap, 20px));
	padding-top: var(--ap-sticky-pt, 100px);
}

/* Mobile sticky bar: break out of container/content-wrapper padding.
   top is intentionally NOT overridden — theme.css sets [data-sticky-element] { top: -1px }
   which makes the section stick 1px above the viewport. The IntersectionObserver fires
   when the section leaves the root, adding is-stuck and showing the inner. */
.sticky-product-banner {
	z-index: 1025;
	margin-left: calc(-1 * (var(--ap-content-px) + var(--bs-gutter-x, 1.5rem) * .5));
	margin-right: calc(-1 * (var(--ap-content-px) + var(--bs-gutter-x, 1.5rem) * .5));
}

/* Push the bar content below the navbar.
   Section sticks at -1px; inner padding-top places the bar at exactly navbar bottom. */
.sticky-product-banner .sticky-product-banner-inner {
	padding-top: calc(var(--ap-header-height) + 5px) !important;
}

/* -------------------------------------------------------------------------------

		NAVBAR LOGO

/* -----------------------------------------------------------------------------*/

/* Logo size override */
.navbar-brand img {
	max-width: none !important;
	width: 200px !important;
	height: auto !important;
}

/* -------------------------------------------------------------------------------

		BANNERS

/* -----------------------------------------------------------------------------*/

/**
* Gradient overlay utility for improved text readability
*/
.gradient-overlay-bottom::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60%;
	background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
	pointer-events: none;
	z-index: 1;
}

.gradient-overlay-bottom > * {
	position: relative;
	z-index: 2;
}

/**
* Horizontal Banner
*/
.banner.banner-horizontal {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	text-shadow: 2px 0px 4px rgba(0, 0, 0, 0.25);
	margin-bottom: 0;
}

/* Small screens */
@media (max-width: 719px) {
	.banner.banner-horizontal {
		min-height: 45vh;
	}
}

/* Medium screens */
@media (min-width: 720px) and (max-width: 959px) {
	.banner.banner-horizontal {
		min-height: 25vh;
	}
}

/* Large screens */
@media (min-width: 960px) {
	.banner.banner-horizontal {
		min-height: 25vh;
	}
}

/**
* Vertical Banner
*/
.banner.banner-vertical {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	text-shadow: 2px 0px 4px rgba(0, 0, 0, 0.25);
	margin-bottom: 0;
}

/* Small screens */
@media (max-width: 719px) {
	.banner.banner-vertical {
		min-height: 30vh;
	}
}

/* Medium screens */
@media (min-width: 720px) and (max-width: 959px) {
	.banner.banner-vertical {
		min-height: 40vh;
	}
}

/* Large screens */
@media (min-width: 960px) {
	.banner.banner-vertical {
		min-height: 40vh;
	}
}

/* -------------------------------------------------------------------------------

		BODY BACKGROUND + PAGE CONTENT WRAPPER

/* -----------------------------------------------------------------------------*/

body {
	overflow-x: clip;
}

[data-bs-theme="light"] body {
	background-color: #ffffff;
}

.content-wrapper {
	background-color: #fff;
	border-radius: 12px;
	padding-top: var(--ap-content-pt, 0);
}

[data-bs-theme="dark"] .content-wrapper {
	background-color: var(--bs-body-bg);
}

/* -------------------------------------------------------------------------------

		TABLES

/* -----------------------------------------------------------------------------*/

table {
	font-size: 0.8rem;
}

/* -------------------------------------------------------------------------------

		SECONDARY NAV

/* -----------------------------------------------------------------------------*/

header .navbar-nav.overflow-x-auto {
	gap: 1.25rem !important;
}

header .navbar-nav.overflow-x-auto > .nav-item > .nav-link::before {
	height: var(--cz-nav-link-underline-border-width) !important;
	width: 100% !important;
	left: 0 !important;
	top: auto !important;
	bottom: 2px !important;
	transform: scaleX(0) !important;
	transform-origin: bottom right !important;
}

header .navbar-nav.overflow-x-auto > .nav-item > .nav-link:hover::before {
	transform: scaleX(1) !important;
	transform-origin: bottom left !important;
}

/* -------------------------------------------------------------------------------

		PRODUCT PAGE

/* -----------------------------------------------------------------------------*/

body#product .ratio img {
	border-radius: 8px;
}

/* -------------------------------------------------------------------------------

		FEEDATY WIDGET

/* -----------------------------------------------------------------------------*/

.feedaty_widget {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
}

.feedaty_widget iframe,
.feedaty_widget > div {
	width: 100% !important;
	max-width: 100% !important;
}

/* -------------------------------------------------------------------------------

		PAGE SPECIFIC: blog_post.html

/* -----------------------------------------------------------------------------*/

body#blog_post .blog-post-text li > p {
	margin-bottom: 0;
}