/* ============================================================
   GLAM TOUCH — small screens & overflow hardening
   Loads last, after base/theme/layouts, so it wins.

   base.css stops at 640px. Most phones in use are 360–430px,
   where the 640px rules are still too roomy. Everything below
   targets those sizes, plus the handful of places where a wide
   child could push the whole page sideways.
   ============================================================ */

/* ---------------------------------------------------------
 * 1. Nothing may scroll the page sideways
 * ------------------------------------------------------- */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

/* Long order numbers, licence keys, e-mails and URLs */
.prose,
.article,
.gt-note,
.ordtop b,
.donerows b,
.clist a,
.coitem,
.citem .nm,
.card .nm,
.flegal,
.sumrow,
td,
th {
	overflow-wrap: anywhere;
}

/* Tables scroll inside themselves rather than stretching the page */
.prose table,
.spec {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Embeds and media never exceed their column */
iframe,
video,
embed,
object {
	max-width: 100%;
}
.gt-map iframe {
	width: 100%;
}

/* Any element that opted into a fixed width stays inside its parent */
.fbt .it,
.bar .t,
.buyrow .btn,
.cosum,
.mega {
	max-width: 100%;
}

/* Between 900 and 1080 the wide mega panel could hang off the right edge */
@media (max-width: 1180px) {
	.mega.wide {
		min-width: 0;
		width: min(640px, calc(100vw - 40px));
		left: auto;
		right: 0;
	}
}

/* ---------------------------------------------------------
 * 2. Tablets held in portrait (≤ 820px)
 * ------------------------------------------------------- */
@media (max-width: 820px) {
	.contactgrid,
	.advertise {
		grid-template-columns: 1fr;
	}
	.donerows {
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
	}
	.trust {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------
 * 3. Large phones (≤ 480px)
 * ------------------------------------------------------- */
@media (max-width: 480px) {
	:root {
		--hd: 62px;
	}

	.wrap {
		padding: 0 14px;
	}
	.sec {
		padding: 26px 0;
	}

	/* Header */
	.hbar {
		height: 58px;
		gap: 8px;
	}
	.brand .mark {
		width: 34px;
		height: 34px;
		font-size: 18px;
	}
	.brand .txt b {
		font-size: 16px;
	}
	.brand .txt span {
		font-size: 10px;
	}
	.brand-img {
		max-height: 36px;
	}
	.hicons {
		gap: 2px;
	}
	.icb {
		width: 38px;
		height: 38px;
	}

	/* Hero */
	.slide .txt {
		padding: 22px 16px 32px;
	}
	.slide .art,
	.slide {
		min-height: 0;
	}
	.slide .art {
		min-height: 200px;
	}
	.hero .arw {
		display: none;
	}

	/* Product grid — two columns still read fine at this width */
	.grid,
	.grid.g5 {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.cats {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.card .info {
		padding: 10px;
	}
	.card .nm {
		font-size: 12.5px;
		min-height: 0;
	}
	.card .acts {
		flex-direction: column;
		gap: 6px;
	}
	.card .acts .btn {
		font-size: 12px;
		padding: 8px 10px;
	}
	.rail > * {
		flex: 0 0 62vw;
	}

	/* Section headings */
	.shead {
		gap: 8px;
	}
	.shead h2 {
		font-size: 20px;
	}
	.shead p {
		font-size: 12.5px;
	}

	/* Flash sale countdown */
	.flash {
		flex-direction: column;
		gap: 14px;
	}
	.clock {
		justify-content: center;
	}
	.clock div {
		min-width: 46px;
		padding: 5px 7px;
	}
	.clock b {
		font-size: 17px;
	}

	/* Product detail */
	.pdp {
		gap: 16px;
	}
	.pdp h1 {
		font-size: 22px;
	}
	.pprice b {
		font-size: 24px;
	}
	.gal .thumbs img {
		width: 62px;
		height: 76px;
	}
	.chipz button,
	.swz button {
		min-height: 40px;
	}
	.ptabs .heads {
		gap: 2px;
		overflow-x: auto;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
	}
	.ptabs .heads button {
		padding: 10px 12px;
		font-size: 13px;
		white-space: nowrap;
	}
	.spec th {
		width: 44%;
		font-size: 13px;
	}

	/* Cart and checkout */
	.citem img {
		width: 62px;
		height: 76px;
	}
	.copanel,
	.cosum,
	.panel {
		padding: 16px 14px;
	}
	.payopt {
		flex-wrap: wrap;
	}
	.coitem img {
		width: 40px;
		height: 48px;
	}

	/* Account */
	.acchead {
		gap: 10px;
	}
	.acchead .av {
		width: 46px;
		height: 46px;
		font-size: 20px;
	}
	.acchead h2 {
		font-size: 18px;
	}
	.orditems img {
		width: 40px;
		height: 48px;
	}

	/* Tracking bar */
	.trackbar .stp {
		font-size: 9.5px;
	}
	.trackbar .dot {
		width: 24px;
		height: 24px;
		font-size: 11px;
		border-width: 2px;
	}
	.trackbar::before {
		top: 11px;
	}

	/* Thank-you page */
	.donerows {
		grid-template-columns: 1fr;
	}
	.btnrow .btn {
		width: 100%;
	}

	/* Footer */
	.fcols {
		gap: 22px;
	}
	.flegal {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
	.fbot {
		flex-direction: column;
		gap: 6px;
		text-align: center;
	}
	.appbar-btns {
		width: 100%;
	}
	.storebtn {
		flex: 1;
		justify-content: center;
	}

	/* Floating buttons sit clear of the bottom bar */
	.floats {
		right: 8px;
		bottom: 70px;
		gap: 8px;
	}
	.floats a,
	.floats button {
		width: 44px;
		height: 44px;
	}

	/* Modals fill the screen */
	.mbox {
		max-width: calc(100vw - 20px);
		max-height: 88vh;
	}
	.mbody {
		padding: 14px;
	}
	.mhead {
		padding: 12px 14px;
	}
	.drawer {
		width: min(310px, 88vw);
	}
}

/* ---------------------------------------------------------
 * 4. Small phones (≤ 380px) — iPhone SE, Galaxy A0x
 * ------------------------------------------------------- */
@media (max-width: 380px) {
	.wrap {
		padding: 0 11px;
	}

	/* One column reads better than two squeezed ones */
	.grid,
	.grid.g5,
	.cats {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.card .thumb {
		aspect-ratio: 4 / 3;
	}
	.card .nm {
		font-size: 14px;
	}
	.card .acts {
		flex-direction: row;
	}

	.brand .txt span {
		display: none;
	}
	.botnav a {
		font-size: 9.5px;
	}
	.botnav svg {
		width: 18px;
		height: 18px;
	}

	.clock div {
		min-width: 40px;
		padding: 4px 5px;
	}
	.clock b {
		font-size: 15px;
	}
	.clock small {
		font-size: 8.5px;
	}

	.trackbar .stp {
		font-size: 0;
	}
	.trackbar .dot {
		font-size: 11px;
	}

	.paybar span {
		font-size: 10px;
		padding: 4px 7px;
	}
	.tabs a,
	.tabs button {
		padding: 8px 12px;
		font-size: 12.5px;
	}
}

/* ---------------------------------------------------------
 * 5. Landscape phones — keep the hero from eating the screen
 * ------------------------------------------------------- */
@media (max-height: 480px) and (orientation: landscape) {
	.hero .slide,
	.hero-full {
		min-height: 0;
	}
	.slide .art {
		min-height: 180px;
	}
	.drawer {
		overflow-y: auto;
	}
}

/* ---------------------------------------------------------
 * 6. Touch targets
 * A tap target under 44px is hard to hit accurately.
 * ------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
	.btn,
	.icb,
	.qty button,
	.chipz button,
	.botnav a,
	.ptabs .heads button,
	.tabs a {
		min-height: 44px;
	}
	.qty input {
		height: 44px;
	}
	.swz button {
		width: 34px;
		height: 34px;
	}

	/* Hover-only affordances have no place on touch */
	.card .qv,
	.card .thumb img.b {
		display: none;
	}

	/* The minimal skin fades .acts in on hover — on touch it would never
	   appear, leaving the card with no buy button at all. */
	.skin-minimal .card .acts {
		opacity: 1;
	}
	.mega {
		display: none;
	}
}