/* ProPluginsLab - Mobile styles: hamburger drawer, sticky buy bar, touch targets, small-screen layout. Loads site-wide after enhance.css. */

/* Horizontal overflow containment: no element may pan the page sideways.
   Covers third-party payment iframes (Stripe/PayPal), select2 dropdowns
   and wide tables. */
html,body{overflow-x:hidden}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
iframe{max-width:100%}
.display,.hero h1,.shop-hero h1,.section-head h2,.entry-header h1{overflow-wrap:break-word}

/* Cart & checkout pages render their own hero inside the template, so the
   plain page title from page.php is a duplicate - and its 780px content
   column is too narrow for checkout anyway. */
.woocommerce-cart .entry-header,.woocommerce-checkout .entry-header{display:none}
.woocommerce-cart .entry-content,.woocommerce-checkout .entry-content{max-width:none!important}
.wrap{min-width:0;max-width:var(--max)}
form.ck-layout>main,form.ck-layout>aside,form.cart-layout>main,form.cart-layout>aside{min-width:0;max-width:100%}
#order_review,#payment,.order-summary,.ck-notices{max-width:100%;min-width:0}
table.shop_table{max-width:100%}
.select2-container{max-width:100%!important}
.woocommerce-form-coupon-toggle .woocommerce-info,
form.woocommerce-form-login,form.checkout_coupon{max-width:100%;box-sizing:border-box}

/* Hamburger toggle (hidden on desktop) */
.mobile-menu-toggle{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;place-items:center;flex-shrink:0;padding:0}
.mobile-menu-toggle .ico-close{display:none}
.mobile-menu-toggle.is-open .ico-open{display:none}
.mobile-menu-toggle.is-open .ico-close{display:block}
.nav-mobile-extras{display:none}

/* Sticky buy bar - created by main.js on product pages when the real
   add-to-cart button scrolls off screen. */
.ppl-buybar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;align-items:center;gap:12px;padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -8px 28px rgba(26,22,20,.12)}
.ppl-buybar[hidden]{display:none}
.ppl-buybar .bb-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ppl-buybar .bb-name{font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ppl-buybar .bb-price{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--ink);line-height:1}
.ppl-buybar .bb-price .woocommerce-Price-amount{font-family:var(--font-display);font-weight:600}
.ppl-buybar .bb-add{flex-shrink:0}

/* Keep the sticky header below the WP admin bar when logged in */
.admin-bar .site-header{top:32px}
@media(max-width:782px){.admin-bar .site-header{top:46px}}

/* Product gallery: swipeable slider (all viewports; native touch on mobile).
   Thumbnails and dots scroll the track; tapping a slide opens the lightbox. */
.ppl-gallery-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ppl-gallery-track::-webkit-scrollbar{display:none}
.ppl-gallery-track .ppl-slide{flex:0 0 100%;scroll-snap-align:center;display:block;min-width:0}
.ppl-gallery-dots{display:flex;justify-content:center;gap:6px;margin:2px 0 10px}
.ppl-gallery-dots:empty{display:none}
.ppl-gallery-dots button{width:8px;height:8px;border-radius:999px;background:var(--line-strong);border:none;padding:0;cursor:pointer;transition:all .2s}
.ppl-gallery-dots button.active{background:var(--red);width:20px}
.ppl-thumb-link.active{outline:2px solid var(--red);outline-offset:2px;border-radius:8px}

/* --- Tablet & below --- */
@media(max-width:1024px){
	/* patch.css re-applies position:sticky unconditionally, overriding
	   theme.css's mobile reset - on phones the pinned buy box then collides
	   with the related-products tiles scrolling up beneath it. Force static
	   here (this file loads last). */
	.product-sidebar{position:static!important;top:auto!important}
}

/* Desktop: keep the sticky buy box above any positioned tile content. */
.product-sidebar{z-index:5}

/* --- Tablet & below: drawer navigation --- */
@media(max-width:960px){
	.mobile-menu-toggle{display:grid}
	.site-header .inner{gap:16px}

	/* The nav becomes a drawer under the header */
	.site-header .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);padding:8px 20px 20px;max-height:calc(100vh - 70px);overflow-y:auto;z-index:49}
	.site-header .nav.is-open{display:block}
	.site-header .nav.is-open ul{display:flex;flex-direction:column;align-items:stretch;gap:0}
	.site-header .nav a{padding:14px 10px;font-size:16px;border-bottom:1px solid var(--line);border-radius:0}
	.site-header .nav li:last-child>a{border-bottom:none}
	.site-header .nav ul ul,.site-header .nav .sub-menu{display:block;position:static;border:none;box-shadow:none!important;padding:0 0 0 16px;min-width:0;border-radius:0;background:transparent;opacity:1!important;visibility:visible!important;transform:none!important;transition:none!important;margin-top:0!important}
	.site-header .nav .sub-menu::before{display:none}
	.site-header .nav .sub-menu a{font-size:15px}
	.nav-mobile-extras{display:grid;gap:10px;padding-top:16px}
	.nav-mobile-extras .btn{width:100%;justify-content:center}

	/* Comfortable touch targets */
	.icon-btn{width:42px;height:42px}
}

/* --- iOS: 16px inputs prevent auto zoom on focus; wide tables scroll --- */
@media(max-width:768px){
	.field input,.field select,.field textarea,
	.woocommerce form .form-row input.input-text,
	.woocommerce form .form-row textarea,
	.woocommerce form .form-row select,
	form.checkout input,form.checkout textarea,form.checkout select,
	.search-input,.ppl-search-form .search-input,
	.woocommerce-form-login input,.woocommerce-form-register input{font-size:16px}
	table.shop_table{display:block;overflow-x:auto}
}

/* --- Phones --- */
@media(max-width:640px){
	.site-header .inner{padding:10px 16px;gap:10px}
	.header-cta{gap:6px}
	.header-cta>.btn{display:none} /* "Browse plugins" lives in the drawer here */

	.hero{padding:44px 0 56px}
	.hero h1{font-size:clamp(38px,10.5vw,52px);margin:20px 0}
	.hero .lede{font-size:16px}
	.hero-actions{gap:10px}
	.hero-actions .btn{width:100%;justify-content:center}
	.announce{white-space:normal;height:auto}

	/* Hero mockups: full-bleed swipeable carousel. First card aligns with the
	   page gutter and the next card peeks in from the right. */
	.hero-visual{min-height:0;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px var(--gutter) 18px;margin:0 calc(-1 * var(--gutter));scroll-padding-left:var(--gutter);-webkit-overflow-scrolling:touch;scrollbar-width:none}
	.hero-visual::-webkit-scrollbar{display:none}
	.hero-visual .product-mockup{position:static;flex:0 0 78%;max-width:300px;transform:none;animation:none;scroll-snap-align:start}
	.hero-visual .metric-chip{display:none}

	.stats-bar{grid-template-columns:repeat(2,1fr);margin-top:40px;padding:20px;gap:4px}
	.stat-cell{border-right:none;border-bottom:none;padding:12px}
	.stat-cell .n{font-size:28px}
	.trust-grid{grid-template-columns:repeat(2,1fr);gap:8px}
	.trust-item{padding:8px 4px;gap:10px}

	.section{padding:48px 0}
	.section-head{margin-bottom:36px}
	.plugins-grid{gap:16px}
	.pc-banner{height:auto;min-height:200px}
	.product-tile .pt-banner{height:auto;min-height:160px;padding:20px}
	.product-tile .pt-banner h3{font-size:22px}
	.bis-actions .btn,.final-actions .btn{width:100%;justify-content:center}
	.final-cta{padding:56px 24px}

	/* Product page: stack icon above title */
	.product-hero{flex-direction:column;gap:16px}
	.product-icon-lg{width:72px;height:72px;font-size:40px;border-radius:16px}

	/* Cart items: two-row layout (enhance.css forces 5 columns, hence the
	   !important). Row 1: thumb / name / remove. Row 2: qty / price. */
	.cart-item{grid-template-columns:56px minmax(0,1fr) auto!important;grid-template-rows:auto auto;gap:8px 12px!important;align-items:start!important;padding:16px!important}
	.cart-item .ci-icon{grid-column:1;grid-row:1/3}
	.cart-item .ci-info{grid-column:2;grid-row:1;min-width:0;overflow-wrap:anywhere}
	.cart-item .ci-remove{grid-column:3;grid-row:1;justify-self:end}
	.cart-item .qty-stepper{grid-column:2;grid-row:2;justify-self:start}
	.cart-item .ci-price{grid-column:3;grid-row:2;justify-self:end;align-self:end}

	/* Tier rows: keep sale price pairs on their own line */
	.srow-price del,.srow-price ins{display:inline-block;vertical-align:baseline}

	/* Keep the sticky buy bar button clear of floating chat widgets */
	.ppl-buybar{padding-right:88px}
}

/* --- Small phones --- */
@media(max-width:400px){
	.ppl-account-icon{display:none} /* account lives in the drawer */
	.hero-visual .product-mockup{flex-basis:84%}
}