/* Pages made of sections (template-parts/sections/*): the home page and the category landing pages — the measurements of the Elementor page they replace (03.11.2026):
   rows of 9 tiles up to 1500px with 7px around each, a grey hero band 356px high, titles 29px; on phones three tiles in
   a row with 6px around each, inside 8px. Tablet: Elementor's 1024px step. */
.hm-home { margin: 0; padding-bottom: 73px; } /* the old page ended with a 50px spacer in a padded container */
.hm-hero { display: flex; min-height: 356px; background-color: #f8f8f8; background-position: center center; background-repeat: no-repeat; background-size: contain; }
.hm-hero__inner { width: 100%; max-width: 1140px; margin: 0 auto; padding: 38px 0 0; align-self: flex-start; }
.hm-hero .hm-hero__title { margin: 0; padding: 0; font-size: 50px; line-height: 1.2em; letter-spacing: -1.5px; text-align: center; } /* two classes: the old theme has .site h1 { 30px } on phones */

.hm-heading { padding: 15px 0; }
.hm-heading__title { max-width: 1140px; margin: 0 auto; padding: 10px; font-size: 29px; line-height: 1; text-align: center; }

.hm-tiles { display: flex; flex-wrap: wrap; max-width: 1500px; margin: 0 auto; }
.hm-tile { width: 11.111%; margin: 0; padding: 7px; text-align: center; }
.hm-tile a { display: inline-block; }
.hm-tile img { display: block; max-width: 100%; height: auto; margin: 0 auto; border: 1px solid #d1d1d1; border-radius: 7px; } /* block in an inline-block link, as Elementor+Shoptimizer had it (keeps the line's gap under the picture) */
.hm-tile figcaption { margin-block-start: 14px; font-size: 14px; line-height: 1.5; }

.hm-tiles--10 .hm-tile { width: 10%; }
@media (min-width: 1025px) { .hm-tile--mobile { display: none; } } /* Elementor's "hide on desktop" */

/* landing page top: Elementor's boxed section (1140px, 10px column padding), h1 35px centred, the text under it */
.hm-intro { max-width: 1140px; margin: 14px auto 0; padding: 25px 10px; }
.hm-intro .hm-intro__title { margin: 0 0 20px; padding: 0; font-size: 35px; line-height: 1; text-align: center; }
.hm-intro__text { text-align: center; }

.hm-sale { max-width: 1500px; margin: 0 auto; padding: 25px 10px; }
.hm-sale .hm-heading__title { margin-bottom: 20px; padding: 0; }
.hm-products { padding-top: 18px; } /* padding, not margin: Elementor's flex column did not collapse it into the title's 20px */

@media (max-width: 1024px) {
	.hm-hero { min-height: 0; }
	.hm-hero__inner { padding: 48px 0 0 20px; }
	.hm-hero .hm-hero__title { font-size: 42px; }
	.hm-tile--pad { display: none; }
}
@media (max-width: 767px) {
	.hm-hero { min-height: 213px; padding-bottom: 27px; background-position: bottom center; background-size: 1000px auto; }
	.hm-hero__inner { margin-top: 9px; padding: 18px 15px 0; }
	.hm-hero .hm-hero__title { font-size: 25px; letter-spacing: -0.5px; }
	.hm-heading, .hm-sale { margin: 11px 0 6px; }
	.hm-heading__title { font-size: 19px; letter-spacing: 0; }
	.hm-intro { margin: 11px auto 6px; }
	.hm-intro .hm-intro__title { font-size: 24px; letter-spacing: 0; }
	.hm-tiles { padding: 0 8px; }
	.hm-tile { width: 33%; padding: 6px; }
	.hm-products { margin: 0 5px; padding-top: 0; }
}