/* Mobile refinements (loaded last). Breakpoint: 760px = phones and small tablets. */

/* Filter toggle and sticky bars are mobile-only. */
.filters-toggle { display: none; }
.hm-sticky-bar { display: none; }

@media (max-width: 760px) {
	:root {
		--gutter: 18px;
		--section-y: 44px;
	}

	/* iOS zooms into any field under 16px. */
	input, select, textarea { font-size: 16px !important; }

	/* ---------- Header ---------- */

	/* USP bar: one line, the items rotate (site.js). */
	.usp-bar__list { position: relative; display: block; height: 34px; padding: 0 var(--gutter); overflow: hidden; text-align: center; }
	.usp-bar__list li { position: absolute; inset: 0 var(--gutter); display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .4s ease; }
	.usp-bar__list li:first-child,
	.usp-bar__list li.is-current { opacity: 1; }
	.usp-bar__list.is-rotating li:first-child:not(.is-current) { opacity: 0; }

	.hmc-bar { padding: 8px var(--gutter) !important; font-size: 13px !important; }

	/* Logo, search, cart and menu on one row. */
	.site-header__main { flex-wrap: wrap; gap: 0 6px; padding-block: 10px; }
	.site-logo { font-size: 19px; margin-right: auto; }
	.site-header__actions { order: 2; gap: 6px; margin-left: 0; }
	.nav-toggle { order: 3; }
	.cart-link { padding: 0 14px; gap: 6px; }

	/* The header stays in reach while scrolling; the USP line (34px) scrolls away. */
	.site-header { position: sticky; top: 0; }
	.site-header:has(> .usp-bar) { top: -34px; }
	.admin-bar .site-header { top: 46px; }
	.admin-bar .site-header:has(> .usp-bar) { top: 12px; }

	/* Open menu: full-width panel below the header, scrolls on its own. */
	.site-nav.is-open {
		max-height: calc(100vh - 70px); overflow-y: auto; overscroll-behavior: contain;
		margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 16px;
	}
	.site-nav__list > li { border-bottom: 1px solid var(--color-line-soft); }
	.site-nav__link { min-height: 52px; font-size: 18px; font-weight: 600; }
	.site-nav__list .sub-menu { padding: 0 0 10px 0; }
	.site-nav__list .sub-menu a { padding: 10px 0; font-size: 16px; color: var(--color-muted); }
	body.hm-menu-open { overflow: hidden; }

	.site-search__form .btn { flex: none; }

	/* ---------- Grids ---------- */

	.product-grid,
	.product-grid--home,
	.related .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
	.product-card__title { font-size: 15px; }
	.product-card__meta { font-size: 13px; }
	.product-card__badge { top: 8px; left: 8px; font-size: 11px; padding: 4px 8px; }
	.product-card__row { flex-direction: column; align-items: flex-start; gap: 6px; }
	.product-card__row .btn { min-height: 36px; padding: 0 12px; font-size: 13px; }

	.cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
	.cat-card__media { aspect-ratio: 1 / 1; }
	.cat-card__name { font-size: 15px; }
	.cat-card__sub { font-size: 13px; }

	.section-head { margin-bottom: 18px; }

	/* ---------- Front page ---------- */

	.hero { gap: 28px; padding-block: 28px 8px; }
	.hero__text { gap: 18px; }
	.hero__text .btn-row, .hero__text .btn-row .btn { width: 100%; }
	.hero__media { height: 300px; gap: 10px; }
	.story__inner { gap: 28px; }
	.story__steps { gap: 20px; }
	.feature { gap: 24px; border-radius: var(--radius-media); }
	.feature__media { height: 260px; flex-basis: 100%; }
	.about-teaser { gap: 24px; padding-bottom: 56px; }
	.about-teaser__media { height: 280px; flex-basis: 100%; }

	/* ---------- Category page ---------- */

	.archive-head { padding-top: 20px; gap: 12px; }
	.archive-head__row { align-items: baseline; }
	/* Sub-category chips scroll sideways instead of wrapping into many rows. */
	.archive-head__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
	.archive-head__chips::-webkit-scrollbar { display: none; }
	.archive-head__chips .chip { white-space: nowrap; }

	.archive-body { gap: 0; padding-top: 12px; padding-bottom: 56px; }
	.filters { display: none; order: 0; margin-bottom: 20px; padding: 18px; background: var(--color-white); border: 1px solid var(--color-line-soft); border-radius: var(--radius-card); }
	.filters.is-open { display: flex; }
	.archive-body__main { order: 1; gap: 16px; }

	.archive-toolbar { position: sticky; top: 64px; z-index: 10; justify-content: space-between; gap: 10px; padding: 8px 0; background: var(--color-bg); }
	.admin-bar .archive-toolbar { top: 110px; }
	.filters-toggle { display: inline-flex; gap: 8px; min-height: var(--control-h); }
	.filters-toggle__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--color-ink); color: var(--color-white); font-size: 12px; }
	.woocommerce-ordering::before { content: none; }
	.woocommerce-ordering select { max-width: 52vw; }

	/* ---------- Product page ---------- */

	.product-page__crumbs { padding-top: 16px; }
	.product-layout { gap: 24px; padding-top: 12px; padding-bottom: 48px; }
	.product-layout__summary { gap: 18px; }

	/* Thumbnails: one row that scrolls sideways. */
	.woocommerce-product-gallery .flex-control-thumbs {
		display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-top: 10px;
	}
	.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar { display: none; }
	.woocommerce-product-gallery .flex-control-thumbs li { flex: 0 0 64px; }
	.woocommerce-product-gallery .flex-control-thumbs img { width: 64px; height: 64px; }
	.woocommerce-product-gallery .flex-viewport,
	.woocommerce-product-gallery__image:only-child { border-radius: var(--radius-card); }

	/* Buy first, read after: the form moves above the long intro. */
	.product-layout__summary > form.cart,
	.product-layout__summary > .product-summary__notify,
	.product-layout__summary > .hmc-leadtime,
	.product-layout__summary > .notice-box { order: 1; }
	.product-layout__summary > .product-summary__cat,
	.product-layout__summary > .product-summary__title,
	.product-layout__summary > .price,
	.product-layout__summary > .woocommerce-product-rating { order: 0; }
	.product-layout__summary > .info-box { order: 2; }
	.product-layout__summary > .product-summary__intro { order: 3; }
	.product-layout__summary > .accordion { order: 4; }
	.product-layout__summary > * { order: 5; } /* anything plugins add goes last */

	.product-summary__title { margin-top: -8px; }
	.single_add_to_cart_button { flex-basis: 100%; }
	.woocommerce-variation-add-to-cart .quantity { flex: none; }
	.woocommerce-variation-add-to-cart .single_add_to_cart_button { flex: 1 1 0; }
	.swatch { width: 44px; height: 44px; }
	.info-box { padding: 14px 16px; gap: 10px; }

	.related { padding-bottom: 56px; }

	/* ---------- Cart ---------- */

	.cart-layout { gap: 24px; padding-block: 24px 48px; }
	.cart-layout__side { flex-basis: 100%; max-width: none; min-width: 0; }
	.summary-box { padding: 20px; border-radius: var(--radius-card); }

	.cart-item { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "media body" "media total"; gap: 4px 14px; padding: 16px 0; }
	.cart-item__media { width: 88px; grid-area: media; }
	.cart-item__media img { width: 88px; height: 104px; border-radius: 12px; }
	.cart-item__body { grid-area: body; gap: 4px; }
	.cart-item__name { font-size: 16px; }
	.cart-item__total { grid-area: total; font-size: 16px; }
	.cart-item__actions { gap: 10px; padding-top: 6px; }

	.cart-suggestion { padding: 18px; gap: 14px; border-radius: var(--radius-card); }
	.cart-suggestion__media, .cart-suggestion__media img { width: 64px; height: 64px; }
	.cart-suggestion .btn { width: 100%; }

	/* ---------- Checkout ---------- */

	#order_review, .woocommerce-checkout-review-order { padding: 18px; border-radius: var(--radius-card); }
	#payment, #payment .place-order { width: 100%; }

	/* ---------- Footer ---------- */

	.site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; padding-block: 40px 28px; }
	.site-footer__grid > :first-child { grid-column: 1 / -1; }
	.site-footer__menu a { display: inline-block; padding-block: 4px; }

	/* ---------- Sticky buy / checkout bar ---------- */

	.hm-sticky-bar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
		display: flex; align-items: center; gap: 12px;
		padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
		background: var(--color-white); border-top: 1px solid var(--color-line-soft);
		box-shadow: 0 -8px 24px rgba(30, 42, 34, 0.08);
		transform: translateY(110%); transition: transform .25s ease;
	}
	.hm-sticky-bar.is-visible { transform: none; }
	.hm-sticky-bar__info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
	.hm-sticky-bar__name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.hm-sticky-bar__price { font-size: 14px; color: var(--color-muted); }
	.hm-sticky-bar__price del { display: none; }
	.hm-sticky-bar__price ins { text-decoration: none; }
	.hm-sticky-bar .btn { flex: none; min-height: 48px; padding: 0 20px; }
	body.has-sticky-bar { padding-bottom: 76px; }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
	.usp-bar__list li, .hm-sticky-bar { transition: none; }
}

/* Very small phones (iPhone SE 1st gen, 320px). */
@media (max-width: 360px) {
	.site-logo { font-size: 17px; }
	.cart-link { padding: 0 10px; }
	.product-grid, .product-grid--home, .related .product-grid { gap: 20px 10px; }
}