/**
 * 9rang Store: breakpoints.
 *
 * Written mobile-last: the base stylesheets describe the desktop layout and
 * these rules reduce it, which keeps the grid maths in one place.
 *
 * @package ninerang
 */

/* ------------------------------------------------- Large desktop down */

@media ( max-width: 1280px ) {
	.nr-shop--sidebar-left,
	.nr-shop--sidebar-right {
		grid-template-columns: 250px minmax( 0, 1fr );
	}

	.nr-shop--sidebar-right {
		grid-template-columns: minmax( 0, 1fr ) 250px;
	}

	.nr-header__inner {
		gap: 20px;
	}

	.nr-menu__link {
		padding-inline: 11px;
		font-size: 0.86rem;
	}
}

/* ------------------------------------------------------- Tablet down */

@media ( max-width: 1024px ) {
	/* Navigation collapses into the off-canvas panel. */
	.nr-nav {
		display: none;
	}

	.nr-menu-toggle {
		display: inline-flex;
	}

	.nr-header--logo-center .nr-header__inner {
		display: flex;
		grid-template-columns: none;
		grid-template-areas: none;
		justify-content: space-between;
		padding-bottom: 0;
	}

	.nr-header--logo-center .nr-brand,
	.nr-header--logo-split .nr-brand {
		justify-self: auto;
	}

	.nr-header__inner {
		min-height: 68px;
	}

	.nr-brand img {
		width: var( --nr-logo-width-mobile );
	}

	/* Product grids follow the tablet column setting. Setting
	   grid-template-columns directly, rather than the --nr-cols variable,
	   is deliberate: the density switcher writes that variable inline and an
	   inline custom property would win over anything declared here. */
	.nr-grid--products,
	.related.products .products,
	.upsells.products .products,
	.cross-sells .products {
		grid-template-columns: repeat( var( --nr-shop-columns-tab, 3 ), minmax( 0, 1fr ) );
	}

	.nr-grid--posts {
		--nr-cols: 2;
	}

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

	/* With the rail collapsed, the toolbar button is the only way in. */
	.nr-filters-toggle {
		display: inline-flex;
	}

	/* The filter rail becomes a collapsible block above the grid. */
	.nr-shop {
		grid-template-columns: minmax( 0, 1fr ) !important;
	}

	.nr-shop__sidebar {
		position: static;
		max-height: none;
		overflow: visible;
		display: none;
		padding: 20px;
		margin-bottom: 20px;
		border: 1px solid var( --nr-border );
		border-radius: var( --nr-radius );
		background: var( --nr-surface );
	}

	.nr-shop__sidebar.is-open {
		display: block;
	}

	.nr-shop--sidebar-right .nr-shop__sidebar {
		order: 0;
	}

	/* Single product stacks. */
	.nr-product__top {
		grid-template-columns: minmax( 0, 1fr );
		gap: 32px;
	}

	.nr-product__summary {
		position: static;
	}

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

	/* The editorial layout keeps its own column rule, so it has to be
	   unwound here rather than relying on the generic one above. */
	.nr-product--editorial .nr-product__top {
		grid-template-columns: minmax( 0, 1fr );
	}

	.nr-product--editorial .nr-product__summary {
		position: static;
	}

	.nr-gallery--editorial .nr-gallery__lead {
		position: static;
	}

	/* Checkout and basket stack. */
	.nr-checkout__grid,
	.nr-cart__collaterals {
		grid-template-columns: minmax( 0, 1fr );
	}

	.nr-checkout__aside.is-sticky {
		position: static;
	}

	.woocommerce-account .woocommerce {
		grid-template-columns: minmax( 0, 1fr );
		gap: 28px;
	}

	.nr-footer__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 32px;
	}

	.nr-newsletter {
		grid-template-columns: minmax( 0, 1fr );
	}

	.nr-reviews__summary {
		grid-template-columns: auto 1fr;
		gap: 28px;
	}

	.nr-reviews__cta {
		grid-column: 1 / -1;
	}

	.nr-quickview__body {
		grid-template-columns: minmax( 0, 1fr );
		gap: 20px;
		padding: 24px;
	}

	.nr-promo__content {
		margin: 24px;
		padding: 28px;
	}

	.nr-studio__grid {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

/* -------------------------------------------------------- Mobile down */

@media ( max-width: 782px ) {
	body {
		font-size: calc( var( --nr-font-size ) - 1px );
	}

	.nr-section {
		--nr-section-gap: clamp( 44px, 9vw, 64px );
	}

	.nr-section__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		margin-bottom: 24px;
	}

	.nr-slide {
		height: var( --nr-hero-height-mobile );
	}

	.nr-slide__content,
	.nr-slide--right .nr-slide__content {
		max-width: none;
		text-align: left;
	}

	.nr-slide--center .nr-slide__content {
		text-align: center;
	}

	.nr-slide__overlay {
		background: linear-gradient(
			to top,
			rgba( 0, 0, 0, calc( var( --nr-hero-overlay ) + 0.3 ) ) 0%,
			rgba( 0, 0, 0, var( --nr-hero-overlay ) ) 70%
		);
	}

	.nr-slider__arrow {
		width: 38px;
		height: 38px;
	}

	.nr-slider__arrow--prev {
		left: 10px;
	}

	.nr-slider__arrow--next {
		right: 10px;
	}

	/* Product grids follow the mobile column setting. */
	.nr-grid--products,
	.related.products .products,
	.upsells.products .products,
	.cross-sells .products {
		grid-template-columns: repeat( var( --nr-shop-columns-mob, 2 ), minmax( 0, 1fr ) );
		gap: 14px 12px;
	}

	.nr-grid--posts {
		--nr-cols: 1;
	}

	.nr-tiles__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 10px;
	}

	.nr-tile {
		grid-column: span 1;
	}

	.nr-tile__body {
		padding: 20px 14px 14px;
	}

	.nr-tile__title {
		font-size: 1.05rem;
	}

	/* Tools and the basket button are always visible on touch, where there
	   is no hover to reveal them. */
	.nr-card__tools,
	.nr-card__cart {
		opacity: 1;
		transform: none;
	}

	.nr-card__cart {
		position: static;
		margin-top: 10px;
	}

	.nr-card__media {
		max-width: none;
	}

	.nr-card__title {
		font-size: 0.92rem;
	}

	.nr-card__price {
		font-size: 0.88rem;
	}

	.nr-button--cart {
		padding: 10px 12px;
		font-size: 0.78rem;
	}

	/* Toolbar */
	.nr-toolbar {
		gap: 10px;
	}

	.nr-toolbar__left,
	.nr-toolbar__right {
		width: 100%;
		justify-content: space-between;
		gap: 10px;
	}

	.nr-density {
		display: none;
	}

	.nr-ordering select,
	.woocommerce-ordering select {
		min-width: 0;
		width: 100%;
	}

	.nr-ordering,
	.woocommerce-ordering {
		flex: 1;
	}

	/* Gallery */
	.nr-gallery--thumbs-left {
		grid-template-columns: minmax( 0, 1fr );
	}

	.nr-gallery--thumbs-left .nr-gallery__thumbs {
		order: 2;
		flex-direction: row;
		overflow-x: auto;
		max-height: none;
	}

	.nr-gallery--thumbs-left .nr-gallery__thumb {
		flex: 0 0 68px;
	}

	.nr-gallery--thumbs-below .nr-gallery__thumbs {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}

	.nr-gallery__arrow {
		opacity: 1;
	}

	.nr-gallery--editorial {
		flex-direction: column;
	}

	.nr-product--editorial {
		padding: 12px 12px 40px;
	}

	.nr-product--editorial .nr-product__summary {
		gap: 24px;
	}

	.nr-product__summary form.cart {
		gap: 10px;
	}

	.single_add_to_cart_button {
		min-width: 0;
	}

	/* Reviews */
	.nr-reviews__summary {
		grid-template-columns: minmax( 0, 1fr );
		gap: 22px;
		padding: 22px;
	}

	.nr-reviews__score {
		flex-direction: row;
		align-items: baseline;
		gap: 12px;
		padding-right: 0;
		padding-bottom: 18px;
		border-right: 0;
		border-bottom: 1px solid var( --nr-border );
	}

	.nr-review__body {
		padding-left: 0;
	}

	.nr-reviews__form {
		padding: 22px;
	}

	.nr-reviews__form .comment-form {
		grid-template-columns: minmax( 0, 1fr );
	}

	.nr-reviews__gallery-grid {
		grid-template-columns: repeat( auto-fill, minmax( 84px, 1fr ) );
	}

	/* Basket becomes a stacked card per line. */
	.nr-cart__head {
		display: none;
	}

	.nr-cart__row {
		grid-template-columns: minmax( 0, 1fr );
		gap: 14px;
	}

	.nr-cart__thumb img {
		width: 78px;
		height: 96px;
	}

	.nr-cart__qty {
		justify-content: flex-start;
	}

	.nr-cart__subtotal {
		text-align: left;
		font-size: 1.05rem;
	}

	.nr-cart__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.nr-cart__coupon {
		max-width: none;
	}

	/* Checkout fields go single column. */
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper,
	.woocommerce-additional-fields__field-wrapper {
		grid-template-columns: minmax( 0, 1fr );
	}

	.nr-checkout__summary {
		padding: 20px;
	}

	.nr-steps {
		font-size: 0.75rem;
		padding-block: 20px;
	}

	.nr-steps__label {
		display: none;
	}

	.nr-steps__item.is-current .nr-steps__label {
		display: inline;
	}

	/* Footer */
	.nr-footer__grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	.nr-colophon__inner {
		flex-direction: column;
		text-align: center;
	}

	.nr-newsletter__form {
		flex-direction: column;
	}

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

	.nr-quotes__slider .nr-slider__track {
		gap: 14px;
	}

	.nr-quote {
		flex: 0 0 100%;
	}

	.nr-promo__inner {
		min-height: 0;
		flex-direction: column;
	}

	.nr-promo__image {
		position: static;
		height: 220px;
	}

	.nr-promo__content {
		margin: 0;
		width: 100%;
		border-radius: 0;
	}

	/* Sticky mobile chrome. */
	.has-bottom-nav .nr-bottomnav {
		display: flex;
	}

	.has-bottom-nav {
		padding-bottom: 62px;
	}

	.has-bottom-nav .nr-stickybar {
		bottom: 62px;
	}

	.nr-focus-mode .nr-bottomnav {
		display: none !important;
	}

	.nr-toasts {
		left: 14px;
		right: 14px;
		bottom: 76px;
	}

	.nr-toast {
		max-width: none;
	}

	.nr-lightbox__nav {
		width: 40px;
		height: 40px;
	}

	.nr-lightbox__nav--prev {
		left: 8px;
	}

	.nr-lightbox__nav--next {
		right: 8px;
	}

	.nr-layout--sidebar {
		grid-template-columns: minmax( 0, 1fr );
		gap: 40px;
	}

	.nr-stickybar__product {
		display: none;
	}

	.nr-stickybar__actions {
		width: 100%;
	}

	.nr-stickybar__actions .nr-button--primary {
		flex: 1;
	}
}

/* ------------------------------------------------------- Small phones */

@media ( max-width: 480px ) {
	.nr-topbar__nav {
		display: none;
	}

	.nr-topbar {
		font-size: 0.72rem;
	}

	.nr-header__actions .nr-account-link {
		display: none;
	}

	.nr-wishlist__head {
		flex-direction: column;
		align-items: stretch;
	}

	.nr-wishlist__actions {
		flex-direction: column;
	}

	.nr-wishlist__grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	.nr-review-upload__thumb,
	.nr-review-upload__thumb img {
		width: 78px;
	}

	.nr-review-upload__thumb img {
		height: 78px;
	}

	.woocommerce-mini-cart__buttons {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* --------------------------------------------------- Pointer and hover */

@media ( hover: none ) {
	.nr-card__tools,
	.nr-card__cart,
	.nr-tile__cta,
	.nr-gallery__arrow {
		opacity: 1;
		transform: none;
	}
}