/*
 * Schon — responsive layer.
 *
 * Breakpoints mirror the reference template exactly: 1300, 1199, 991, 767,
 * 550 and 479. Everything above 1300px uses the base stylesheet unchanged.
 */

/* ==========================================================================
   <= 1300px — tighten the oversized display type
   ========================================================================== */

@media only screen and (max-width: 1300px) {
	#nav > ul {
		gap: 22px;
	}

	.banner-frame .holder {
		padding: 32px;
	}

	.banner-5 .holder {
		padding: 36px;
	}
}

/* ==========================================================================
   <= 1199px — mobile navigation takes over
   ========================================================================== */

@media only screen and (max-width: 1199px) {
	.banner-5 .banner-display {
		font-size: 46px;
		line-height: 52px;
	}

	.mobile-toggle-item {
		display: block;
		order: 5;
	}

	.mt-bottom-bar-inner {
		flex-wrap: wrap;
	}

	.mt-icon-list {
		order: 4;
	}

	.mt-sh-cart {
		order: 3;
	}

	/* Off-canvas nav */

	#nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 210;
		width: min(340px, 86vw);
		margin: 0;
		padding: 74px 0 30px;
		overflow-y: auto;
		background: var(--schon-white);
		box-shadow: -10px 0 40px rgba(0, 0, 0, 0.12);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.4s var(--schon-ease), visibility 0.4s;
	}

	#nav.is-open {
		transform: translateX(0);
		visibility: visible;
	}

	.schon-nav-overlay {
		position: fixed;
		inset: 0;
		z-index: 205;
		background: rgba(20, 20, 20, 0.45);
		opacity: 0;
		transition: opacity 0.35s var(--schon-ease);
	}

	.schon-nav-overlay.is-open {
		opacity: 1;
	}

	#nav > ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	#nav > ul > li {
		border-bottom: 1px solid var(--schon-line);
	}

	/*
	 * Desktop hands the overlay panel to the header by making drop items
	 * static. In the off-canvas nav the panel is an inline accordion and the
	 * item has to position its own toggle button again.
	 */
	#nav > ul > li.has-drop {
		position: relative;
	}

	#nav > ul > li > a {
		padding: 15px 24px;
	}

	#nav > ul > li > a::after {
		content: none;
	}

	#nav .drop-caret {
		display: none;
	}

	#nav .drop-toggle {
		position: absolute;
		top: 0;
		right: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 52px;
		height: 51px;
		background: none;
		border: 0;
		border-left: 1px solid var(--schon-line);
		color: var(--schon-heading);
		cursor: pointer;
		transition: transform 0.3s var(--schon-ease);
	}

	#nav .drop-toggle[aria-expanded="true"] {
		color: var(--schon-accent);
		transform: rotate(180deg);
	}

	/* Panels become inline accordions */

	#nav .s-drop,
	#nav .mt-dropmenu {
		position: static;
		display: none;
		width: auto;
		min-width: 0;
		padding: 6px 0 12px;
		background: var(--schon-surface);
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	#nav li.is-expanded > .s-drop,
	#nav li.is-expanded > .mt-dropmenu {
		display: block;
	}

	#nav li:hover > .s-drop,
	#nav li:hover > .mt-dropmenu,
	#nav li:focus-within > .s-drop,
	#nav li:focus-within > .mt-dropmenu {
		transform: none;
	}

	#nav .s-drop a,
	#nav .mt-f-box .sub-menu a {
		padding: 0 24px;
		line-height: 34px;
		white-space: normal;
	}

	/* The overlay frame is only a frame on desktop. */

	#nav .mt-dropmenu .mt-frame {
		display: block;
		max-width: none;
		margin: 0;
		padding: 0;
		background: none;
		box-shadow: none;
	}

	/*
	 * The reference hides its promo column on small screens. Kept here instead,
	 * stacked and compact: it is the only place the off-canvas menu says what a
	 * one-child section like Ages Of India actually is, and hiding it would put
	 * that section back to a single bare link.
	 */
	#nav .mt-dropmenu__promo {
		display: flex;
		max-width: none;
		margin: 4px 24px 12px;
		padding: 14px 0 0;
		border-top: 1px solid var(--schon-line);
		border-left: 0;
		padding-left: 0;
	}

	#nav .mt-dropmenu__promo-media {
		flex: 0 0 72px;
		max-width: 72px;
	}

	#nav .mt-dropmenu__promo-text {
		margin-bottom: 12px;
	}

	#nav .mt-dropmenu.is-grouped .mt-f-box,
	#nav .mt-dropmenu.is-flat .mt-f-box {
		display: block;
		gap: 0;
	}

	#nav .mt-dropmenu.is-grouped .mt-f-box > li > a,
	#nav .mt-dropmenu.is-flat .mt-f-box > li > a {
		margin: 0;
		padding: 8px 24px;
		font-size: 14px;
		line-height: 20px;
		white-space: normal;
	}

	#nav .mt-dropmenu.is-grouped .mt-f-box > li > a::after {
		content: none;
	}

	#nav .s-drop .sub-menu {
		position: static;
		display: block;
		padding: 0 0 0 14px;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
	}

	/* Banner grid drops to two tiers */

	.banner-5 {
		flex: 0 0 calc(58% - var(--schon-banner-gap));
		max-width: calc(58% - var(--schon-banner-gap));
	}

	.banner-6 {
		flex: 0 0 calc(42% - var(--schon-banner-gap));
		max-width: calc(42% - var(--schon-banner-gap));
		aspect-ratio: 588 / 562;
	}

	.banner-box.two {
		flex: 0 0 calc(100% - var(--schon-banner-gap));
		max-width: calc(100% - var(--schon-banner-gap));
		flex-direction: row;
	}

	.banner-box.two > div {
		flex: 1;
		margin: 0 calc(var(--schon-banner-gap) / 2);
		aspect-ratio: 400 / 260;
	}

	.banner-box.two > div:first-child {
		margin-left: 0;
	}

	.banner-box.two > div:last-child {
		margin-right: 0;
	}

	.banner-box.third {
		flex: 0 0 calc(42% - var(--schon-banner-gap));
		max-width: calc(42% - var(--schon-banner-gap));
	}

	.slider-7 {
		flex: 0 0 calc(58% - var(--schon-banner-gap));
		max-width: calc(58% - var(--schon-banner-gap));
	}

	.slider-7 .s-box {
		max-width: 74%;
	}

	.slider-7 .heading {
		font-size: 40px;
		line-height: 44px;
	}

	.schon-layout {
		grid-template-columns: minmax(0, 1fr) 260px;
		gap: 30px;
	}

	.schon-shop {
		grid-template-columns: 230px minmax(0, 1fr);
		gap: 30px;
	}

	ul.products {
		--schon-cols: 3;
	}
}

/* ==========================================================================
   <= 991px — tablet: stack the sidebars, simplify the banner rows
   ========================================================================== */

@media only screen and (max-width: 991px) {
	.category-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mt-top-bar-inner {
		flex-direction: column;
		gap: 2px;
		padding: 8px 0;
	}

	.mt-top-bar-contact,
	.mt-top-list {
		justify-content: center;
	}

	.mt-top-bar .tel {
		margin-right: 14px;
	}

	.banner-5,
	.banner-6 {
		flex: 0 0 calc(50% - var(--schon-banner-gap));
		max-width: calc(50% - var(--schon-banner-gap));
		aspect-ratio: 420 / 430;
	}

	.banner-box.third,
	.slider-7 {
		flex: 0 0 calc(100% - var(--schon-banner-gap));
		max-width: calc(100% - var(--schon-banner-gap));
	}

	.banner-box.third {
		flex-direction: row;
	}

	.banner-box.third > div {
		flex: 1;
		margin: 0 calc(var(--schon-banner-gap) / 2);
		aspect-ratio: 412 / 260;
	}

	.banner-box.third > div:first-child {
		margin-left: 0;
	}

	.banner-box.third > div:last-child {
		margin-right: 0;
	}

	.slider-7 .s-holder {
		aspect-ratio: 16 / 9;
	}

	.slider-7 .heading {
		font-size: 34px;
		line-height: 38px;
	}

	.banner-5 .banner-display {
		font-size: 36px;
		line-height: 42px;
	}

	.mt-producttabs.style2 {
		padding: 30px 0 40px;
	}

	.mt-producttabs.style3 {
		padding: 40px 0 56px;
	}

	.schon-layout,
	.schon-shop {
		grid-template-columns: minmax(0, 1fr);
	}

	.schon-layout-aside {
		padding-top: 20px;
		border-top: 1px solid var(--schon-line);
	}

	.schon-shop .schon-layout-aside {
		order: 2;
	}

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

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

	.footer-col--nav {
		grid-column: 1 / -1;
	}

	.footer-col--newsletter {
		grid-column: 1 / -1;
		text-align: left;
	}

	.newsletter-form fieldset {
		margin-left: 0;
	}

	.social-network {
		justify-content: flex-start;
	}

	/* .schon-product-top keeps two columns down to 767px — see §Product detail. */
	.schon-checkout-grid,
	.woocommerce .cart-collaterals,
	.woocommerce-page .cart-collaterals,
	.schon-quickview-body {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		width: 100%;
		float: none;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-bottom: 26px;
	}
}

/* ==========================================================================
   <= 767px — phone landscape / small tablet
   ========================================================================== */

@media only screen and (max-width: 767px) {
	body {
		font-size: 14px;
	}

	.mt-bottom-bar {
		padding: 12px 0;
	}

	.mt-bottom-bar-inner {
		gap: 12px;
	}

	.mt-sh-cart {
		padding-left: 12px;
	}

	.mt-sh-cart .cart-text {
		display: none;
	}

	.banner-frame,
	.banner-frame.nospace {
		margin-bottom: 12px;
	}

	.banner-5,
	.banner-6,
	.banner-box.two,
	.banner-box.third,
	.slider-7 {
		flex: 0 0 calc(100% - var(--schon-banner-gap));
		max-width: calc(100% - var(--schon-banner-gap));
	}

	.banner-5,
	.banner-6 {
		aspect-ratio: 16 / 11;
	}

	.banner-frame.nospace {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.banner-frame.nospace > div:last-child {
		grid-column: 1 / -1;
	}

	.banner-5 .banner-display {
		font-size: 30px;
		line-height: 36px;
	}

	.banner-5 .title,
	.banner-6 .sub-title {
		letter-spacing: 2.6px;
		font-size: 12px;
	}

	.banner-5 p {
		display: none;
	}

	.banner-5 .price-add {
		font-size: 24px;
		line-height: 28px;
	}

	.banner-7 h2,
	.banner-8 h2 {
		font-size: 15px;
		letter-spacing: 3px;
		line-height: 22px;
	}

	.banner-12 h2 strong,
	.banner-13 h2 strong,
	.banner-9 h2 strong,
	.banner-10 h2 strong,
	.banner-11 h2 strong {
		font-size: 18px;
		letter-spacing: 1px;
		line-height: 22px;
	}

	.banner-12 h2 span,
	.banner-13 h2 span,
	.banner-9 h2 span,
	.banner-10 h2 span,
	.banner-11 h2 span {
		font-size: 13px;
		letter-spacing: 3px;
	}

	.slider-7 .s-box {
		max-width: 84%;
		left: 6%;
	}

	.slider-7 .heading {
		font-size: 26px;
		letter-spacing: -1px;
		line-height: 30px;
	}

	.slider-7 .s-title {
		font-size: 12px;
		letter-spacing: 2.4px;
	}

	.slider-7 .s-txt {
		display: none;
	}

	.mt-producttabs.style3 .heading,
	.patners-heading,
	.ages-heading,
	.categories-heading {
		font-size: 20px;
		line-height: 26px;
	}

	.mt-ages,
	.mt-categories {
		padding-top: 30px;
	}

	.category-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.category-card__title {
		font-size: 13px;
		line-height: 17px;
	}

	/*
	 * The desktop 120px minimum starts wrapping the five ages at about 700px,
	 * and five terms across four tracks leaves one circle stranded on a row of
	 * its own. 78px holds the whole strip on one line down to the 550px
	 * breakpoint, which then takes over with a fixed row length.
	 */
	.age-circles {
		grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
		gap: 16px;
	}

	.age-circle {
		padding: 8px;
		font-size: 13px;
		line-height: 17px;
	}

	/*
	 * 18px is the desktop size from the reference; three tab labels at that
	 * size wrap onto three lines on a phone, which reads as a broken list
	 * rather than a tab strip.
	 */
	.producttabs button {
		font-size: 14px;
	}

	.producttabs {
		gap: 20px;
	}

	.mt-product1 .txt {
		padding-left: 0;
	}

	/*
	 * Card type used to be stepped down here from an 18/23px desktop size.
	 * The desktop size is now the reference's 14/17, which needs no step —
	 * shrinking further would put it below a comfortable reading size, and
	 * the old values would have made the phone card *larger* than the
	 * desktop one.
	 */

	/* Touch devices never fire :hover reliably — keep the actions visible. */
	.mt-product1 .links {
		opacity: 1;
		transform: none;
	}

	.schon-slider-nav {
		opacity: 1;
	}

	.schon-post-grid,
	.schon-layout.is-full .schon-post-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.schon-post-card.is-result {
		flex-direction: column;
	}

	.schon-post-card.is-result .schon-post-media {
		flex: none;
	}

	.footer-grid,
	.footer-col--nav {
		grid-template-columns: minmax(0, 1fr);
	}

	.f-promo-box {
		padding-top: 40px;
	}

	.footer-holder {
		padding: 36px 0 40px;
	}

	.f-widget-heading {
		margin-bottom: 20px;
	}

	.footer-area-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.bank-card {
		justify-content: flex-start;
	}

	.mt-search-form .search-field {
		font-size: 22px;
		min-height: 52px;
	}

	.mt-search-form .search-submit span {
		display: none;
	}

	ul.products {
		--schon-cols: 2;
		gap: 30px 0;
	}

	.schon-shop-toolbar {
		gap: 10px;
	}

	.woocommerce table.shop_table_responsive tr td::before,
	.woocommerce-page table.shop_table_responsive tr td::before {
		font-family: var(--schon-font-head);
		font-size: 11px;
		letter-spacing: 1px;
		text-transform: uppercase;
	}

	.woocommerce .coupon {
		flex-direction: column;
	}

	.woocommerce .actions .button {
		width: 100%;
		margin-left: 0;
	}

	.schon-404-code {
		font-size: 84px;
	}
}

/* ==========================================================================
   <= 550px
   ========================================================================== */

@media only screen and (max-width: 550px) {
	.promo-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	/*
	 * Fixed three-across rather than auto-fit: below this width the number of
	 * circles that fit changes every few pixels, and each of those steps that
	 * does not divide the term count leaves an orphan on the last row. Three is
	 * the widest row a phone can hold with the label still legible inside the
	 * disc, and it is the same row length at every size down to 320px.
	 */
	.age-circles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px;
	}

	.banner-box.two,
	.banner-box.third {
		flex-direction: column;
	}

	.banner-box.two > div,
	.banner-box.third > div {
		margin: 0 0 var(--schon-banner-gap);
		aspect-ratio: 16 / 10;
	}

	.banner-box.two > div:last-child,
	.banner-box.third > div:last-child {
		margin-bottom: 0;
	}

	.banner-frame.nospace {
		grid-template-columns: minmax(0, 1fr);
	}

	.banner-frame.nospace > div:last-child {
		grid-column: auto;
	}

	/*
	 * The tall banner is a wide, short tile from 767px down, and a 129px offer
	 * disc centred on it runs into the Shop now link — and off the bottom edge
	 * below about 400px. Shrink the disc, park it against the right edge and
	 * reserve that width in the copy beside it rather than letting the two
	 * overlap. 100px holds every price in this catalogue on one line.
	 */
	.banner-frame .banner-6 > .holder > .offer {
		top: 50%;
		right: 22px;
		width: 100px;
		height: 100px;
		margin-top: -50px;
		padding: 26px 0 0;
	}

	.banner-6 .offer .prices {
		font-size: 17px;
		line-height: 21px;
	}

	.banner-6 .offer .price-less {
		font-size: 12px;
		line-height: 14px;
	}

	.banner-6 .sub-title,
	.banner-6 h3 {
		padding-right: 138px;
	}

	.banner-frame .banner-6 > .holder > .btn-shop {
		right: 138px;
		bottom: 22px;
		left: 22px;
	}

	.producttabs button {
		font-size: 13px;
	}

	.producttabs li {
		margin-right: 16px;
		padding-left: 16px;
	}

	.mt-top-list {
		gap: 14px;
	}

	.mt-top-bar .tel {
		font-size: 11px;
		letter-spacing: 0.6px;
	}
}

/* ==========================================================================
   <= 479px
   ========================================================================== */

@media only screen and (max-width: 479px) {
	:root {
		--schon-gutter: 14px;
		--schon-banner-gap: 14px;
	}

	.banner-frame .holder,
	.banner-5 .holder,
	.banner-6 .holder {
		padding: 22px;
	}

	.banner-5 .banner-display {
		font-size: 26px;
		line-height: 32px;
	}

	.mt-icon-list a,
	.mt-icon-list button {
		width: 34px;
		height: 34px;
	}

	ul.products {
		--schon-cols: 1;
	}

	.age-circle {
		font-size: 12px;
		line-height: 15px;
	}

	.mt-product1 {
		padding: 0 6px;
	}

	.woocommerce div.product .product_title {
		font-size: 22px;
		line-height: 30px;
	}

	/* Scoped to the summary — see the note in woocommerce.css. */
	.woocommerce div.product .summary p.price,
	.woocommerce div.product .summary span.price,
	.woocommerce div.product .entry-summary p.price,
	.woocommerce div.product .entry-summary span.price {
		font-size: 22px;
	}

	.schon-page-title {
		font-size: 20px;
		line-height: 26px;
	}

	.schon-quickview-dialog {
		padding: 22px;
	}
}

/* ==========================================================================
   Product detail, cart overlay, submenu overlay and newsletter popup

   Appended as its own cascade so these components read as one story rather
   than being scattered across six breakpoint blocks. Same breakpoints as
   above; later in the file, so they win ties against the generic rules.
   ========================================================================== */

@media only screen and (max-width: 1199px) {
	/*
	 * No narrowed .mt-frame here. The reference keeps a desktop menu down to
	 * 991px and shrinks the frame at 1199px; this theme hands the navigation
	 * to the off-canvas panel at 1199px, so by this width the frame is already
	 * an accordion and re-adding padding would just indent the links twice.
	 */

	.schon-product-top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 40px;
	}
}

@media only screen and (max-width: 991px) {
	.schon-product-top {
		grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
		gap: 30px;
	}

	.woocommerce div.product .product_title {
		font-size: 34px;
		letter-spacing: 2px;
		line-height: 40px;
		word-spacing: -1px;
	}

	.woocommerce div.product .flex-control-thumbs {
		max-width: none;
	}

	.woocommerce div.product div.images .flex-control-thumbs li,
	.woocommerce div.product .flex-control-thumbs li {
		flex: 0 0 66px;
		width: 66px;
	}

	.woocommerce div.product div.images .flex-control-thumbs img,
	.woocommerce div.product .flex-control-thumbs img {
		height: 66px;
	}

	/* Five related products do not fit a tablet column. */
	ul.products.columns-5,
	ul.products.columns-6 {
		--schon-cols: 3;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs {
		gap: 0 30px;
	}
}

@media only screen and (max-width: 767px) {
	.schon-product-top {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.woocommerce div.product .woocommerce-product-gallery {
		padding: 20px 0 0;
	}

	.woocommerce div.product .schon-product-top > div.summary,
	.woocommerce div.product .schon-product-top > .entry-summary {
		padding: 0 0 30px;
	}

	.woocommerce div.product .product_title {
		font-size: 29px;
		line-height: 35px;
	}

	.woocommerce div.product .single_add_to_cart_button {
		min-width: 133px;
	}

	.schon-gallery-meta {
		padding-top: 20px;
	}

	.woocommerce div.product .woocommerce-tabs {
		padding-top: 40px;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs {
		gap: 0 22px;
		margin-bottom: 30px;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li a {
		font-size: 13px;
	}

	.woocommerce .related,
	.woocommerce .upsells {
		padding-bottom: 60px;
	}

	ul.products.columns-5,
	ul.products.columns-6 {
		--schon-cols: 2;
	}

	/* Cart overlay */

	.mt-sh-cart .mt-drop {
		right: -12px;
		width: min(297px, calc(100vw - 30px));
	}

	.mt-sh-cart .mt-side-widget {
		padding: 24px 16px 20px;
	}

	.mt-sh-cart .cart-row .img {
		width: 56px;
	}

	.mt-sh-cart .cart-btn-row a {
		flex: 1 1 auto;
	}

	/* Newsletter popup: the artwork stacks under the copy. */

	.schon-popup__dialog {
		padding: 40px 15px 15px;
	}

	.mt-newsletter-popup .title {
		font-size: 46px;
		line-height: 52px;
	}

	.mt-newsletter-popup .holder {
		flex-direction: column;
	}

	.mt-newsletter-popup .txt-holder {
		top: -28px;
		flex: 1 1 auto;
		max-width: none;
		padding-left: 0;
	}

	.mt-newsletter-popup .img-holder {
		top: 0;
		align-self: center;
		max-width: 70%;
	}

	.mt-newsletter-popup .popup-form {
		padding-left: 0;
	}
}

@media only screen and (max-width: 550px) {
	.woocommerce div.product form.cart {
		gap: 12px;
	}

	.schon-qty-row {
		gap: 16px;
	}

	.woocommerce div.product .single_add_to_cart_button {
		flex: 1 1 100%;
	}

	ul.products.columns-5,
	ul.products.columns-6 {
		--schon-cols: 1;
	}
}