* ,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* Kill the default blue/gray flash Chrome/Safari draw on tap — with the
	   :active feedback below on buttons/links, taps read as an app control
	   responding, not a browser highlighting a hyperlink. */
	-webkit-tap-highlight-color: transparent;
	/* Root size, not just body's — most component text sizing in this file
	   is `rem` (always relative to the ROOT element's font-size, never
	   body's), so setting only body here would leave nearly every heading/
	   label/button unaffected. 14px for a denser, more OTA-like feel. */
	font-size: 14px;
}

body {
	margin: 0;
	font-family: var(--font-base);
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.6;
	font-size: 14px;
	/* Stop pull-to-refresh/rubber-band bounce from chaining past the page
	   edges — with a sticky header and mobile-bottom-nav already pinned in
	   place, the browser's own overscroll bounce read as web-page chrome
	   fighting the app-style layout. */
	overscroll-behavior-y: contain;
}

/* Replaces the removed native tap highlight with a deliberate, consistent
   press state on every real interactive control site-wide — buttons, CTAs,
   nav/filter/tab items, icon buttons. Plain in-content <a> text links are
   deliberately excluded so body copy doesn't dim on every tap. */
.btn:active,
button:active,
.product-card-btn:active,
.wishlist-btn:active,
.wishlist-toggle-link:active,
.qty-stepper-btn:active,
.social-link:active,
.mobile-nav-item:active,
.primary-menu a:active,
.guide-tab:active,
.footer-social-link:active,
.ticket-package-card-head:active,
.contact-method-card:active,
.knt-chat-fab-item:active,
.knt-chat-fab-toggle:active,
.product-card-more-link:active {
	opacity: 0.7;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color 0.15s ease;
}

a:hover {
	color: var(--color-primary-dark);
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1.25;
	margin: 0 0 0.6em;
	font-weight: 700;
	color: var(--color-primary-dark);
}

p {
	margin: 0 0 1em;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	top: -999px;
	left: 0;
	background: var(--color-primary);
	color: #fff;
	padding: 10px 16px;
	z-index: 10000;
}

.skip-link:focus {
	top: 0;
}