/*
 * Revolution Peptide — mobile layout (max-width: 768px).
 * SHDW-style structure in RevPeP styling. Desktop (>=769px) is untouched:
 * all mobile-only elements are hidden via the min-width block at the bottom.
 */

/* ============================================================
 * Desktop: hide mobile-only chrome entirely
 * ============================================================ */
@media (min-width: 769px) {
	.revpep-mnav,
	.revpep-mdrawer,
	.revpep-mbackdrop {
		display: none !important;
	}
}

@media (max-width: 768px) {
	:root {
		--revpep-mgutter: 14px;
	}

	html,
	body,
	#page,
	.site,
	.site-content,
	#content {
		max-width: 100%;
		overflow-x: clip;
	}

	/* ----- Header shell ----- */
	.site-header {
		position: sticky;
		top: 0;
		z-index: 300;
		background: #000000;
	}

	#site-navigation .inside-navigation {
		display: block;
		flex-wrap: nowrap;
		min-height: 0;
		margin: 0;
		padding: 0;
	}

	/* Hide every desktop nav part on mobile */
	.revpep-desktop-nav-logo,
	.revpep-nav-search-form,
	.revpep-nav-categories,
	.main-navigation .main-nav,
	.main-navigation .menu-bar-items,
	.main-navigation .menu-toggle,
	.mobile-menu-control-wrapper {
		display: none !important;
	}

	/*
	 * GeneratePress "inline mobile toggle" hides every .inside-navigation child
	 * except .main-nav / .navigation-search — which nukes our custom mobile chrome.
	 */
	.has-inline-mobile-toggle #site-navigation .inside-navigation > .revpep-mnav {
		display: block !important;
	}

	.has-inline-mobile-toggle #site-navigation .inside-navigation > .revpep-mdrawer {
		display: flex !important;
	}

	.has-inline-mobile-toggle #site-navigation .inside-navigation > .revpep-mbackdrop:not([hidden]) {
		display: block !important;
	}

	/*
	 * GP mobile CSS sets `.main-navigation ul { display: none }`, which hides
	 * our drawer link lists even when the drawer is open.
	 */
	.main-navigation .revpep-mdrawer .revpep-mdrawer-list,
	#site-navigation .revpep-mdrawer .revpep-mdrawer-list {
		display: block !important;
	}

	.main-navigation .revpep-mdrawer .revpep-mdrawer-list li {
		display: list-item !important;
	}

	/* ----- Promo bar ----- */
	.revpep-promo-bar {
		padding: 11px 14px;
	}

	.revpep-promo-bar p {
		font-size: 11px;
		line-height: 1.5;
		letter-spacing: 0.04em;
	}

	/* ============================================================
	 * Mobile nav (centered logo row + toolbar)
	 * ============================================================ */
	.revpep-mnav {
		display: block !important;
		width: 100%;
		background: #000000;
		border-bottom: 1px solid var(--revpep-border);
	}

	.revpep-mnav-logo-row {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 8px 12px 4px;
	}

	.revpep-mnav-logo {
		display: inline-flex;
		align-items: center;
		line-height: 0;
		text-decoration: none;
	}

	.revpep-mnav-logo img {
		display: block;
		height: 50px;
		width: auto;
		max-width: 190px;
		object-fit: contain;
	}

	.revpep-mnav-logo-fallback {
		color: var(--revpep-cyan);
		font-family: var(--revpep-font-display);
		font-size: 15px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-shadow: var(--revpep-glow-cyan);
	}

	.revpep-mnav-bar {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 4px 12px 10px;
	}

	.revpep-mnav-burger {
		flex: 0 0 auto;
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 4px;
		width: 44px;
		height: 44px;
		padding: 11px 10px;
		margin: 0;
		border: 1px solid var(--revpep-border);
		border-radius: var(--revpep-radius);
		background: rgba(0, 245, 255, 0.06);
		cursor: pointer;
		touch-action: manipulation;
	}

	.revpep-mnav-burger span {
		display: block;
		width: 100%;
		height: 2px;
		border-radius: 2px;
		background: var(--revpep-cyan);
		box-shadow: 0 0 8px rgba(0, 245, 255, 0.45);
	}

	.revpep-mnav-search {
		flex: 1 1 auto;
		min-width: 0;
		margin: 0;
		display: flex;
	}

	.revpep-mnav-search input[type="search"] {
		width: 100%;
		height: 44px;
		padding: 0 12px;
		border: 1px solid var(--revpep-border);
		border-radius: var(--revpep-radius);
		background: #000000;
		color: var(--revpep-text);
		font-family: var(--revpep-font-display);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	.revpep-mnav-search input[type="search"]::placeholder {
		color: rgba(0, 245, 255, 0.45);
		opacity: 1;
	}

	.revpep-mnav-icons {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		gap: 4px;
	}

	.revpep-mnav-icon {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		color: var(--revpep-cyan) !important;
		text-decoration: none;
		touch-action: manipulation;
	}

	.revpep-mnav-icon .revpep-icon {
		display: block;
		width: 21px;
		height: 21px;
		background-color: var(--revpep-cyan);
	}

	.revpep-mnav-cart-count {
		position: absolute;
		top: 5px;
		right: 3px;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: 999px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 9px;
		font-weight: 700;
		line-height: 1;
		color: #07060f;
		background: var(--revpep-pink);
		box-shadow: var(--revpep-glow-pink);
	}

	.revpep-mnav-cart-count[hidden] {
		display: none;
	}

	/* ============================================================
	 * Off-canvas drawer
	 * ============================================================ */
	.revpep-mdrawer {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(84vw, 330px);
		max-width: 330px;
		z-index: 100050;
		display: flex;
		flex-direction: column;
		background: #07060f;
		border-right: 1px solid var(--revpep-border);
		box-shadow: 6px 0 32px rgba(0, 0, 0, 0.55);
		transform: translateX(-105%);
		transition: transform 240ms ease;
		overflow-x: hidden;
		overflow-y: auto;
		visibility: hidden;
		pointer-events: none;
	}

	.revpep-mdrawer.is-open {
		transform: translateX(0);
		visibility: visible;
		pointer-events: auto;
	}

	.revpep-mdrawer-chrome {
		display: flex;
		align-items: stretch;
		flex: 0 0 auto;
		border-bottom: 1px solid var(--revpep-border);
		background: #0f0d1a;
	}

	.revpep-mdrawer-tabs {
		display: flex;
		flex: 1 1 auto;
		min-width: 0;
	}

	.revpep-mdrawer-tab {
		flex: 1 1 50%;
		min-height: 52px;
		border: 0;
		background: #151228;
		color: var(--revpep-text);
		font-family: var(--revpep-font-display);
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		cursor: pointer;
		border-bottom: 2px solid transparent;
		touch-action: manipulation;
	}

	.revpep-mdrawer-tab.is-active {
		background: #1a1730;
		color: var(--revpep-cyan);
		border-bottom-color: var(--revpep-cyan);
	}

	.revpep-mdrawer-close {
		flex: 0 0 50px;
		width: 50px;
		min-height: 50px;
		border: 0;
		background: linear-gradient(135deg, var(--revpep-cyan), var(--revpep-pink));
		color: #07060f;
		font-size: 28px;
		line-height: 1;
		font-weight: 700;
		cursor: pointer;
		padding: 0;
		touch-action: manipulation;
	}

	.revpep-mdrawer-panels {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
	}

	.revpep-mdrawer-panel {
		display: block;
	}

	.revpep-mdrawer-panel[hidden],
	.revpep-mdrawer-panel:not(.is-active) {
		display: none !important;
	}

	.revpep-mdrawer-panel.is-active {
		display: block !important;
	}

	.revpep-mdrawer-list {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.revpep-mdrawer-list li {
		border-bottom: 1px solid rgba(0, 245, 255, 0.1);
	}

	.revpep-mdrawer-list a {
		display: block;
		padding: 16px 18px;
		color: var(--revpep-text) !important;
		font-family: var(--revpep-font-display);
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		text-decoration: none;
	}

	.revpep-mdrawer-list a:active,
	.revpep-mdrawer-list a:focus {
		color: var(--revpep-cyan) !important;
		background: rgba(0, 245, 255, 0.06);
	}

	.revpep-mbackdrop {
		position: fixed;
		inset: 0;
		z-index: 100045;
		background: rgba(4, 3, 10, 0.78);
	}

	.revpep-mbackdrop[hidden] {
		display: none;
	}

	body.revpep-mdrawer-active {
		overflow: hidden;
	}

	/* ============================================================
	 * Homepage — hero
	 * ============================================================ */
	.revpep-hero {
		margin-bottom: -4rem;
		padding-bottom: 4rem;
	}

	.revpep-hero::after {
		bottom: 4rem;
		height: min(70%, 360px);
		min-height: 150px;
	}

	.revpep-hero-img {
		max-height: min(68vh, 500px);
		object-fit: cover;
		object-position: center top;
	}

	/* ----- Section shells ----- */
	.revpep-home-products {
		padding: 1rem 0 1.75rem;
	}

	.revpep-home-products:first-of-type {
		padding-top: 0.25rem;
	}

	.revpep-home-products .revpep-section-title {
		margin-bottom: 1rem;
		padding: 0 var(--revpep-mgutter);
		font-size: clamp(1.5rem, 7vw, 2rem);
	}

	/* ----- Carousels: 2 products per view ----- */
	.revpep-home-products:first-of-type .revpep-carousel {
		max-width: 100%;
		margin: 0;
		padding: 0 var(--revpep-mgutter);
	}

	.revpep-carousel {
		position: relative;
		display: block;
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 0 var(--revpep-mgutter);
	}

	.revpep-carousel-track {
		grid-column: auto;
		width: 100%;
	}

	.revpep-carousel .revpep-carousel-products li.product {
		--revpep-carousel-cols: 2;
		--revpep-carousel-gap: 12px;
	}

	.revpep-carousel-products {
		gap: 12px;
	}

	/* Arrows overlay the track edges on mobile */
	.revpep-carousel-prev,
	.revpep-carousel-next,
	.revpep-home-products:first-of-type .revpep-carousel-prev,
	.revpep-home-products:first-of-type .revpep-carousel-next {
		position: absolute;
		top: 38%;
		transform: translateY(-50%);
		z-index: 6;
		width: 30px;
		height: 42px;
		margin: 0;
		touch-action: manipulation;
	}

	.revpep-carousel-prev,
	.revpep-home-products:first-of-type .revpep-carousel-prev {
		left: 0;
		right: auto;
	}

	.revpep-carousel-next,
	.revpep-home-products:first-of-type .revpep-carousel-next {
		right: 0;
		left: auto;
	}

	.revpep-carousel-prev::before,
	.revpep-carousel-next::before {
		width: 14px;
		height: 14px;
		border-width: 0 0 5px 5px;
	}

	.revpep-carousel-scrubber,
	.revpep-home-products:first-of-type .revpep-carousel-scrubber {
		padding: 0.25rem var(--revpep-mgutter) 0.5rem;
	}

	.revpep-carousel-car-svg {
		width: 52px;
	}

	/* ----- Category tiles ----- */
	.revpep-home-categories {
		padding: 0 var(--revpep-mgutter) 1.75rem;
	}

	.revpep-home-categories-intro {
		margin-bottom: 1.25rem;
		padding: 0 0.1rem;
	}

	.revpep-home-categories-title {
		font-size: clamp(1.35rem, 6.4vw, 1.85rem);
	}

	.revpep-home-categories-subtitle {
		font-size: 0.9rem;
	}

	.revpep-home-categories-grid {
		grid-template-columns: 1fr;
		gap: 10px;
		max-width: none;
	}

	.revpep-home-category-media {
		aspect-ratio: 2.2 / 1;
	}

	/* ----- Quality banner ----- */
	.revpep-home-quality {
		padding: 0 var(--revpep-mgutter) 1.75rem;
	}

	.revpep-home-quality-inner {
		grid-template-columns: 1fr;
		gap: 1.25rem;
		max-width: none;
		padding: 1.15rem;
	}

	.revpep-home-quality-media {
		order: -1;
		min-height: 190px;
	}

	.revpep-home-quality-media img {
		min-height: 190px;
	}

	.revpep-home-quality-title {
		font-size: clamp(1.25rem, 5.8vw, 1.6rem);
	}

	/* ----- Latest Additions (static 2-up) ----- */
	.revpep-home-products--static {
		padding-bottom: 1rem;
	}

	.revpep-product-row {
		padding: 0 var(--revpep-mgutter);
	}

	.revpep-product-row-products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
	}

	/* ----- Blog CTA ----- */
	.revpep-home-blog-cta {
		padding: 0 var(--revpep-mgutter) 2rem;
	}

	.revpep-home-blog-cta-inner {
		padding: 1.35rem 1rem;
	}

	.revpep-home-blog-cta-title {
		font-size: clamp(1.35rem, 6.2vw, 1.85rem);
	}

	.revpep-home-blog-cta-btn {
		display: block;
		width: 100%;
		max-width: 280px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	/* ============================================================
	 * Product cards (carousel + grid)
	 * ============================================================ */
	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
	.revpep-product-row-products .woocommerce-loop-product__title,
	.revpep-carousel-products .woocommerce-loop-product__title {
		font-size: 0.8rem;
		line-height: 1.3;
		min-height: 2.6em;
	}

	.woocommerce ul.products li.product .price,
	.revpep-product-row-products .price,
	.revpep-carousel-products .price {
		font-size: 0.9rem;
	}

	.woocommerce ul.products li.product .button,
	.revpep-product-row-products .button,
	.revpep-carousel-products .button {
		font-size: 10px;
		padding: 10px 8px;
	}

	/* ============================================================
	 * Shop / catalog / info / single post
	 * ============================================================ */
	body.revpep-catalog-layout .site-main .inside-article,
	body.revpep-info-layout .site-main .inside-article,
	body.revpep-blog-layout.single-post .site-main .inside-article {
		padding: 1rem var(--revpep-mgutter) 1.5rem;
	}

	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.revpep-category-page ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
	}

	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product {
		padding: 12px 10px 14px;
	}

	.woocommerce-products-header__title,
	.entry-title,
	body.revpep-catalog-layout .entry-header .entry-title {
		font-size: clamp(1.4rem, 6.6vw, 2rem);
	}

	.woocommerce .woocommerce-ordering select,
	.woocommerce-page .woocommerce-ordering select {
		width: 100%;
		max-width: 100%;
	}

	/* ============================================================
	 * Blog archive + single
	 * ============================================================ */
	body.revpep-blog-layout.blog .site-main {
		grid-template-columns: 1fr;
		gap: 1rem;
		padding: 0 var(--revpep-mgutter) 1.75rem;
	}

	body.revpep-blog-layout.blog .entry-header .entry-title {
		font-size: 1rem;
	}

	body.revpep-blog-layout.blog .entry-summary {
		font-size: 0.86rem;
	}

	body.revpep-blog-layout.single-post .entry-header .entry-title {
		font-size: clamp(1.3rem, 5.8vw, 1.75rem);
	}

	body.revpep-blog-layout.single-post .entry-content {
		font-size: 0.95rem;
	}

	body.revpep-blog-layout.blog .paging-navigation .nav-links {
		font-size: 0.85rem;
	}

	/* ============================================================
	 * My Account — login / register stack on mobile
	 * ============================================================ */
	body.woocommerce-account #customer_login,
	body.woocommerce-account #customer_login.u-columns.col2-set {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 1rem;
	}

	body.woocommerce-account #customer_login .u-column1,
	body.woocommerce-account #customer_login .u-column2,
	body.woocommerce-account #customer_login .col-1,
	body.woocommerce-account #customer_login .col-2 {
		float: none !important;
		width: 100% !important;
		max-width: none !important;
		padding: 0;
		background: transparent !important;
		border: 0 !important;
	}

	/* ============================================================
	 * Footer
	 * ============================================================ */
	.revpep-footer-copy {
		padding: 0.9rem var(--revpep-mgutter) 1rem;
	}

	.revpep-footer-copy p {
		font-size: 0.75rem;
		font-weight: 600;
		color: #ffffff;
	}
}

@media (max-width: 480px) {
	.revpep-home-category-name {
		font-size: 1rem;
	}

	.revpep-promo-bar p {
		font-size: 10px;
		line-height: 1.45;
	}

	.revpep-mnav-logo img {
		height: 44px;
		max-width: 168px;
	}

	/* Single product */
	body.single-product.revpep-catalog-layout .site-main .inside-article {
		padding: 0.85rem 0.75rem 1.5rem;
	}

	body.single-product .woocommerce div.product .summary.entry-summary {
		padding: 1rem;
	}

	body.single-product .revpep-product-actions {
		flex-direction: column;
	}

	body.single-product .revpep-product-btn,
	body.single-product .woocommerce div.product form.cart .button,
	body.single-product .woocommerce div.product form.cart .single_add_to_cart_button,
	body.single-product .revpep-buy-now-button {
		width: 100%;
		flex-basis: auto;
	}

	body.single-product .woocommerce div.product .woocommerce-tabs ul.tabs {
		flex-direction: column;
		border-bottom: none;
	}

	/* ----- Peptide calculator ----- */
	.revpep-calc {
		margin-left: 0;
		margin-right: 0;
		padding: 1rem var(--revpep-mgutter);
	}

	.revpep-calc-header {
		flex-direction: column;
		gap: 0.5rem;
	}

	.revpep-calc-version {
		align-self: flex-start;
	}

	.revpep-calc-fields {
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem;
	}

	.revpep-calc-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.revpep-calc-btn {
		width: 100%;
		text-align: center;
	}

	.revpep-calc-tip {
		text-align: center;
	}

	.revpep-calc-results-grid {
		grid-template-columns: 1fr;
	}

	body.single-product .woocommerce div.product .woocommerce-tabs ul.tabs li a {
		width: 100%;
		border-radius: var(--revpep-radius);
	}

	/* ----- Order received / thank-you page ----- */
	body.woocommerce-order-received.revpep-catalog-layout .site-main .inside-article {
		padding: 0.85rem var(--revpep-mgutter) 1.75rem;
	}

	body.woocommerce-order-received .revpep-thankyou-header {
		margin-bottom: 1.15rem;
		text-align: left;
	}

	body.woocommerce-order-received .revpep-thankyou-title {
		font-size: 1.65rem;
	}

	body.woocommerce-order-received .revpep-thankyou-subtitle {
		font-size: 0.98rem;
	}

	body.woocommerce-order-received .revpep-thankyou-payment-wrap {
		margin: 0 0 1.25rem;
		padding: 1rem 0.85rem;
	}

	body.woocommerce-order-received .revpep-payment-instructions-title {
		font-size: 1.25rem;
		line-height: 1.25;
	}

	body.woocommerce-order-received .revpep-payment-invoice {
		padding: 0.75rem 0.85rem;
	}

	body.woocommerce-order-received .revpep-payment-invoice strong {
		font-size: 1.2rem;
	}

	body.woocommerce-order-received .revpep-payment-instructions p,
	body.woocommerce-order-received .revpep-payment-instructions li {
		font-size: 0.95rem;
		line-height: 1.5;
	}

	body.woocommerce-order-received .revpep-payment-methods li {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.2rem;
	}

	body.woocommerce-order-received .revpep-payment-phone {
		white-space: normal;
	}

	body.woocommerce-order-received .woocommerce-thankyou-order-received-text {
		font-size: 0.98rem;
	}

	body.woocommerce-order-received .woocommerce-order-overview {
		grid-template-columns: 1fr;
		gap: 0.55rem;
	}

	body.woocommerce-order-received .woocommerce-order-overview li {
		padding: 0.75rem 0.85rem;
		font-size: 0.84rem;
	}

	body.woocommerce-order-received .woocommerce-order-details__title,
	body.woocommerce-order-received .woocommerce-column__title {
		font-size: 0.92rem;
	}

	body.woocommerce-order-received .woocommerce-table--order-details {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	body.woocommerce-order-received .woocommerce-table--order-details th,
	body.woocommerce-order-received .woocommerce-table--order-details td {
		padding: 0.65rem 0.7rem;
		font-size: 0.86rem;
		min-width: 88px;
	}

	body.woocommerce-order-received .woocommerce-columns--addresses {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	body.woocommerce-order-received .woocommerce-customer-details address {
		padding: 0.85rem;
		font-size: 0.92rem;
		word-break: break-word;
	}
}