/** * SuitsYourself — MTO Mobile Responsiveness * /public_html/css/mto-mobile.css * Include in every mto/step*.php inside * Covers tablet (960px) and mobile (768px) breakpoints */ /* ═══════════════════════════════════════════════ TABLET — 960px and below Affects: two-column layouts (steps 3, 5, 8) ═══════════════════════════════════════════════ */ @media (max-width: 960px) { /* Two-column layout pages — step 3, 5, 8 */ .layout { grid-template-columns: 1fr !important; } /* Hide sticky side panels on tablet — price panel, summary panel */ .summary-panel, .price-panel, .payment-panel { display: none !important; } /* Fabric / style panel full width */ .fabric-panel, .style-panel, .review-panel { padding: 36px 32px 100px !important; border-right: none !important; } /* Step 8 review panel */ .review-panel { padding: 36px 32px 40px !important; } /* Measurements grid — 4 cols to 2 */ .meas-mini-grid { grid-template-columns: repeat(2, 1fr) !important; } /* Liner grid — 3 cols to 2 */ .liner-grid { grid-template-columns: repeat(2, 1fr) !important; } /* Style grid — always single column on tablet */ .style-grid { grid-template-columns: 1fr !important; } } /* ═══════════════════════════════════════════════ MOBILE — 768px and below Affects: all steps ═══════════════════════════════════════════════ */ @media (max-width: 768px) { /* ── TOPBAR ── */ .topbar { padding: 0 20px !important; height: 60px !important; } .topbar-logo { font-size: 18px !important; } .topbar-back, .topbar-right { font-size: 9px !important; letter-spacing: 0.12em !important; } .btn-load { padding: 8px 14px !important; font-size: 9px !important; } /* ── PROGRESS BAR ── */ .progress-wrap { padding: 0 20px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } .progress-steps { min-width: 700px !important; height: 48px !important; } .step-dot { width: 22px !important; height: 22px !important; font-size: 8px !important; } .step-label { font-size: 7px !important; letter-spacing: 0.1em !important; } /* ── MAIN CONTENT PADDING ── */ .main, .fabric-panel, .style-panel, .review-panel { padding-left: 20px !important; padding-right: 20px !important; } .main { padding-top: 36px !important; padding-bottom: 100px !important; } /* ── PAGE TITLES ── */ .page-eyebrow { font-size: 9px !important; letter-spacing: 0.25em !important; } .page-title { font-size: 32px !important; margin-bottom: 12px !important; } .page-sub { font-size: 12px !important; margin-bottom: 32px !important; } /* ── FOOTER BAR ── */ .footer-bar { padding: 0 20px !important; height: auto !important; min-height: 72px !important; padding-top: 12px !important; padding-bottom: 12px !important; flex-wrap: wrap !important; gap: 10px !important; } .footer-status, .footer-info { font-size: 11px !important; width: 100% !important; } .btn-continue { width: 100% !important; justify-content: center !important; padding: 16px 24px !important; font-size: 9px !important; } /* ── STEP 1 — GARMENT GRID ── */ .garment-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; } .garment-card { padding: 20px 16px !important; } .garment-name { font-size: 18px !important; } .garment-desc { font-size: 10px !important; } .garment-badge { font-size: 7px !important; padding: 2px 6px !important; } .fit-grid { grid-template-columns: 1fr !important; gap: 10px !important; } .fit-card { padding: 20px !important; } .fit-name { font-size: 20px !important; } /* ── STEP 2 — BODY PROFILE ── */ .profile-section { padding: 20px !important; margin-bottom: 12px !important; } .profile-section-title { font-size: 9px !important; letter-spacing: 0.2em !important; } .option-group { gap: 8px !important; } .option-btn { padding: 10px 18px !important; font-size: 11px !important; } /* ── STEP 3 — FABRIC & LINER ── */ .fabric-panel { padding: 28px 20px 100px !important; } .tier-header { flex-direction: column !important; gap: 4px !important; align-items: flex-start !important; } .fabric-row { grid-template-columns: 40px 1fr auto !important; gap: 12px !important; padding: 12px 16px !important; } .fabric-swatch { width: 40px !important; height: 40px !important; } .fabric-name { font-size: 15px !important; } .fabric-meta, .fabric-desc-text { font-size: 9px !important; } .fabric-upcharge { font-size: 10px !important; white-space: nowrap !important; } .liner-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } .liner-card { padding: 14px 12px !important; } .liner-name { font-size: 11px !important; } .liner-desc { font-size: 9px !important; } /* ── STEP 4 — MEASUREMENTS ── */ .ref-size-bar { padding: 16px 20px !important; flex-wrap: wrap !important; gap: 10px !important; } .ref-size-label { font-size: 9px !important; } .ref-size-select { max-width: 100% !important; width: 100% !important; font-size: 12px !important; } .ref-size-note { font-size: 10px !important; width: 100% !important; } .meas-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } .meas-table { min-width: 480px !important; } /* Hide reference column on mobile — customer only needs to adjust */ .meas-table thead th:nth-child(3), .meas-row td:nth-child(3) { display: none !important; } .meas-table thead th:nth-child(2) { width: auto !important; } .meas-name { font-size: 12px !important; } .ctrl-btn { width: 32px !important; height: 36px !important; font-size: 16px !important; } .ctrl-input { width: 64px !important; height: 36px !important; font-size: 12px !important; } /* ── STEP 5 — STYLE DETAILS ── */ .style-panel { padding: 28px 20px 100px !important; } .style-grid { grid-template-columns: 1fr !important; gap: 12px !important; } .field-block { padding: 18px 16px !important; } .field-label { font-size: 8px !important; letter-spacing: 0.16em !important; } .style-select { font-size: 12px !important; padding: 11px 14px !important; } .checkbox-label { font-size: 11px !important; } .notes-textarea { font-size: 12px !important; min-height: 80px !important; } /* ── STEP 6 — PERSONAL DETAILS ── */ .form-section { padding: 20px !important; margin-bottom: 12px !important; } .form-section-title { font-size: 8px !important; letter-spacing: 0.2em !important; margin-bottom: 20px !important; } .form-row.cols-3, .form-row.cols-2 { grid-template-columns: 1fr !important; } .form-input { font-size: 12px !important; padding: 12px 14px !important; } .input-unit { padding: 12px 10px !important; font-size: 9px !important; } .field-label { font-size: 8px !important; } /* ── STEP 7 — REFERENCE IMAGES ── */ .upload-grid { grid-template-columns: 1fr !important; gap: 12px !important; } .upload-area { padding: 24px 16px !important; margin: 12px !important; } .upload-icon { font-size: 22px !important; } .upload-cta { font-size: 11px !important; } .upload-note { font-size: 9px !important; } .validation-note { font-size: 10px !important; padding: 12px 16px !important; } /* ── STEP 8 — REVIEW & PAY ── */ .review-panel { padding: 28px 20px 40px !important; } .review-section-header { padding: 12px 16px !important; } .review-section-title { font-size: 8px !important; letter-spacing: 0.18em !important; } .review-row { padding: 8px 16px !important; flex-direction: column !important; gap: 2px !important; align-items: flex-start !important; } .review-label { font-size: 9px !important; } .review-value { font-size: 12px !important; text-align: left !important; } .meas-mini-grid { grid-template-columns: repeat(2, 1fr) !important; } .meas-mini-value { font-size: 14px !important; } .terms-block { padding: 16px !important; } .terms-text { font-size: 10px !important; } /* Inline price panel — shown below review on mobile since sticky panel is hidden */ .payment-panel { display: flex !important; position: static !important; height: auto !important; border-top: 2px solid var(--cream-dark) !important; padding: 28px 20px !important; } .total-block-amount { font-size: 36px !important; } .btn-pay { font-size: 10px !important; padding: 16px !important; } /* ── STEP 9 — CONFIRMATION ── */ .confirm-hero { padding: 40px 20px !important; } .confirm-inner { grid-template-columns: 1fr !important; gap: 32px !important; } .confirm-title { font-size: 36px !important; } .confirm-ref-value { font-size: 22px !important; } .confirm-right { padding: 24px 20px !important; } .summary-total-value { font-size: 28px !important; } .timeline-item { padding-bottom: 16px !important; } .timeline-label { font-size: 11px !important; } .timeline-desc { font-size: 10px !important; } /* ── FOOTER (page footer) ── */ footer { padding: 20px !important; flex-direction: column !important; gap: 8px !important; text-align: center !important; } } /* ═══════════════════════════════════════════════ SMALL MOBILE — 480px and below Extra adjustments for very small screens ═══════════════════════════════════════════════ */ @media (max-width: 480px) { .garment-grid { grid-template-columns: 1fr !important; } .garment-card { padding: 18px 14px !important; } .liner-grid { grid-template-columns: 1fr !important; } .page-title { font-size: 28px !important; } .btn-continue { font-size: 8px !important; letter-spacing: 0.16em !important; } .ref-size-bar { padding: 14px 16px !important; } .upload-area { margin: 8px !important; padding: 20px 12px !important; } .confirm-title { font-size: 30px !important; } .topbar-logo { font-size: 16px !important; } }