/* * TVB Mobile Comfort layer (v4.17.0, 2026-07-09) — phones & small tablets ONLY. * * Every rule in this file lives inside @media (max-width:768px): desktop rendering * is untouched by construction. Loads LAST (functions.php enqueue at priority 21, * after tvb / tvb-woo / tvb-motion / tvb-radius) so equal-specificity overrides win * without !important. Selectors intentionally mirror the originals in tvb.css / * tvb-woo.css one-for-one — each override is a cascade tie the load order decides. * * Scope (owner spec 2026-07-09): more vertical air between sections/cards/blocks * (+20-30%), >=20px side padding, 16px minimum body-size text, 44x44px tap targets, * single-column grids, >=16px grid gaps, line-height 1.6+. NO color, brand, DOM, * functionality, or motion-system changes. The Research Access gate keeps its own * <=900px layout; only the shared .field/.input/.btn comfort rules reach it. * * Kill switch: remove the 'tvb-mobile' enqueue in functions.php to restore the * exact previous mobile rendering. */ @media (max-width:768px){ /* ---------- 1+2. spacing: sections, cards, blocks, side padding ---------- */ .container{padding:0 clamp(20px,4vw,40px)} /* was clamp(16px,…): floor 16px -> 20px */ .section{padding:120px 0} /* was 96px (var(--s9)): +25% */ .section--tight{padding:80px 0} /* was 64px (var(--s8)): +25% */ .section-head{margin-bottom:60px} /* was 48px (var(--s7)): +25% */ .page-head{padding-bottom:60px} /* was 48px: +25% */ .card{padding:40px 28px} /* was 32px (var(--s6)): +25% vertical, safe sides */ .field{margin-bottom:20px} /* was 16px (var(--s4)): +25% */ .gate-pane .field{margin-bottom:20px} /* mirror: tvb.css .gate-pane .field (0,2,0) beats the bare .field rule */ .footer-grid{padding:80px 0 60px;gap:60px 40px} /* was 64px 0 48px / gap 48px: rows +25%, columns still >=16px */ .single-product main.site-main{padding-left:clamp(20px,4vw,40px);padding-right:clamp(20px,4vw,40px)} /* PDP shell isn't .container — floor was 16px (tvb-woo.css) */ /* ---------- 5+6. layout: single column + comfortable gaps ---------- */ .grid{gap:30px} /* was 24px (var(--s5)): +25% between cards */ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} /* grid-2 was 2-col down to 600px; 3/4 were 2-col */ .woocommerce ul.products{gap:20px} /* was 16px (var(--s4)) */ /* ---------- 3+7. type: 16px floor, roomier headings, line-height ---------- */ .card p{font-size:1rem;line-height:1.7} /* was .92rem/1.65 */ .lead{font-size:1.06rem} /* was clamp floor 1rem; line-height 1.7 inherited */ .h-hero{font-size:clamp(2.55rem,4.6vw,4.4rem)} /* floor 2.3rem -> 2.55rem (+11%) */ .h-section{font-size:clamp(1.95rem,3.2vw,2.5rem)} /* floor 1.7rem -> 1.95rem (+15%) */ .page-head h1{font-size:clamp(2.25rem,4vw,3rem)} /* floor 2rem -> 2.25rem (+12.5%) */ .input,select.input,textarea.input{font-size:1rem;padding:14px 16px} /* was .93rem/13px 16px — 16px also stops iOS focus-zoom */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select{font-size:1rem;padding:14px 16px} /* checkout/account fields, was .93rem (tvb-woo.css) — same iOS fix */ .woocommerce-cart table.cart td.actions .coupon .input-text{font-size:1rem;min-height:44px} /* had NO font-size (UA ~13.3px) */ .woocommerce-cart .quantity .qty{font-size:1rem;min-height:44px} /* had no font-size; ~38px tall */ .tvb-cat-search input[type=search]{font-size:1rem} /* was .9rem */ .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:1.05rem;line-height:1.4} /* was .98rem/1.35 */ .woocommerce ul.products li.product .price{font-size:1rem} /* was .92rem */ .woocommerce ul.products li.product .tvb-card-desc{font-size:.9rem} /* was .82rem, ellipsis kept */ .f-col a{font-size:.95rem} /* was .88rem */ /* ---------- 4. tap targets: 44x44 minimum ---------- */ .icon-btn{width:44px;height:44px} /* was 38x38 (header search/account/cart/menu) */ .btn-link{min-height:44px;align-items:center} /* inline-flex already; was ~18px tall */ .mobile-link{padding:16px 2px} /* was 14px 2px: ~45px rows in the mobile menu */ .f-col a{display:flex;align-items:center;min-height:44px;padding:2px 0} /* was block, 6px 0 (~33px) */ .tvb-chip{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px} /* was 9px 16px (~34px) */ .tvb-sort{display:inline-flex;align-items:center;min-height:44px;padding:12px 16px} /* was 10px 14px (~33px); -1px underline offset kept */ .woocommerce ul.products li.product .button{min-height:44px} /* was ~39px */ .woocommerce ul.products li.product .tvb-card-coa{display:flex;align-items:center;justify-content:center;min-height:44px} /* was block, 11px padding (~35px) */ .woocommerce a.button,.woocommerce button.button,.woocommerce input.button{min-height:44px} /* cart/checkout/account buttons, were ~42px */ .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{min-width:44px;height:44px} /* was 40x40 fixed */ .woocommerce-cart table.cart a.remove{width:44px;height:44px;line-height:42px} /* was 26x26 — smallest control in the cart */ .woocommerce-ordering select{min-height:44px} /* was ~33px; 11px mono label kept (control chrome, not body text) */ } /* Topbar compliance line: readable bump ONLY where the fixed 34px bar still fits. * Below 360px the 76-char RUO string would wrap to 3 lines at 10px and spill over * the header — those widths keep the original 8.5px two-line fit from tvb.css. */ @media (max-width:768px) and (min-width:360px){ .tb-left{font-size:10px} /* was 8.5px at <=700px / 9.5px above */ }