/* ==========================================================================
   TEEMCW — RESPONSIVE
   Loaded last. Four breakpoints, plus touch and print.

     1100  small laptop / tablet landscape
      900  tablet portrait
      680  large phones
      420  small phones
   ========================================================================== */

/* --------------------------------------------------------------------------
   Touch
   -------------------------------------------------------------------------- */

@media (hover: none) and (pointer: coarse) {
	/* Card actions never get a hover on touch, so show them. */
	.tw-card__wish,
	.tw-card__add {
		opacity: 1;
		transform: none;
	}

	/* 44px is the smallest reliably tappable target. The visible controls are
	   smaller by design, so the hit area is extended past them instead. */
	.tw-card__wish::after,
	.tw-card__add::after,
	.tw-icon-btn::after {
		content: "";
		position: absolute;
		inset: -7px;
	}

	.tw-card__img--hover { display: none; }
}

/* --------------------------------------------------------------------------
   1100
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.tw-grid,
	.woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.tw-coll { grid-template-columns: repeat(2, 1fr); }

	.tw-trust { grid-template-columns: repeat(3, 1fr); }

	.woocommerce div.product {
		grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr);
		gap: var(--sp-6);
	}

	.tw-ft__cols { grid-template-columns: 1.4fr repeat(3, 1fr); }
	.tw-ft__contact { grid-column: span 3; }
}

/* --------------------------------------------------------------------------
   900
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	/* Primary nav collapses into the drawer. */
	.tw-hd__nav { display: none; }
	.tw-hd__burger { display: inline-flex; align-items: center; justify-content: center;
		width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: var(--r-pill);
		background: transparent; color: var(--ink); cursor: pointer; }
	.tw-hd__burger:hover { background: var(--blush-2); }

	.tw-hd__in { grid-template-columns: auto 1fr auto; }
	.tw-hd__brand { justify-self: center; }

	.tw-hero__in {
		grid-template-columns: 1fr;
		gap: var(--sp-7);
		padding-block: var(--sp-8);
	}
	.tw-hero__art { max-width: 30rem; margin-inline: auto; order: -1; }
	.tw-hero__title { max-width: none; }

	.tw-story__in { grid-template-columns: 1fr; gap: var(--sp-6); }

	.tw-revs { grid-template-columns: 1fr; }

	.tw-news__in { grid-template-columns: 1fr; gap: var(--sp-5); }

	/* Single product stacks; the gallery stops sticking. */
	.woocommerce div.product { grid-template-columns: 1fr; }
	.woocommerce div.product .woocommerce-product-gallery {
		position: static;
		max-width: 34rem;
		margin-inline: auto;
	}

	/* Cart and checkout: the summary drops under the form. */
	.woocommerce-cart .woocommerce,
	.woocommerce-checkout form.checkout { grid-template-columns: 1fr; }
	.woocommerce-cart form.woocommerce-cart-form,
	.woocommerce-cart .cart-collaterals,
	.woocommerce-checkout #customer_details,
	.woocommerce-checkout .woocommerce-checkout-review-order { grid-column: 1; }
	.woocommerce-cart .cart-collaterals .cart_totals,
	.woocommerce-checkout .woocommerce-checkout-review-order { position: static; }

	/* Account navigation becomes a scrolling strip. */
	.woocommerce-account .woocommerce { grid-template-columns: 1fr; }
	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
	.woocommerce-account .woocommerce-MyAccount-navigation li {
		border-bottom: 0;
		border-right: 1px solid var(--line);
		flex: none;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation li a { white-space: nowrap; }

	/* The filter drawer replaces a sidebar. */
	.tw-toolbar__filter { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   680
   -------------------------------------------------------------------------- */

@media (max-width: 680px) {
	.tw-grid,
	.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }

	.tw-coll { grid-template-columns: 1fr; }

	.tw-trust { grid-template-columns: 1fr; gap: var(--sp-4); }
	.tw-trust--compact { grid-template-columns: 1fr; }

	.tw-story__points { grid-template-columns: 1fr; }

	.tw-hero__cta { display: grid; }
	.tw-hero__cta .tw-btn { width: 100%; }

	.tw-hero__points { gap: var(--sp-3) var(--sp-4); }

	.tw-head { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }

	.tw-news__form { grid-template-columns: 1fr; }

	.tw-ft__cols { grid-template-columns: repeat(2, 1fr); }
	.tw-ft__brand { grid-column: 1 / -1; }
	.tw-ft__contact { grid-column: 1 / -1; }

	.tw-ft__legal-in,
	.tw-ft__trust-in { flex-direction: column; align-items: flex-start; }

	/* Card details tighten rather than disappear. */
	.tw-card__desc { display: none; }
	.tw-card__add { opacity: 1; transform: none; }

	/* The cart table is unusable as a table on a phone: each row becomes a
	   card. The remove control stays visible, because hiding it would leave a
	   phone shopper unable to take anything out of the bag. */
	.woocommerce-cart table.shop_table thead { display: none; }

	.woocommerce-cart table.shop_table tbody tr.cart_item {
		display: grid;
		grid-template-columns: 68px 1fr auto;
		grid-template-areas:
			"thumb name  remove"
			"thumb qty   total";
		gap: var(--sp-2) var(--sp-3);
		padding: var(--sp-4);
		border-top: 1px solid var(--line);
		align-items: start;
	}

	.woocommerce-cart table.shop_table tbody tr.cart_item td {
		border: 0;
		padding: 0;
	}

	.woocommerce-cart td.product-thumbnail { grid-area: thumb; }
	.woocommerce-cart td.product-name      { grid-area: name; }
	.woocommerce-cart td.product-remove    { grid-area: remove; }
	.woocommerce-cart td.product-quantity   { grid-area: qty; }
	.woocommerce-cart td.product-subtotal   { grid-area: total; font-weight: 700; text-align: right; }

	/* Unit price is redundant beside the line total. */
	.woocommerce-cart td.product-price { display: none; }

	.woocommerce-cart table.shop_table img { width: 68px !important; }

	.woocommerce-cart table.shop_table tr:not(.cart_item) td.actions {
		display: block;
		padding: var(--sp-4);
	}
	.woocommerce-cart .coupon { display: grid; gap: var(--sp-2); }
	.woocommerce-cart .coupon input#coupon_code,
	.woocommerce-cart .coupon button,
	.woocommerce-cart button[name="update_cart"] { width: 100%; }

	.woocommerce div.product form.cart { flex-direction: column; }
	.woocommerce div.product form.cart .quantity { align-self: flex-start; }
	.woocommerce div.product form.cart button.single_add_to_cart_button { width: 100%; }

	.tw-search__form input[type="search"] { font-size: var(--fs-lg); }
}

/* --------------------------------------------------------------------------
   420
   -------------------------------------------------------------------------- */

@media (max-width: 420px) {
	.tw-grid,
	.woocommerce ul.products { grid-template-columns: 1fr; }

	.tw-ft__cols { grid-template-columns: 1fr; }

	.tw-hero__title { font-size: clamp(1.9rem, 9vw, 2.4rem); }

	.woocommerce div.product .flex-control-thumbs { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------------------
   Short landscape
   -------------------------------------------------------------------------- */

@media (max-height: 560px) and (orientation: landscape) {
	.tw-hero__in { padding-block: var(--sp-6); }
	.woocommerce div.product .woocommerce-product-gallery,
	.woocommerce-checkout .woocommerce-checkout-review-order,
	.woocommerce-cart .cart-collaterals .cart_totals { position: static; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
	.tw-ann, .tw-hd, .tw-mob, .tw-search, .tw-toast,
	.tw-ft__main, .tw-ft__trust, .tw-news, .tw-card__wish, .tw-card__add {
		display: none !important;
	}

	body { background: #fff; color: #000; }
	.woocommerce-order { max-width: none; }
	a[href]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}

/* --------------------------------------------------------------------------
   HERO CAROUSEL, PROMO, DRAWER
   Appended after the base breakpoints so these win where they overlap.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.tw-promo__list { grid-template-columns: 1fr; }
	.tw-promo__link { padding: var(--sp-3) var(--sp-4); }
}

@media (max-width: 900px) {
	.tw-slide {
		grid-template-columns: 1fr;
		gap: var(--sp-6);
	}

	/* Image first on a phone: it is what sells the slide. */
	.tw-slide__art {
		order: -1;
		max-width: 26rem;
		margin-inline: auto;
		aspect-ratio: 4 / 3;
	}

	.tw-hero__stage { min-height: auto; }
	.tw-hero__in { padding-block: var(--sp-7) var(--sp-6); }

	.tw-hero__nav { justify-content: center; }

	/* The tool cluster loses its container so the header fits. */
	.tw-hd__tools {
		padding: 0;
		border: 0;
		background: transparent;
	}
}

@media (max-width: 680px) {
	.tw-hero__title { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
	.tw-hero__sub { font-size: var(--fs-md); }

	.tw-hero__points {
		gap: var(--sp-2) var(--sp-4);
		font-size: var(--fs-xs);
	}

	.tw-promo__cta { display: none; }

	.tw-drawer__panel { width: 100%; }

	.tw-dline { grid-template-columns: 56px 1fr; }
	.tw-dline__media img { width: 56px; height: 56px; }

	.tw-loader__logo { width: 120px; }
}

/* Parallax costs more than it gives on a phone, and the hero image is already
   the tallest thing on screen. */
@media (max-width: 900px) {
	[data-parallax] { transform: none !important; }
}

/* On a touch device the card actions are always visible, so the media does
   not need a hover lift that can never fire. */
@media (hover: none) {
	.tw-card:hover .tw-card__media { transform: none; }
}