/* ==========================================================================
   GOSHOPCARA — RESPONSIVE LAYER
   Loaded last. Consolidates the breakpoints the component files grew
   organically (13 distinct widths) into four, and fills the gaps those files
   left: very small phones, landscape phones, touch targets, and tables.

   Breakpoints:
     1100  tablet landscape / small laptop
      820  tablet portrait
      600  phone landscape and large phones
      400  small phones
   ========================================================================== */

/* --------------------------------------------------------------------------
   GLOBAL — safe areas and overflow
   -------------------------------------------------------------------------- */

/* Nothing may push the page wider than the viewport. A single overflowing
   element gives the whole document a horizontal scrollbar, and on a phone
   that reads as a broken site. */
html,
body.gsc-body {
	max-width: 100%;
	overflow-x: clip;
}

/* Long product names and model codes are the usual culprits. */
.gsc-card__name,
.gsc-float__name,
.woocommerce-loop-product__title,
.product_title {
	overflow-wrap: anywhere;
}

/* Notched phones: keep the gutter clear of the rounded corners. */
@supports (padding: max(0px)) {
	.gsc-shell,
	.page-hero .wrap,
	.page-content .wrap {
		padding-left: max(var(--sp-gutter), env(safe-area-inset-left));
		padding-right: max(var(--sp-gutter), env(safe-area-inset-right));
	}
}

/* --------------------------------------------------------------------------
   TOUCH TARGETS
   -------------------------------------------------------------------------- */

@media (hover: none) and (pointer: coarse) {
	/* 44px is the smallest reliably tappable target. The icon buttons are
	   32px by design, so the hit area is extended past the visible circle
	   rather than making the button itself bigger. */
	.gsc-card__wish,
	.gsc-card__add,
	.gsc-icon,
	.gsc-rail__btn,
	.gsc-hero__dot {
		position: relative;
	}

	.gsc-card__wish::after,
	.gsc-card__add::after,
	.gsc-rail__btn::after {
		content: "";
		position: absolute;
		inset: -6px;
	}

	/* The hover label never fires on touch; it only gets in the way. */
	.gsc-card__add::before { display: none; }

	/* Cards reveal their actions on hover, which touch does not have. */
	.gsc-card__wish,
	.gsc-card__add {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
}

/* --------------------------------------------------------------------------
   1100 — small laptop / tablet landscape
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	:root {
		--header-h: 4.2rem;
	}

	/* Product page: gallery and buy panel stop competing for width. */
	.woocommerce div.product {
		grid-template-columns: minmax(0, 1fr) minmax(300px, 0.85fr);
		gap: var(--sp-6);
	}
}

/* --------------------------------------------------------------------------
   820 — tablet portrait
   -------------------------------------------------------------------------- */

@media (max-width: 820px) {
	/* Product page goes single column; the gallery stops sticking. */
	.woocommerce div.product {
		grid-template-columns: 1fr;
	}

	.woocommerce div.product div.images {
		position: static;
		max-width: 560px;
		margin-inline: auto;
	}

	/* Cart and checkout: summary drops under the form, still readable. */
	.woocommerce-cart .woocommerce,
	.woocommerce-checkout form.checkout {
		grid-template-columns: 1fr;
	}

	.woocommerce-cart .cart-collaterals .cart_totals,
	.woocommerce-checkout .woocommerce-checkout-review-order {
		position: static;
	}

	/* Account sidebar becomes a horizontal strip above the content. */
	.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(--border);
		flex: none;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li a {
		white-space: nowrap;
	}
}

/* --------------------------------------------------------------------------
   600 — large phones and phone landscape
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
	:root {
		--header-h: 3.8rem;
		--ann-h: 30px;
	}

	/* The hero is the first thing a phone user sees; it must not need a
	   scroll to reach the buttons. */
	.gsc-hero {
		min-height: auto;
		padding-top: calc(var(--header-h) + var(--sp-6));
		padding-bottom: var(--sp-8);
	}

	.gsc-hero__title {
		font-size: clamp(2.1rem, 11vw, 3rem);
	}

	.gsc-hero__cta {
		display: grid;
		gap: var(--sp-2);
	}

	.gsc-hero__cta .gsc-btn {
		width: 100%;
	}

	/* Four stats in a row become two columns rather than a cramped strip. */
	.gsc-hero__stats {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sp-4);
	}

	/* Section rhythm tightens so the page is not mostly empty space. */
	.gsc-sec {
		padding: var(--sp-12) 0;
	}

	.gsc-sec-head {
		gap: var(--sp-4);
		margin-bottom: var(--sp-6);
	}

	/* Section headers stack instead of splitting left/right. */
	.gsc-sec-head__aside {
		width: 100%;
		justify-content: space-between;
	}

	/* Trending: the feature tile stops spanning two rows. */
	.gsc-trend {
		grid-template-columns: repeat(2, 1fr);
	}

	.gsc-trend > *:first-child {
		grid-column: span 2;
		grid-row: auto;
	}

	/* Journal: the lead article and the side list share one column. */
	.gsc-journal__side .gsc-art {
		flex-direction: row;
	}

	.gsc-journal__side .gsc-art__media {
		flex: 0 0 84px;
	}

	/* Footer columns: two up rather than four cramped. */
	.gsc-ft__cols {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sp-5);
	}

	.gsc-ft__legal-in {
		flex-direction: column;
		gap: var(--sp-2);
	}

	.gsc-ft__disclaim {
		text-align: left;
	}

	/* Payment marks wrap rather than scroll off the edge. */
	.gsc-pay {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sp-2);
	}

	/* WooCommerce tables: the cart is unusable as a real table on a phone.
	   Each row becomes a card with the thumbnail beside the details. The
	   remove control stays reachable: hiding it would leave a shopper on a
	   phone unable to take anything out of the basket. */
	.woocommerce-cart table.shop_table thead {
		display: none;
	}

	.woocommerce-cart table.shop_table tbody tr.cart_item {
		display: grid;
		grid-template-columns: 72px 1fr auto;
		grid-template-areas:
			"thumb name   remove"
			"thumb qty    price";
		gap: var(--sp-2) var(--sp-3);
		padding: var(--sp-4);
		border-bottom: 1px solid var(--border);
		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: price; font-weight: 700; text-align: right; }

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

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

	/* The actions row is a full-width block, not a table cell. */
	.woocommerce-cart table.shop_table tr:not(.cart_item) td.actions {
		display: block;
		padding: var(--sp-4);
	}

	/* The coupon row and update button stack full width. */
	.woocommerce-cart .coupon,
	.woocommerce-cart td.actions {
		display: grid;
		gap: var(--sp-2);
	}

	.woocommerce-cart .coupon #coupon_code,
	.woocommerce-cart button[name="apply_coupon"],
	.woocommerce-cart button[name="update_cart"] {
		width: 100%;
	}

	/* Order summary table: name and price only, no cramped columns. */
	.woocommerce-checkout #order_review .product-name { width: 62%; }
	.woocommerce-checkout #order_review .product-total { width: 38%; }

	/* Policy pages: reading measure and heading scale. */
	.page-content .entry-content { font-size: 15.5px; }
	.page-hero h1 { font-size: clamp(1.7rem, 8vw, 2.2rem); }
}

/* --------------------------------------------------------------------------
   400 — small phones
   -------------------------------------------------------------------------- */

@media (max-width: 400px) {
	/* Two product cards no longer fit side by side with readable prices. */
	.gsc-grid,
	.gsc-trend {
		grid-template-columns: 1fr;
	}

	.gsc-trend > *:first-child {
		grid-column: auto;
	}

	.gsc-hero__stats {
		grid-template-columns: 1fr;
		gap: var(--sp-3);
	}

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

	/* The rail shows one card at a time instead of half of two. */
	.gsc-rail__track {
		grid-auto-columns: 78vw;
	}

	.gsc-matrix {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   SHORT VIEWPORTS — phone landscape, small laptops
   -------------------------------------------------------------------------- */

@media (max-height: 560px) and (orientation: landscape) {
	/* A full-height hero on a landscape phone leaves no room for anything
	   else; it becomes a normal section. */
	.gsc-hero {
		min-height: auto;
		padding-top: calc(var(--header-h) + var(--sp-4));
		padding-bottom: var(--sp-6);
	}

	.gsc-hero__title {
		font-size: clamp(1.8rem, 5vw, 2.4rem);
	}

	/* Sticky panes have nowhere to stick on a short screen. */
	.woocommerce div.product div.images,
	.woocommerce-checkout .woocommerce-checkout-review-order,
	.woocommerce-cart .cart-collaterals .cart_totals {
		position: static;
	}
}

/* --------------------------------------------------------------------------
   PRINT — order confirmations get printed
   -------------------------------------------------------------------------- */

@media print {
	.gsc-ann,
	.gsc-hd,
	.gsc-mob,
	.gsc-search,
	.gsc-toast,
	.gsc-ft__nav,
	.gsc-ft__trust,
	.m-top,
	.cookie-note {
		display: none !important;
	}

	body.gsc-body {
		background: #fff;
		color: #000;
	}

	.woocommerce-order {
		max-width: none;
	}
}