/*
 * Jednotná šírka obsahu — 1200px na celom webe okrem úvodnej stránky.
 *
 * Stránky z Elementora (O nás, Kontakt, Služby, Realizácie, produktové
 * rozcestníky…) majú obsah v boxovaných kontajneroch presne 1200px. Stránky,
 * ktoré skladá Astra, sa od toho líšili:
 *
 * - archív kategórie a detail produktu: kontajner 1200px vrátane 20px
 *   odsadenia z každej strany, teda obsah len 1160px;
 * - košík a Môj účet: článok s percentuálnym odsadením, obsah 1185–1200px
 *   podľa šírky okna;
 * - článok blogu: kontajner 1820px, súvisiace články a navigácia cez 1400px.
 *
 * Kontajner preto rozširujeme na 1240px — po odpočítaní Astrinho odsadenia
 * 20px ostane presne 1200px a hrany obsahu lícujú s Elementor stránkami.
 * Hlavička a päta zostávajú cez celú šírku.
 *
 * #content v selektoroch prebíja dynamické CSS Astry (Customizer → šírky
 * kontajnerov) bez !important.
 */

body.woocommerce-page.archive #content > .ast-container,
body.single-product #content > .ast-container,
body.woocommerce-cart #content > .ast-container,
body.woocommerce-account #content > .ast-container,
body.single-post #content > .ast-container {
	max-width: 1240px;
}

/*
 * Košík: Astra (separate container) odsadzuje biely box článku zo strán
 * percentami (~100px), takže sa odsadenie menilo so šírkou okna. Dávame
 * pevných 48px — rovnako ako Môj účet (ucet.css) a článok blogu nižšie, aby
 * sa tabuľka košíka nelepila na hrany boxu. Zvislé odsadenie necháme Astre.
 *
 * Len na desktope: na mobile si odsadenie rieši Astra.
 */
@media (min-width: 922px) {
	body.woocommerce-cart #content #primary .site-main > article {
		padding-left: 48px;
		padding-right: 48px;
	}
}

/* ---------------------------------------------- Pokladňa (CartFlows) */

/*
 * CartFlows má vlastnú hlavičku, ktorá sa od hlavičky webu líšila:
 * - obsah centrovaný na 1140px, takže logo bolo o ~130px vpravo,
 * - výška 64px namiesto 76px (desktop) / 70px (mobil),
 * - na mobile odsadenie 1.5rem (~38px) z child témy namiesto 20px.
 *
 * Zjednocujeme rozmery s hlavičkou webu: cez celú šírku, 20px od okraja,
 * logo zvislo na stred lišty. !important na mobile prebíja custom.scss
 * child témy, ktorá tam odsadenie nastavuje s !important.
 */
body.cartflows-instant-checkout .main-header--wrapper .main-header--content {
	display: flex;
	align-items: center;
	max-width: none;
	min-height: 70px;
	padding: 0 20px !important;
}

@media (min-width: 922px) {
	body.cartflows-instant-checkout .main-header--wrapper .main-header--content {
		min-height: 76px;
	}
}

/* Hlavička webu nemá spodný rámik, CartFlows tu kreslí 1px sivú čiaru. */
body.cartflows-instant-checkout header.main-header--wrapper {
	border-bottom: 0;
}

/* Odkaz s logom bez vlastnej výšky riadku, aby logo sedelo presne na stred. */
body.cartflows-instant-checkout .main-header--wrapper .main-header--site-logo,
body.cartflows-instant-checkout .main-header--wrapper .main-header--site-logo a {
	display: flex;
	align-items: center;
}

/*
 * Na mobile má web v hlavičke skrátené logo „HL“ vysoké 44px; pokladňa
 * ukazuje celé logo. CartFlows (checkout-template.css) mu na mobile dáva
 * max-width: 45 %, takže sa scvrklo na ~98px. Pevná výška s pomerom strán;
 * selektor o triedu silnejší, lebo CartFlows sa načítava až po nás.
 */
@media (max-width: 921px) {
	body.cartflows-instant-checkout .main-header--wrapper .main-header--content .main-header--site-logo img {
		flex-shrink: 0;
		width: auto;
		height: 40px;
		max-width: none;
	}
}

/* ----------------------------------------------------- Článok blogu */

/*
 * Článok je biely box široký 1200px (viď vyššie) a jeho obsah z Elementora
 * mal od hrán boxu len ~20px — text pôsobil nalepene. Dávame mu rovnaké
 * vnútorné odsadenie ako boxu v Môj účet (ucet.css). Na tablete a mobile
 * je box cez celú šírku obrazovky a odsadenie Elementora tam stačí.
 */
@media (min-width: 922px) {
	body.single-post #content #primary .site-main > article {
		padding-left: 48px;
		padding-right: 48px;
		padding-bottom: 48px;
	}
}