/* ==========================================================================
   Responsive overrides
   ========================================================================== */

@media (max-width: 1200px) {
	.sc-hero__title { font-size: 34px; }
	.sc-hero__content { padding: 0 40px; }

	.sc-shop-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 30px; }
	.sc-single-layout { grid-template-columns: 55% minmax(0, 1fr); gap: 36px; }
}

@media (max-width: 1024px) {
	.sc-nav > li > a { padding: 15px 11px; font-size: 12px; }

	.sc-grid,
	.sc-grid--4,
	.sc-grid--5,
	.sc-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.sc-shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sc-split__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.sc-hero__content { max-width: 60%; }
}

@media (max-width: 860px) {
	/* Header collapses to a burger + logo + tools row */
	.sc-header__left .sc-header__text { display: none; }
	.sc-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; }
	.sc-header__left { flex: 0 0 auto; }
	/* Right tool group must shrink-to-fit instead of keeping the 26% desktop basis
	   (26% no-shrink + wide logo pushed cart icon off-screen). */
	.sc-header__right { flex: 0 0 auto; min-width: 0; }
	.sc-header__inner { gap: 12px; }
	.sc-tools { gap: 12px; }
	/* Center column may shrink below the logo's min-content width. */
	.sc-header__center { flex: 1 1 0; min-width: 0; }
	.sc-logo,
	.sc-logo__link { min-width: 0; }
	/* header.css sets max-width:none !important + width:auto !important for the
	   desktop wordmark; on mobile give the logo an explicit responsive width so it
	   scales down instead of pushing the tool icons off-screen (natural 292x30). */
	.sc-header .site-branding img,
	.sc-logo img {
		width: clamp(120px, 38vw, 190px) !important;
		max-width: none !important;
		height: auto !important;
		max-height: none !important;
	}

	.sc-nav-row {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		border-bottom: 1px solid #eee;
		box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
		max-height: 78vh;
		overflow-y: auto;
		z-index: 700;
	}

	.sc-nav-row.is-open { display: block; }

	.sc-nav {
		display: block;
		padding: 10px 0;
	}

	.sc-nav > li { border-bottom: 1px solid #f4f4f4; }

	.sc-nav > li > a { padding: 14px 20px; }

	.sc-nav > li > a::after { display: none; }

	.sc-nav .sub-menu {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		box-shadow: none;
		border: 0;
		padding: 0 0 8px;
		min-width: 0;
		display: none;
	}

	.sc-nav li.is-open > .sub-menu {
		display: block;
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
	}

	.sc-nav .sub-menu a { padding: 7px 34px; }

	/* Hero stacks */
	.sc-hero__content {
		position: static;
		transform: none;
		max-width: 100%;
		padding: 30px 24px 34px;
	}

	.sc-hero__media img { min-height: 0; }

	/* Grids */
	.sc-grid,
	.sc-grid--3,
	.sc-grid--4,
	.sc-grid--5,
	.sc-grid--6,
	.sc-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.sc-tiles__grid { grid-template-columns: 1fr; }
	.sc-social__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.sc-split__inner { grid-template-columns: 1fr; gap: 26px; }
	.sc-split--right .sc-split__media { order: 0; }

	.sc-shop-layout { grid-template-columns: 1fr; }

	.sc-filters {
		display: none;
		margin-bottom: 26px;
	}

	.sc-filters.is-open { display: block; }

	.sc-shop-filters-toggle { display: inline-block; }

	.sc-single-layout { grid-template-columns: 1fr; gap: 26px; }

	.sc-gallery { grid-template-columns: 72px minmax(0, 1fr); }

	.sc-tabs__nav { gap: 20px; overflow-x: auto; justify-content: flex-start; }
	.sc-tabs__nav button { white-space: nowrap; }

	.sc-footer__cols { grid-template-columns: 1fr 1fr; }

	.sc-banner__media img { height: 320px; }
}

@media (max-width: 560px) {
	.sc-logo__text { font-size: 22px; letter-spacing: 0.12em; }

	.sc-hero__subtitle { font-size: 24px; }
	.sc-hero__title { font-size: 26px; }

	.sc-section-title,
	.sc-intro .sc-section-title { font-size: 26px; }

	.sc-grid,
	.sc-grid--3,
	.sc-grid--4,
	.sc-shop-grid { gap: 20px 12px; }

	.sc-split__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.sc-social__row { grid-template-columns: 1fr 1fr; }

	.sc-footer__cols { grid-template-columns: 1fr; gap: 26px; }

	.sc-summary__title,
	.product_title { font-size: 24px; }

	.sc-gallery { grid-template-columns: 60px minmax(0, 1fr); gap: 10px; }

	.sc-product__title { min-height: 0; }
}