/**
 * StylePehno — Production mobile responsiveness (real device viewports).
 *
 * Loaded after main.css. Targets 320–1024px and overflow root causes.
 *
 * @package StylePehno
 */

/* ==========================================================================
   1. Document shell — prevent horizontal scroll on iOS/Android WebViews
   ========================================================================== */

html {
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	overscroll-behavior-x: none;
}

body {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow-x: hidden;
	position: relative;
	touch-action: manipulation;
}

#main-content,
.site-main,
.site-header,
.site-footer,
.home-landing,
.home-hero,
.home-hero__media,
.cat-landing,
.cat-gender-landing,
.cat-gender-landing section,
.sp-shop,
.sp-shop__inner,
.sp-shop__wc-wrap,
.sp-pdp,
.sp-pdp__hero,
.page-content,
.content-with-sidebar,
.container,
.woocommerce,
.woocommerce-page {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.site-main,
.home-landing,
.cat-gender-landing,
.sp-shop {
	overflow-x: hidden;
}

/* ==========================================================================
   2. Images — responsive default + cover exceptions
   ========================================================================== */

img,
video,
iframe,
embed,
object {
	max-width: 100%;
	height: auto;
}

/* Fill-ratio boxes (global height:auto would break these on Safari mobile) */
.home-hero__media .home-hero__image,
.home-hero__picture .home-hero__image,
.product-card__media .product-card__image,
.cat-gender-landing .men-media-fill img,
.cat-gender-landing .men-media-fill video,
.cat-tile__image,
.sp-pdp__gallery-main img {
	max-width: 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-card__image--placeholder {
	height: 100%;
	min-height: 12rem;
}

/* ==========================================================================
   3. Announcement marquee — must not expand document width (WebKit mobile)
   ========================================================================== */

.announcement-bar {
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	contain: layout paint style;
	isolation: isolate;
}

.announcement-bar__viewport {
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	contain: strict;
}

.announcement-bar__track {
	position: relative;
	display: inline-flex;
	width: max-content;
	max-width: none;
	will-change: transform;
}

/* ==========================================================================
   4. Hero — real mobile height (not only 100dvh / DevTools)
   ========================================================================== */

.home-hero,
.home-hero__media {
	min-height: calc(var(--sp-vh, 1vh) * 100);
	min-height: 100svh;
	min-height: 100dvh;
}

.home-hero__media .home-hero__image,
.home-hero__picture .home-hero__image {
	min-height: calc(var(--sp-vh, 1vh) * 100);
	min-height: inherit;
}

.home-hero__categories {
	z-index: 20;
	pointer-events: auto;
}

.home-hero__category-link {
	color: #fff !important;
	-webkit-text-fill-color: #fff;
}

/* ==========================================================================
   5. Touch devices — no hover scale overflow
   ========================================================================== */

@media (hover: none), (pointer: coarse) {
	.product-card:hover .product-card__image,
	.product-card:focus-within .product-card__image,
	.cat-tile:hover .cat-tile__image,
	.cat-gender-landing .cat-tile:hover .cat-tile__image {
		transform: none;
	}
}

/* ==========================================================================
   6. Breakpoints — real device widths
   ========================================================================== */

/* Large phones / phablets (414px and below) */
@media (max-width: 414px) {
	:root {
		--container-padding: 1rem;
	}

	.home-hero__categories {
		gap: 0.65rem 1rem;
		padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
	}

	.home-hero__category-link {
		font-size: 0.75rem;
		letter-spacing: 0.16em;
	}

	.sp-shop ul.products {
		gap: 1.25rem 0.65rem;
	}
}

/* iPhone 12/13/14 (390px) */
@media (max-width: 390px) {
	.site-header__top-inner {
		gap: 0.25rem;
	}

	.custom-logo {
		max-height: 38px;
	}
}

/* iPhone SE / narrow Android (375px) */
@media (max-width: 375px) {
	.home-hero__category-link {
		font-size: 0.6875rem;
	}
}

/* Very small (320px) */
@media (max-width: 320px) {
	:root {
		--container-padding: 0.875rem;
	}

	.cat-tiles,
	.cat-gender-landing .cat-tiles {
		grid-auto-columns: minmax(8.5rem, 78%);
	}

	.sp-shop ul.products,
	.sp-shop ul.products.sp-shop__grid--cols-3,
	.sp-shop ul.products.sp-shop__grid--cols-4 {
		grid-template-columns: 1fr;
	}

	.cat-products,
	.cat-gender-landing .men-featured__grid {
		grid-template-columns: 1fr;
	}
}

/* Tablet portrait (768px) — between phone and desktop nav */
@media (min-width: 768px) and (max-width: 991px) {
	.cat-products,
	.cat-gender-landing .men-featured__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sp-shop ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cat-gender-landing .cat-tiles {
		grid-auto-columns: minmax(10rem, 28%);
	}
}

/* Small laptop / iPad landscape (1024px) — desktop nav active at 992+ */
@media (min-width: 992px) and (max-width: 1024px) {
	.container {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	.sp-shop ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ==========================================================================
   7. Mobile layout block (≤991px) — reinforce full width
   ========================================================================== */

/* JS-detected mobile — backup when CSS cache/media queries fail on device */
body.sp-nav-drawer-mode .site-header__nav,
body.sp-nav-drawer-mode .mega-menu-panels,
body.sp-nav-drawer-mode .mega-menu {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
}

body.sp-nav-drawer-mode .menu-toggle {
	display: flex !important;
}

body.sp-nav-drawer-mode .site-header {
	width: 100%;
	max-width: 100%;
}

body.sp-nav-drawer-mode .site-header__top-inner {
	width: 100%;
	max-width: 100%;
}

@media (max-width: 991px) {
	html,
	body {
		overflow-x: hidden !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.site-header,
	.site-header__top,
	.site-header__top-inner {
		width: 100%;
		max-width: 100%;
	}

	.site-header__nav,
	.mega-menu-panels,
	.mega-menu {
		display: none !important;
	}

	.menu-toggle,
	.search-toggle {
		display: flex !important;
	}

	body.home-single-hero .site-header__nav {
		display: none !important;
	}

	/* Horizontal scroll regions — contained, no vw-based page width */
	.cat-tiles,
	.cat-gender-landing .cat-tiles,
	.cat-colors-cougar,
	.cat-ugc-scroll,
	.cat-join-scroll,
	.sp-shop__nav {
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}

	.cat-tiles,
	.cat-gender-landing .cat-tiles {
		grid-auto-flow: column;
		grid-auto-columns: minmax(9rem, 42%);
		grid-template-columns: unset;
	}

	.entry-content table,
	.woocommerce table.shop_table,
	.sp-pdp__size-table-wrap table {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.woocommerce .col2-set,
	.woocommerce form .form-row {
		width: 100%;
		max-width: 100%;
		float: none;
	}

	.sp-shop__toolbar-row {
		width: 100%;
		max-width: 100%;
	}

	.men-hero,
	.men-story,
	.men-sale,
	.men-duo,
	.cat-split,
	.cat-promo {
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
	}

	.men-story__video.men-media-fill {
		width: 100%;
		max-width: 100%;
	}

	.cat-split--story .cat-split__thumb {
		width: min(100%, 280px);
		max-width: 100%;
	}
}

/* ==========================================================================
   8. Tables & embeds
   ========================================================================== */

.entry-content iframe,
.entry-content video {
	max-width: 100%;
	width: 100%;
}

.wp-block-embed,
.wp-block-image {
	max-width: 100%;
}

.page-content--narrow {
	width: 100%;
	max-width: 30rem;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   9. JS viewport class — applies on REAL phones (innerWidth), not only @media
      Use when cached CSS or media queries fail on device browsers.
   ========================================================================== */

html.sp-is-mobile .announcement-bar__track {
	position: absolute;
	left: 0;
	top: 0;
}

html.sp-is-mobile .sp-shop__nav-list {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
	min-width: min-content;
}

html.sp-is-mobile .sp-shop__nav {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

html.sp-is-mobile .sp-shop__view {
	display: none !important;
}

html.sp-is-mobile .sp-shop__toolbar-row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.65rem;
}

html.sp-is-mobile .sp-shop__toolbar-right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
}

html.sp-is-mobile .sp-shop__toolbar-left .woocommerce-result-count {
	display: block;
	margin: 0 0 0.25rem;
}

html.sp-is-mobile .cat-tiles,
html.sp-is-mobile .cat-gender-landing .cat-tiles {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(9rem, 42%);
	grid-template-columns: unset;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
}

html.sp-is-mobile .cat-tile {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-width: 0;
	scroll-snap-align: start;
}

html.sp-is-mobile .cat-tile__media {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}

html.sp-is-mobile .cat-tile__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

html.sp-is-mobile .men-story__text,
html.sp-is-mobile .men-story__cta,
html.sp-is-mobile .cat-split__text {
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
}

html.sp-is-mobile .men-story__content {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding-left: max(var(--container-padding), var(--safe-left));
	padding-right: max(var(--container-padding), var(--safe-right));
}

html.sp-is-mobile .sp-shop ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 0.75rem;
}

html.sp-is-mobile .woocommerce .woocommerce-breadcrumb {
	max-width: 100%;
	overflow-x: auto;
	font-size: 0.75rem;
}