/*

     _         _              _                          
    / \  _   _| |_ ___  _ __ | |__   __ _ _ __ _ __ ___  
   / _ \| | | | __/ _ \| '_ \| '_ \ / _` | '__| '_ ` _ \ 
  / ___ \ |_| | || (_) | |_) | | | | (_| | |  | | | | | |
 /_/   \_\__,_|\__\___/| .__/|_| |_|\__,_|_|  |_| |_| |_|
                       |_|                               
 
 * 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;
}

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

		PAGE SPECIFIC: content_page.html

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

/* Section headings inside a text block sit just above body size — never
   competing with the page <h1>. Applies both to the block-level title and to
   h2/h3/h4 authored inside the sanitised rich text. */
body#content_page .content-block-title {
	font-size: 1.15rem;
	font-weight: 600;
	margin: 2rem 0 .6rem;
}
body#content_page .content-block-title:first-child {
	margin-top: 0;
}
body#content_page .content-page-body h2 {
	font-size: 1.15rem;
	font-weight: 600;
	margin: 1.9rem 0 .55rem;
}
body#content_page .content-page-body h3 {
	font-size: 1.02rem;
	font-weight: 600;
	margin: 1.4rem 0 .45rem;
}
body#content_page .content-page-body h4 {
	font-size: .95rem;
	font-weight: 600;
	margin: 1.1rem 0 .4rem;
}
body#content_page .content-page-body > :first-child {
	margin-top: 0;
}
body#content_page .content-page-body p,
body#content_page .content-page-body ul,
body#content_page .content-page-body ol {
	margin-bottom: 1rem;
}

/* Checkout order-summary sidebar: the -100px/+100px offset pair only makes sense
   when the aside sits beside the form (col-lg-4, same row). Below lg it stacks
   underneath instead, and the negative margin pulls an invisible 100px padding
   strip up over the bottom of the payment accordion, eating clicks/taps on
   whatever renders there. */
@media (min-width: 992px) {
	.ap-checkout-summary-col {
		margin-top: -100px;
	}
	.ap-checkout-summary-sticky {
		padding-top: 100px;
	}
}

/* Search autosuggest dropdown: not wired to Bootstrap's dropdown JS (visibility is
   toggled manually by main.js's search sub-module), so .dropdown-menu's own
   [data-bs-popper]-based show/hide never applies — position/visibility here instead. */
[data-role="search-suggestions-results"] {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: .5rem;
	max-height: 70vh;
	overflow-y: auto;
	z-index: 1050;
}