/* Układ na mniejsze ekrany. Makiety są desktopowe (1440); progi 1100 / 860 / 560
   z paczki (layout.css) - wersja mobilna do zatwierdzenia przez klienta. */

@media (max-width: 1100px) {
	.ss-nav { display: none; }
	.ss-burger { display: inline-flex; order: 0; }
	.ss-bar { min-height: 72px; gap: 12px; }
	.ss-mega { display: none !important; }
	.ss-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ss-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ss-tabs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ss-promos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ss-usp { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ss-usp[style*="--ss-usp:4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ss-usp__i { border-bottom: 1px solid var(--ss-border); }
	.ss-best__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; }
	.ss-best__big { grid-column: 1 / -1; grid-row: auto; order: -1; }
	.ss-cats__i { grid-template-columns: 120px minmax(0, 1fr); gap: 20px; padding: 22px 24px; }
	.ss-cats__img { width: 120px; height: 120px; }
	.ss-lists { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ss-lists__banner { grid-column: 1 / -1; min-height: 220px; }
	.ss-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ss-footer__brand { grid-column: 1 / -1; max-width: none; }
	.ss-shop__body { grid-template-columns: 200px minmax(0, 1fr); gap: 28px; }
	.ss-shop__main .ss-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ss-pdp { gap: 32px; }
	.ss-short { padding: 40px 32px; }
	.ss-reviews { grid-template-columns: 280px minmax(0, 1fr); }
	.ss-reviews__list { grid-template-columns: 1fr; }
	.ss-cmp { overflow-x: auto; }
	.ss-cmp__row { min-width: 860px; }
	.ss-stages__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ss-account { grid-template-columns: 220px minmax(0, 1fr); gap: 28px; }
	/* minmax(0, 1fr), bo samo „1fr” nie pozwala kolumnie zejść poniżej treści
	   i nazwa produktu (white-space: nowrap) wypychała kafel poza ramkę. */
	.ss-suggest__grid { grid-template-columns: minmax(0, 1fr); }
	.ss-suggest__c a { white-space: normal; }
	.ss-pay__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.ss-topbar__m { display: none; }
	.ss-topbar__in { justify-content: space-between; gap: 12px; }
	.ss-tools .ss-search { display: none; }
	.ss-logo__txt { font-size: 15px; }
	.ss-hero__in { grid-template-columns: 1fr; gap: 0; min-height: 0; }
	.ss-hero__copy { padding: 32px 0 8px; order: 2; }
	.ss-hero__media { height: 260px; order: 1; padding-top: 16px; }
	.ss-hero__img { height: 240px; }
	.ss-kitchen__in, .ss-pdp, .ss-specfaq, .ss-reviews, .ss-short, .ss-feature, .ss-params, .ss-know, .ss-lhero__in, .ss-ahero, .ss-timeline, .ss-team, .ss-contact__in, .ss-faq__in, .ss-featpost, .ss-post__body, .ss-cartgrid, .ss-co, .ss-account, .ss-login, .ss-shop__title, .ss-seo, .ss-modal__box { grid-template-columns: 1fr; }
	.ss-feature--rev .ss-feature__media { order: 0; }
	.ss-feature__media { min-height: 300px; }
	.ss-team__img { min-height: 260px; }
	.ss-kitchen__media { min-height: 240px; }
	.ss-kitchen__media img { max-height: 240px; }
	.ss-hair--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ss-banners { grid-template-columns: 1fr; }
	.ss-lists { grid-template-columns: 1fr 1fr; }
	.ss-shop__body { grid-template-columns: 1fr; }
	.ss-gallery, .ss-reviews__sum, .ss-cartgrid__side, .ss-co__side, .ss-account__side, .ss-post__side, .ss-faq__side { position: static; }
	.ss-theme .ss-timeline h2 { position: static; }
	/* Telefon: zdjęcie na całą szerokość, miniatury (gdy >1) w rzędzie pod spodem. */
	.ss-gallery { grid-template-columns: minmax(0, 1fr); }
	.ss-gallery__thumbs { flex-direction: row; order: 2; overflow-x: auto; }
	.ss-gallery__thumb { width: 64px; flex: 0 0 64px; }
	.ss-grid--4, .ss-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ss-steps3, .ss-rules, .ss-tiles, .ss-addrs { grid-template-columns: 1fr; }
	.ss-lhero__copy { padding-bottom: 0; }
	.ss-lhero__media { min-height: 320px; }
	.ss-lhero__media img { max-height: 360px; }
	.ss-ahero__media { min-height: 420px; }
	.ss-ahero__prod { width: 180px; height: 180px; }
	.ss-ahero__cap { bottom: 192px; }
	.ss-stages { padding: 40px 28px; }
	.ss-cta, .ss-short, .ss-params__box { padding: 36px 28px; }
	.ss-featpost__img { min-height: 260px; }
	.ss-cohead__in { height: auto; padding: 12px 24px; flex-wrap: wrap; }
	.ss-steps { order: 3; width: 100%; font-size: 12px; }
	.ss-modal__img { display: none; }
	.ss-modal__copy { padding: 36px 28px; }
	.ss-line { grid-template-columns: 72px minmax(0, 1fr) auto; }
	.ss-line__img { width: 72px; height: 72px; }
	.ss-line__sum { grid-column: 2 / -1; align-items: flex-start; }
	.ss-order__body { grid-template-columns: 1fr; }
	.ss-order__acts { flex-direction: row; flex-wrap: wrap; }
	.ss-footer__top { grid-template-columns: 1fr 1fr; padding-top: 48px; }
	.ss-theme .ss-short h2 { font-size: 30px; }
}

@media (max-width: 560px) {
	.ss-wrap, .ss-topbar__in, .ss-bar, .ss-hero__in, .ss-mega__in, .ss-footer__top, .ss-footer__bin, .ss-nlbar__in, .ss-co, .ss-cohead__in { padding-left: 16px; padding-right: 16px; }
	.ss-topbar__l { display: none; }
	.ss-topbar__in { justify-content: center; gap: 16px; }
	.ss-grid--6, .ss-grid--3, .ss-grid--4, .ss-shop__main .ss-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
	.ss-card__btn { right: 8px; bottom: 8px; height: 32px; padding: 0 10px; font-size: 12px; }
	.ss-card__name { font-size: 13.5px; }
	.ss-promos { grid-template-columns: 1fr; }
	.ss-usp { grid-template-columns: 1fr 1fr; }
	.ss-kitchen__grid, .ss-hair--3, .ss-cats, .ss-lists, .ss-blog__grid, .ss-co__grid, .ss-co__addr, .ss-co__inv, .ss-form2, .ss-form2__passgrid, .ss-contact__form .ss-row, .ss-perks, .ss-short__stats, .ss-stages__grid, .ss-trust { grid-template-columns: 1fr; }
	.ss-best__grid { grid-template-columns: 1fr 1fr; }
	.ss-tabs__bar { justify-content: flex-start; overflow-x: auto; }
	.ss-tabs__bar button { white-space: nowrap; padding: 12px 12px; }
	.ss-theme .ss-shop__title h1, .ss-theme .ss-faq__side h1, .ss-theme .ss-textpage h1 { font-size: 34px; }
	.ss-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
	.ss-panel, .ss-contact__form, .ss-login__form, .ss-login__reg { padding: 24px 20px; }
	.ss-emptybox { padding: 40px 20px; }
	.ss-feature__copy { padding: 28px 24px; }
	.ss-theme .ss-feature__copy h3 { font-size: 24px; }
	.ss-summary__meta { gap: 8px; }
	.ss-buy { flex-wrap: wrap; }
	.ss-buy__add { flex-basis: 100%; }
	.ss-pay__grid { grid-template-columns: 1fr; }
	.ss-footer__top { grid-template-columns: 1fr; }
	.ss-toasts { left: 16px; right: 16px; bottom: 16px; }
	.ss-toast { width: 100%; }
	.ss-lhero__nums { gap: 18px; flex-wrap: wrap; }
	.ss-ahero__nums { gap: 20px; flex-wrap: wrap; }
	.ss-theme .ss-stages h2, .ss-theme .ss-cta h2, .ss-theme .ss-params h2 { font-size: 28px; }
	.ss-reviews__list { grid-template-columns: 1fr; }
	.ss-pagehead { flex-wrap: wrap; }
	.ss-theme .ss-pagehead h1 { font-size: 32px; }
	.ss-cohead__safe { display: none; }
	.ss-bar { flex-wrap: nowrap; gap: 8px; min-height: 64px; }
	.ss-logo { gap: 8px; min-width: 0; }
	.ss-logo__mark { width: 32px; height: 32px; }
	.ss-logo__txt { font-size: 14px; letter-spacing: .04em; }
	.ss-tools { gap: 0; }
}