/*
 * April Fixes - front-end CSS
 * (#6 mobile menu spacing is injected dynamically in includes/fixes-css.php)
 */

/* =========================================================================
 * #7 - 1240px content width on sub-pages (category, product, cart, checkout...)
 *
 * The home page is built with Elementor and uses Elementor's content width
 * (already 1240px). Sub-pages use the theme's `.container`, which the theme
 * leaves full-width up to 1470px. Cap it to 1240px on desktop. The Elementor
 * home content (.e-con / .site-content) is unaffected. The header keeps its own
 * width (a more specific rule), so only page content is constrained here.
 * ========================================================================= */
@media (min-width: 1240px) {
	.container {
		max-width: 1240px;
	}
}

/*
 * Single products and category archives don't use `.container` - their content
 * sits in a full-width `#primary.content-area` (inside #bwp-main, no wrapper),
 * so the rule above misses them. Cap + centre that wrapper on WooCommerce pages.
 * Harmless on cart/checkout/shop where #primary is already <=1240px.
 */
.woocommerce-page #primary.content-area {
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
}

/* =========================================================================
 * #8 - Footer divider line on sub-pages.
 *
 * Elementor enqueues widget-divider.min.css only on pages that contain the
 * divider in their own content. On theme-rendered sub-pages (shop, cart, etc.)
 * the footer template's divider loses its line-drawing rule and falls back to an
 * unstyled dark line. Re-supply Elementor's own rule, using its CSS variables so
 * every divider keeps its configured colour / width / style (no hardcoded IDs or
 * colours - reproducible across environments).
 * ========================================================================= */
.elementor-widget-divider:not(.elementor-widget-divider--view-line_text):not(.elementor-widget-divider--view-line_icon) .elementor-divider-separator {
	border-block-start: var(--divider-border-width) var(--divider-border-style) var(--divider-color);
}

.elementor-widget-divider--view-line_icon .elementor-divider-separator::before,
.elementor-widget-divider--view-line_icon .elementor-divider-separator::after,
.elementor-widget-divider--view-line_text .elementor-divider-separator::before,
.elementor-widget-divider--view-line_text .elementor-divider-separator::after {
	content: "";
	display: block;
	flex-grow: 1;
	border-block-start: var(--divider-border-width) var(--divider-border-style) var(--divider-color);
}

/* =========================================================================
 * Client follow-up - hide the catalog view-mode switcher (list / 2- / 3- /
 * 4-column grid toggle) on product listings so visitors can't change the
 * layout. The theme renders it as `<ul class="display">` (antisa_grid_list()),
 * and it only appears on category/shop archives. Hidden on all product
 * listings for a consistent layout.
 * ========================================================================= */
.woocommerce-page ul.display {
	display: none !important;
}

/* =========================================================================
 * Designer follow-up (Jun 22) - mobile horizontal padding on shop + category.
 *
 * On phones the product grid sat ~45px from the screen edge on the shop
 * (#primary.content-area and .sidebar each add 15px) and ~15px on category
 * archives (where those wrappers are already 0). The designer wants a
 * consistent 12px gutter "everywhere on mobile". Zero the redundant wrapper
 * padding (a no-op on category) and set the Bootstrap column padding to 12px,
 * so the product image lands exactly 12px from each edge on both pages.
 * Bootstrap's row negative-margins keep the inter-card gutter intact, so the
 * grid does not overflow horizontally.
 *
 * The shop archive adds its 15px via the theme's generated stylesheet
 * (`.post-type-archive-product #primary / .shop-layout-boxed { padding:15px
 * !important }`), so the wrapper reset needs !important to win; the more
 * specific selectors here keep it scoped to those two wrappers.
 * ========================================================================= */
@media (max-width: 767.98px) {
	.woocommerce-page #primary.content-area,
	.woocommerce-page .sidebar.shop-layout-boxed {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.woocommerce-page .main-archive-product > [class*="col-"] {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* =========================================================================
 * Designer follow-up (Jun 22) - product-summary button / badge alignment.
 *
 * The out-of-stock badge (.product-stock), the "Notify me when available"
 * button (.product-notify) and the add-to-cart button all centre their label
 * with the fragile `height:50px; line-height:50px` trick. That only centres a
 * SINGLE line - the longer Slovenian labels wrap to two lines, overflow the
 * fixed height and the text rides up ("skoči gor"). Centre with flexbox and
 * let the box grow instead, so one- and two-line labels both stay centred.
 *
 * Scoped to .entry-summary so the smaller product-card badges (shop / category
 * / related, ~26px) keep their own sizing.
 * ========================================================================= */
.entry-summary .product-stock,
.entry-summary .product-notify,
.entry-summary .single_add_to_cart_button {
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
	min-height: 50px;
	line-height: 1.3;
	padding-top: 4px;
	padding-bottom: 4px;
}

.entry-summary .product-stock .stock,
.entry-summary .product-notify .notify,
.entry-summary .single_add_to_cart_button span {
	line-height: 1.3;
	/*
	 * Optical centring: these labels are rendered all-caps (text-transform), so
	 * they have no descenders. Flex centring centres the line box, which leaves
	 * the empty descender space below the caps and makes the text look ~2px high.
	 * Nudge it down so the visible glyphs sit centred. position:relative (not
	 * transform) because the inline spans would ignore a transform.
	 */
	position: relative;
	top: 2px;
}

/*
 * The "Kupite zdaj" (buy-now) button is theme-rendered as bare button text
 * (<button class="button quick-buy">Buy Now</button>) and its line-height:50px
 * strut ignores padding, so CSS alone can't recentre its all-caps label (it
 * sits ~1px high). A small script (includes/fixes-css.php) wraps the label in
 * .april-btn-label so we can nudge it down to match the other buttons.
 */
.entry-summary .quick-buy .april-btn-label {
	display: inline-block;
	position: relative;
	top: 1px;
}

/* =========================================================================
 * Designer follow-up (Jun 22) - product "Dostava" delivery boxes.
 *
 * The theme's two delivery boxes (ul.product-shipping-delivers > li, the
 * "Dostava 3-5 dni" / "Dostava 4,50 eur" pair) sit side by side. In the narrow
 * two-up zone (~1050-1150px the summary column is a Bootstrap col-lg-5) the
 * Slovenian "Dostava 4,50 eur" is right at the wrap boundary, so "eur" drops to
 * a second line and that box grows taller and uneven.
 *
 * Give the text more room by trimming the large icon gap (15px) and horizontal
 * padding (20px) and keep it on a single line. Vertical padding is left intact,
 * so the box height is unchanged (only the awkward 2-line wrap is removed).
 * ========================================================================= */
.product-shipping-delivers .content-info {
	gap: 8px;
}

.product-shipping-delivers > li {
	padding-left: 12px;
	padding-right: 12px;
}

.product-shipping-delivers .content {
	white-space: nowrap;
}