/*
Theme Name: WEB-MASTER NEW DESIGN
Theme URI: https://web-master.kz/
Author: WEB-MASTER.KZ
Description: Блочная тема WordPress по референсу web-master.kz — создание и продвижение сайтов.
Version: 1.6.1
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: webmaster
*/

:root{
	/* Дизайн-токены нового дизайна (mytoy_new.pen) — синхронно с theme.json */
	--color-accent: #FF5C00;
	--color-accent-hover: #E65300;
	--color-accent-2: #FF8533;
	--color-accent-soft: #FFF2E8;
	--color-text: #1A1A1A;
	--color-text-2: #666666;
	--color-muted: #888888;
	--color-black: #000000;
	--color-border: #F3F4F6;
	--color-surface: #F7F8FA;
	--color-dark: #1A1A1A;
	--color-bg: #ffffff;
	--gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-2) 100%);

	--font-body: "Inter", sans-serif;
	--font-heading: "Playfair Display", serif;
	--font-logo: "Sniglet", cursive;

	/* Контент — 1760px, поля страницы 80 / 24 (≤1200) / 16 (≤600) */
	--container-width: 1760px;
	--page-gutter: 80px;
	/* max-width контейнеров (border-box): контент + поля с двух сторон */
	--container-max: calc(var(--container-width) + 2 * var(--page-gutter));
	--gap: 30px;
	--radius-md: 6px;
	--radius: 8px;
	--radius-xl: 12px;
	--radius-full: 9999px;

	/* Вертикальный ритм и шкала заголовков */
	--section-pad: 64px;
	--h1-size: 32px;
	--h2-size: 36px;
	--h3-size: 22px;
	--text-size: 15px;

	/* Кнопка-«пилюля» */
	--btn-pad: 12px 24px;
	--btn-size: 16px;

	/* шапка (header.css) */
	--header-pad-y: 20px;
	--header-gap: 32px;
	--header-brand-gap: 10px;
	--header-mark-size: 36px;
	--header-logo-size: 32px;
	--header-tagline-display: block;
	--header-nav-size: 15px;
	--header-nav-pad: 8px 16px;
	--header-actions-gap: 24px;
	--header-phone-size: 15px;
	--header-phone-display: block;
	--header-phone-icon: 18px;
	--header-phone-icon-display: block;
	--header-search-size: 44px;
	/* мобильное меню (оверлей бургера, ≤1200px) */
	--header-menu-padding: 16px 24px 32px;
	--header-menu-content-top: 44px;
	--header-menu-item-size: 17px;
	--header-menu-item-padding: 14px 0;
	--header-menu-sub-size: 15px;
	--header-menu-sub-padding: 8px 0 8px 22px;

	--section-gap: 60px;

	/* главная (home.css, slider.css, advantages.css) */
	--home-head-gap: 40px;
	--home-desc-size: 16px;
	--home-link-size: 15px;
	--hero-height: 560px;
	--hero-gap: 24px;
	--hero-tag-display: block;
	--hero-tag-pad: 6px 14px;
	--hero-tag-size: 13px;
	--hero-title-size: 56px;
	--hero-title-width: 700px;
	--hero-desc-size: 18px;
	--hero-desc-width: 550px;
	--hero-btn-size: 16px;
	--hero-nav-display: block;
	--hero-dots-bottom: 24px;
	--adv-cols: 4;
	--adv-gap: 32px;
	--adv-direction: column;
	--adv-align: center;
	--adv-item-gap: 12px;
	--adv-item-pad: 24px;
	--adv-circle: 56px;
	--adv-circle-bg: var(--color-accent-soft);
	--adv-icon: 24px;
	--adv-title-size: 16px;
	--adv-desc-size: 14px;
	--adv-desc-display: block;
	--cats-visible: 6;
	--cats-gap: 24px;
	--cats-circle: 180px;
	--cats-name-size: 16px;
	--popular-cols: 4;
	--about-home-gap: 64px;
	--about-home-image: 400px;
	--about-home-stack-gap: 20px;
	--about-home-tag-size: 13px;
	--about-home-title-size: 32px;
	--subscribe-pad: 80px;
	--subscribe-gap: 24px;
	--subscribe-form-direction: row;
	--subscribe-form-gap: 12px;
	--subscribe-form-width: 560px;
	--subscribe-field-height: 50px;
	--subscribe-field-size: 15px;
	--subscribe-radius: var(--radius-full);

	/* каталог: карточки, каркас внутренних страниц, крошки, сайдбар, пагинация (catalog.css) */
	--catalog-accent: var(--color-accent);
	--catalog-accent-hover: var(--color-accent-hover);
	--catalog-image-bg: var(--color-surface);
	--card-shadow: 0 2px 4px rgba(0, 0, 0, .03), 0 12px 32px rgba(0, 0, 0, .06);
	--card-shadow-hover: 0 4px 8px rgba(0, 0, 0, .05), 0 16px 40px rgba(0, 0, 0, .1);
	--card-pad: 16px;
	--card-gap: 8px;
	--catalog-card-min: 210px;
	--catalog-gap: 24px;
	--catalog-card-image: 220px;
	--catalog-card-title-size: 15px;
	--catalog-card-price-size: 18px;
	--catalog-card-btn-pad: 12px 24px;
	--catalog-card-btn-size: 14px;
	--catalog-page-top: 32px;
	--catalog-page-bottom: 64px;
	--catalog-head-gap: 12px;
	--catalog-body-top: 32px;
	--catalog-body-gap: 32px;
	--catalog-crumbs-size: 13px;
	--catalog-text-size: 15px;
	--catalog-sidebar-width: 260px;
	--catalog-sidebar-gap: 4px;
	--catalog-sidebar-box-gap: 16px;
	--catalog-sidebar-title-size: 16px;
	--catalog-sidebar-size: 14px;
	--catalog-sidebar-sub-size: 13px;
	--catalog-pagination-top: 40px;
	--catalog-pagination-size: 40px;
	--catalog-switch-gap: 12px;
	--catalog-chip-height: 36px;
	--catalog-chip-size: 13px;
	/* старые имена — ещё используются в секциях, которые переделываются в следующих фазах */
	--catalog-title-size: var(--h1-size);
	--catalog-gap-x: var(--catalog-gap);
	--catalog-btn-radius: var(--radius-full);

	--service-columns: 3;
	--service-card-image: 180px;
	--service-stack-gap: 24px;
	--service-image-height: 320px;

	--home-services-cols: 4;
	--home-services-ratio: 270 / 380;
	--home-services-bar-bg: rgba(0, 0, 0, .7);

	/* новости: карточка списка и дата статьи (news.css) */
	--news-card-gap: 24px;
	--news-card-pad: 24px;
	--news-line-gap: 12px;
	--news-date-size: 13px;
	--news-title-size: 20px;
	--news-text-size: 14px;
	--news-excerpt-lines: 3;
	/* Акции: плашка срока рядом с датой (sales.css) */
	--sale-meta-gap-x: 16px;
	--sale-meta-gap-y: 6px;
	--sale-period-size: 14px;
	--sale-period-pad-x: 10px;
	--sale-period-pad-y: 3px;

	/* страницы с сайдбаром, «О нас» (about.css) */
	--about-block-gap: 24px;
	--about-title-size: 24px;
	--about-title-gap: 16px;
	--about-text-size: 15px;
	--about-details-size: 14px;
	--about-photo-cols: 2;
	--about-photo-gap: 24px;
	--about-photo-height: 280px;
	--about-requisites-pad: 24px;
	--about-requisites-title: 22px;

	/* контакты (contacts.css) */
	--contacts-map-height: 300px;
	--contacts-top: 32px;
	--contacts-gap: 32px;
	--contacts-block-gap: 24px;
	--contacts-item-gap: 8px;
	--contacts-title-size: 14px;
	--contacts-text-size: 15px;
	--contacts-form-pad: 32px;
	--contacts-form-title-size: 22px;

	/* сертификаты (certificates.css) */
	--cert-cols: 3;
	--cert-gap: 24px;
	--cert-height: 320px;
	--cert-pad: 16px;
	--cert-caption-gap: 10px;
	--cert-caption-size: 14px;

	--gallery-cols: 3;
	--gallery-gap: 24px;
	--gallery-radius: var(--radius-xl);
	--gallery-caption-size: 16px;
	--gallery-caption-gap: 12px;
	--gallery-zoom-size: 48px;

	--faq-gap: 12px;
	--faq-q-size: 16px;
	--faq-q-pad: 18px 24px;
	--faq-a-size: 15px;
	--faq-a-pad: 24px;
	--faq-sign-size: 28px;
	--faq-sign-gap: 14px;
	--faq-ask-top: 40px;
	--faq-ask-width: 600px;
	--faq-ask-pad: 32px;
	--faq-ask-title-size: 22px;

	--e404-pad: 60px 0 40px;
	--e404-code-size: 180px;
	--e404-text-size: 20px;
	--e404-text-width: 640px;
	--e404-gap: 24px;
	--e404-buttons-top: 16px;
	--e404-btn-width: auto;
	--e404-btn-height: 48px;

	--home-news-span-first: 6;
	--home-news-span: 3;
	--home-news-gap-x: 30px;
	--home-news-gap-y: 30px;
	--home-news-height: 400px;
	--home-news-ratio: 287 / 235;
	--home-news-bar: 75px;
	--home-news-bar-pad: 25px;
	--home-news-name-size: 18px;

	--home-cats-more-top: 32px;
	--home-more-width: 270px;
	--home-more-height: 48px;
	--home-title-gap: 40px;
	--carousel-cols: 4;
	--carousel-btn-height: 48px;
	--carousel-arrow-size: 44px;
	--carousel-arrow-offset: 74px;
	--carousel-chevron: 18px;

	/* страница товара (product.css) */
	--product-area-gap: 40px;
	--product-info-gap: 20px;
	--product-title-size: 28px;
	--product-photo-height: 400px;
	--product-thumb-height: 80px;
	--product-thumb-gap: 8px;
	--product-spec-size: 14px;
	--product-price-size: 32px;
	--product-old-price-size: 18px;
	--product-tabs-top: 32px;
	--product-section-pad: 32px;
	--product-heading-size: 24px;

	/* поля форм (order-form.css) */
	--field-pad: 13px 16px;
	--field-size: 15px;
	--field-border: #E5E7EB;
	--order-btn-height: 48px;
	--order-btn-size: 16px;
	--order-dialog-width: 480px;
	--order-dialog-padding: 32px;
	--order-title-size: 24px;

	--cta-min-height: 250px;
	--cta-padding-top: 50px;
	--cta-padding-bottom: 50px;
	--cta-text-width: 570px;
	--cta-title-size: 32px;
	--cta-title-line: 39px;
	--cta-title-width: 470px;
	--cta-title-gap: 24px;
	--cta-text-size: 18px;
	--cta-text-line: 22px;
	--cta-btn-width: 213px;
	--cta-btn-height: 48px;
	--cta-btn-size: 15px;
	--cta-btn-gap: 30px;
	--cta-align: left;
	--cta-direction: row;

	/* подвал (footer.css) */
	--footer-bg: var(--color-dark);
	--footer-text: #ffffff;
	--footer-muted: rgba(255, 255, 255, .6);
	--footer-faint: rgba(255, 255, 255, .4);
	--footer-line: rgba(255, 255, 255, .1);
	--footer-pad: 64px var(--page-gutter) 32px;
	--footer-gap: 48px;
	--footer-brand-width: 300px;
	--footer-col-gap: 64px;
	--footer-item-gap: 12px;
	--footer-name-size: 28px;
	--footer-font-size: 14px;
	--footer-title-size: 14px;
	--footer-copyright-size: 13px;
	--footer-bottom-pad: 24px;
	--footer-developer-width: 120px;

	--social-size: 48px;
	--social-gap: 10px;
	--social-right: 70px;
}

@media (max-width: 1200px){
	:root{
		--page-gutter: 24px;
		--section-pad: 48px;
		--header-pad-y: 16px;
		--header-mark-size: 32px;
		--header-logo-size: 26px;
		--header-tagline-display: none;
		--header-actions-gap: 16px;
		--header-phone-size: 13px;
		--header-phone-icon-display: none;
		--header-search-size: 36px;
		--footer-pad: 40px var(--page-gutter) 24px;
		--footer-gap: 32px;
		--footer-brand-width: 200px;
		--footer-col-gap: 24px;
		--footer-name-size: 22px;
		--footer-font-size: 13px;
		--footer-title-size: 13px;
		--footer-copyright-size: 12px;
		--footer-bottom-pad: 20px;
		--h1-size: 28px;
		--h2-size: 28px;
		--h3-size: 20px;
		--text-size: 14px;
		--btn-size: 14px;
		--home-head-gap: 32px;
		--home-desc-size: 14px;
		--home-link-size: 14px;
		--hero-height: 380px;
		--hero-gap: 16px;
		--hero-tag-pad: 5px 12px;
		--hero-tag-size: 11px;
		--hero-title-size: 36px;
		--hero-title-width: 500px;
		--hero-desc-size: 15px;
		--hero-desc-width: 400px;
		--hero-btn-size: 14px;
		--hero-nav-display: none;
		--hero-dots-bottom: 16px;
		--adv-gap: 16px;
		--adv-item-gap: 8px;
		--adv-item-pad: 16px;
		--adv-circle: 44px;
		--adv-icon: 20px;
		--adv-title-size: 13px;
		--adv-desc-display: none;
		--cats-visible: 5;
		--cats-gap: 16px;
		--cats-circle: 100px;
		--cats-name-size: 13px;
		--popular-cols: 3;
		--about-home-image: 260px;
		--about-home-tag-size: 12px;
		--about-home-title-size: 26px;
		--subscribe-pad: 48px;
		--subscribe-gap: 20px;
		--subscribe-form-width: 100%;
		--subscribe-field-height: 46px;
		--subscribe-field-size: 14px;

		--section-gap: 45px;

		--cta-padding-top: 29px;
		--cta-padding-bottom: 37px;
		--cta-title-gap: 16px;

		--catalog-gap: 16px;
		--service-stack-gap: 20px;
		--about-block-gap: 20px;
		--about-title-size: 22px;
		--about-text-size: 14px;
		--about-photo-gap: 16px;
		--about-photo-height: 240px;
		--about-requisites-title: 20px;
		--contacts-map-height: 240px;
		--contacts-top: 24px;
		--contacts-gap: 24px;
		--contacts-text-size: 14px;
		--contacts-form-pad: 24px;
		--contacts-form-title-size: 20px;
		--cert-gap: 16px;
		--cert-height: 240px;
		--cert-pad: 12px;
		--cert-caption-size: 13px;
		--news-card-gap: 16px;
		--news-title-size: 18px;
		--service-image-height: 240px;
		--product-area-gap: 24px;
		--product-info-gap: 16px;
		--product-title-size: 24px;
		--product-photo-height: 320px;
		--product-thumb-height: 64px;
		--product-price-size: 28px;
		--product-old-price-size: 16px;
		--product-tabs-top: 24px;
		--product-section-pad: 24px;
		--product-heading-size: 22px;
		--order-btn-height: 44px;
		--catalog-page-top: 24px;
		--catalog-page-bottom: 48px;
		--catalog-body-top: 20px;
		--catalog-pagination-size: 36px;
		--catalog-pagination-top: 32px;
		--catalog-text-size: 14px;

		--home-services-cols: 2;
		--home-services-ratio: 350 / 408;

		--gallery-gap: 24px;

		--faq-ask-top: 40px;

		--e404-pad: 40px 0 30px;
		--e404-code-size: 150px;
		--e404-text-size: 18px;

		--home-news-span-first: 12;
		--home-news-span: 6;
		--home-news-gap-x: 40px;
		--home-news-gap-y: 32px;

		--carousel-cols: 3;
		--carousel-chevron: 12px;

	}
}

@media (max-width: 781px){
	:root{
		--gallery-cols: 2;
		--gallery-gap: 16px;

		--faq-q-size: 16px;
		--faq-a-size: 15px;
		--faq-sign-size: 26px;
		--faq-ask-pad: 24px;
		--faq-ask-width: 100%;

		--section-gap: 32px;

		--cta-padding-top: 25px;
		--cta-padding-bottom: 24px;
		--cta-title-size: 28px;
		--cta-title-line: 34px;
		--cta-title-width: none;
		--cta-text-width: none;
		--cta-text-size: 16px;
		--cta-text-line: 20px;
		--cta-btn-width: 290px;
		--cta-btn-size: 18px;
		--cta-btn-gap: 24px;
		--cta-align: center;
		--cta-direction: column;

		--home-cats-more-top: 24px;
		--home-title-gap: 20px;
		--carousel-cols: 2;
		--carousel-btn-height: 45px;
		--carousel-arrow-size: 36px;

		--order-dialog-padding: 24px 20px;
		--order-title-size: 20px;

		--footer-developer-width: 100px;

		--social-size: 44px;
	}
}

/* Каталог: 2 колонки на планшете (макет 768), одна — на телефоне (макет 320). Страница услуги: фото в край, «Заказать» во всю ширину. */
@media (max-width: 600px){
	:root{
		--page-gutter: 16px;
		--section-pad: 36px;
		--header-pad-y: 12px;
		--header-brand-gap: 6px;
		--header-mark-size: 28px;
		--header-logo-size: 20px;
		--header-phone-display: none;
		--header-search-size: 32px;
		--header-menu-padding: 12px 16px 32px;
		--footer-pad: 32px var(--page-gutter) 20px;
		--footer-gap: 20px;
		--footer-item-gap: 8px;
		--footer-name-size: 20px;
		--footer-font-size: 13px;
		--footer-copyright-size: 11px;
		--h1-size: 22px;
		--h2-size: 22px;
		--h3-size: 18px;
		--text-size: 13px;
		--btn-size: 13px;
		--home-head-gap: 20px;
		--home-desc-size: 13px;
		--home-link-size: 13px;
		--hero-height: 280px;
		--hero-gap: 12px;
		--hero-tag-display: none;
		--hero-title-size: 24px;
		--hero-title-width: 100%;
		--hero-desc-size: 13px;
		--hero-desc-width: 100%;
		--hero-btn-size: 13px;
		--hero-dots-bottom: 12px;
		--adv-cols: 1;
		--adv-gap: 12px;
		--adv-direction: row;
		--adv-align: left;
		--adv-item-gap: 10px;
		--adv-item-pad: 0;
		--adv-circle: 24px;
		--adv-circle-bg: transparent;
		--adv-icon: 24px;
		--popular-cols: 2;
		--about-home-image: 180px;
		--about-home-stack-gap: 16px;
		--about-home-tag-size: 11px;
		--about-home-title-size: 20px;
		--subscribe-pad: 36px;
		--subscribe-gap: 16px;
		--subscribe-form-direction: column;
		--subscribe-form-gap: 8px;
		--subscribe-field-height: 40px;
		--subscribe-field-size: 13px;
		--subscribe-radius: var(--radius);
		--home-more-width: 100%;
		--catalog-card-min: 130px;
		--service-stack-gap: 16px;
		--about-block-gap: 16px;
		--about-title-size: 20px;
		--about-text-size: 13px;
		--about-details-size: 13px;
		--about-photo-cols: 1;
		--about-photo-gap: 12px;
		--about-photo-height: 200px;
		--about-requisites-pad: 20px;
		--about-requisites-title: 18px;
		--contacts-map-height: 180px;
		--contacts-top: 16px;
		--contacts-gap: 16px;
		--contacts-block-gap: 12px;
		--contacts-item-gap: 4px;
		--contacts-title-size: 12px;
		--contacts-text-size: 13px;
		--contacts-form-pad: 20px;
		--contacts-form-title-size: 18px;
		--cert-cols: 1;
		--cert-gap: 12px;
		--cert-height: 200px;
		--news-card-gap: 12px;
		--news-card-pad: 20px;
		--news-line-gap: 10px;
		--news-date-size: 12px;
		--news-title-size: 17px;
		--news-text-size: 13px;
		--news-excerpt-lines: 4;
		--service-image-height: 200px;
		--product-info-gap: 14px;
		--product-title-size: 20px;
		--product-photo-height: 240px;
		--product-thumb-height: 56px;
		--product-spec-size: 13px;
		--product-price-size: 24px;
		--product-heading-size: 20px;
		--order-btn-height: 42px;
		--catalog-gap: 12px;
		--catalog-card-image: 110px;
		--catalog-card-title-size: 12px;
		--catalog-card-price-size: 13px;
		--catalog-card-btn-pad: 10px 16px;
		--catalog-card-btn-size: 12px;
		--card-pad: 12px;
		--card-gap: 6px;
		--catalog-page-top: 16px;
		--catalog-page-bottom: 36px;
		--catalog-head-gap: 8px;
		--catalog-body-top: 16px;
		--catalog-crumbs-size: 11px;
		--catalog-text-size: 13px;
		--catalog-chip-height: 32px;
		--catalog-chip-size: 12px;
		--service-columns: 1;
		--home-services-cols: 1;
		--home-services-ratio: 288 / 336;
		--sale-meta-gap-x: 10px;
		--sale-period-size: 13px;
		--sale-period-pad-x: 8px;
		--gallery-cols: 1;
		--gallery-gap: 16px;
		--gallery-caption-size: 14px;
		--faq-q-pad: 12px 12px;
		--faq-a-pad: 12px;
		--faq-sign-size: 24px;
		--faq-sign-gap: 8px;
		--faq-ask-top: 32px;
		--faq-ask-pad: 20px;
		--faq-ask-title-size: 18px;
		--e404-pad: 24px 0 8px;
		--e404-code-size: 96px;
		--e404-text-size: 16px;
		--e404-gap: 16px;
		--e404-buttons-top: 8px;
		--e404-btn-width: 100%;
		--e404-btn-height: 45px;
		--home-news-gap-x: 16px;
		--home-news-bar: 45px;
		--home-news-bar-pad: 17px;
		--home-news-name-size: 16px;
		--carousel-cols: 1;
	}
}

body{
	color: var(--color-text);
	background: var(--color-bg);
	font-family: var(--font-body);
}

/* Заголовки — Playfair Display (шрифт задан и в theme.json → elements.heading) */
h1, h2, h3, h4, h5, h6,
.wp-block-post-title{
	font-family: var(--font-heading);
	font-weight: 700;
}

/* Кнопка-«пилюля» (Button/Primary макета); вариант «Контур» — Button/Secondary */
:root :where(.wp-block-button) .wp-block-button__link{
	padding: var(--btn-pad);
	border-radius: var(--radius-full);
	background: var(--color-accent);
	color: #fff;
	font-size: var(--btn-size);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .2s;
}

:root :where(.wp-block-button) .wp-block-button__link:hover{
	background: var(--color-accent-hover);
	color: #fff;
}

:root :where(.wp-block-button.is-style-outline) .wp-block-button__link{
	background: var(--color-bg);
	color: var(--color-text);
	border: 1px solid var(--color-border);
}

:root :where(.wp-block-button.is-style-outline) .wp-block-button__link:hover{
	border-color: var(--color-accent);
	color: var(--color-accent);
	background: var(--color-bg);
}

a{
	color: inherit;
}

.nav p,
figure{
	margin: 0;
}

.wp-site-blocks > main,
.wp-site-blocks > footer{
	margin-block-start: 0;
}

/* Отступ между секциями главной (как .block + .block в референсе) и перед футером. */
.wp-block-post-content.wp-block-post-content > * + *{
	margin-block-start: var(--section-gap);
}

.wp-block-post-content.wp-block-post-content > :last-child{
	margin-block-end: var(--section-gap);
}

/* Секции — в отдельных файлах (подключены в functions.php, на сайте и в редакторе):
   assets/css/header.css, assets/css/slider.css, assets/css/footer.css */