/* Only the dedicated calculator page is affected. Theme hooks still run normally. */
body.pcof-mobile-page { margin: 0; padding: 0; min-width: 0; background: #f3f6f8; }
.pcof-mobile-page .pcof-mobile-main { box-sizing: border-box; display: block; width: 100%; max-width: none; margin: 0; padding: 28px 24px 48px; }
.pcof-mobile-page .pcof { max-width: 1600px; margin: 0 auto; }
.pcof-mobile-page .pcof button { text-transform: none; letter-spacing: normal; }
.pcof-mobile-page .pcof input, .pcof-mobile-page .pcof select, .pcof-mobile-page .pcof textarea { box-sizing: border-box; }
.pcof-mobile-page .pcof .pcof-header-tools { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.pcof-mobile-page .pcof .pcof-toast { top: 12px; }
.pcof-mobile-page .pcof.pcof-access { max-width: 460px; margin: 8vh auto 0; padding: 36px; border: 1px solid #dce5e9; border-radius: 16px; background: white; box-shadow: 0 12px 42px #142b3608; }
.pcof-mobile-page .pcof-access > p { margin-top: 16px; color: #61737e; }
.pcof-mobile-page .pcof-access form { margin-top: 26px; }
.pcof-mobile-page .pcof-access label { display: block; margin-bottom: 8px; font-weight: 650; }
.pcof-mobile-page .pcof-access input { font-size: 16px; min-height: 48px; }
.pcof-mobile-page .pcof-access button { min-height: 48px; margin-top: 16px; }
.pcof-mobile-page .pcof-access .pcof-access-error { color: #a52b28; margin-top: 10px; }
.pcof-mobile-page .pcof-access .pcof-access-note { font-size: 12px; margin-top: 24px; }
/* Container-based layout also handles wide phones, narrow tablets and theme wrappers. */
.pcof-mobile-page .pcof-frontend { container-type: inline-size; }
@container (max-width: 1000px) {
    .pcof-calculator-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
    .pcof-mobile-page .pcof-mobile-main { padding: 18px 12px 32px; }
    .pcof-mobile-page .pcof .pcof-header { flex-wrap: wrap; gap: 14px; padding-bottom: 18px; }
    .pcof-mobile-page .pcof .pcof-header p { max-width: none; }
    .pcof-mobile-page .pcof .pcof-header-tools { width: 100%; justify-content: flex-start; }
    .pcof-mobile-page .pcof .pcof-btn { min-height: 44px; }
    .pcof-mobile-page .pcof .pcof-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 16px; }
    .pcof-mobile-page .pcof .pcof-row-main { padding-right: 32px; }
    .pcof-mobile-page .pcof .pcof-row-category { font-size: 16px !important; max-width: 100%; min-height: 40px; }
    .pcof-mobile-page .pcof .pcof-row .pcof-remove { top: 18px; right: 7px; min-width: 36px; min-height: 40px; }
    .pcof-mobile-page .pcof .pcof-mobile-label { font-size: 11px; }
    .pcof-mobile-page .pcof .pcof-base, .pcof-mobile-page .pcof .pcof-row-total { font-size: 15px; overflow-wrap: anywhere; }
    .pcof-mobile-page .pcof .pcof-row-total { font-weight: 750; }
    .pcof-mobile-page .pcof .pcof-quantity { text-align: left; }
    .pcof-mobile-page .pcof .pcof-search-option { min-height: 48px; }
    .pcof-mobile-page .pcof .pcof-search-option span { min-width: 0; overflow-wrap: anywhere; }
    .pcof-mobile-page .pcof .pcof-toggle { min-width: 36px; }
    .pcof-mobile-page .pcof .pcof-card-heading { flex-wrap: wrap; gap: 12px; }
    .pcof-mobile-page .pcof .pcof-row-footer { flex-wrap: wrap; }
    .pcof-mobile-page .pcof .pcof-suggestions { max-height: 240px; }
    .pcof-mobile-page .pcof.pcof-access { margin-top: 5vh; padding: 26px 22px; }
}

/* Account controls and catalogue editing on phones. */
.pcof-mobile-page .pcof-guest-note { margin: 0 0 22px; max-width: 780px; color: var(--pcof-muted); font-size: 12px; line-height: 1.7; }
.pcof-mobile-page .pcof-access-badge { padding: 7px 10px; border-radius: 20px; background: var(--pcof-mint); color: var(--pcof-teal-dark); font-size: 11px; font-weight: 650; }
.pcof-mobile-page .pcof-account { display: flex; flex-direction: column; min-width: 0; max-width: 220px; padding: 0 8px; overflow-wrap: anywhere; }
.pcof-mobile-page .pcof-account strong { font-size: 13px; }
.pcof-mobile-page .pcof-account small { font-size: 10px; color: var(--pcof-muted); }
.pcof-mobile-page .pcof a.pcof-btn:focus-visible { outline: 3px solid #60aaa3; outline-offset: 3px; }
@media (max-width: 680px) {
    .pcof-mobile-page .pcof .pcof-header-tools #pcof-refresh { order: 3; }
    .pcof-mobile-page .pcof .pcof-account { padding-left: 0; max-width: 170px; }
    .pcof-mobile-page .pcof .pcof-tabs { flex-wrap: wrap; }
    .pcof-mobile-page .pcof .pcof-tab { font-size: 13px; min-height: 48px; padding: 12px 10px; }
    .pcof-mobile-page .pcof .pcof-table { min-width: 0; width: 100%; table-layout: fixed; }
    .pcof-mobile-page .pcof .pcof-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .pcof-mobile-page .pcof .pcof-table tbody { display: block; }
    .pcof-mobile-page .pcof .pcof-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; padding: 16px; border-top: 1px solid var(--pcof-line); }
    .pcof-mobile-page .pcof .pcof-table td { display: block; padding: 0; border: 0; min-width: 0; }
    .pcof-mobile-page .pcof .pcof-table .pcof-component-name { grid-column: 1 / -1; font-size: 14px; overflow-wrap: anywhere; }
    .pcof-mobile-page .pcof .pcof-table td:nth-child(2) { grid-column: 1 / -1; padding-bottom: 8px; }
    .pcof-mobile-page .pcof .pcof-table .pcof-price-cell { display: flex; flex-direction: column; justify-content: center; text-align: left; font-size: 16px; white-space: normal; overflow-wrap: anywhere; }
    .pcof-mobile-page .pcof .pcof-table .pcof-price-cell::before { content: attr(data-label); color: var(--pcof-muted); font-size: 10px; font-weight: 400; }
    .pcof-mobile-page .pcof .pcof-table .pcof-table-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; max-width: 155px; }
    .pcof-mobile-page .pcof .pcof-table .pcof-link { min-height: 44px; padding: 8px 3px; font-size: 13px; }
    .pcof-mobile-page .pcof .pcof-table .pcof-table-empty { grid-column: 1 / -1; }
    .pcof-mobile-page .pcof .pcof-pagination { flex-wrap: wrap; }
    .pcof-mobile-page .pcof .pcof-pagination .pcof-btn { min-height: 44px; }
}

/* Keep account actions clear and touch-friendly even on narrow phones. */
.pcof-mobile-page .pcof .pcof-header-tools #pcof-login,
.pcof-mobile-page .pcof .pcof-header-tools #pcof-open-editor { white-space: normal; text-align: center; }
@media (max-width: 680px) {
    .pcof-mobile-page .pcof .pcof-header-tools .pcof-account { flex-basis: 100%; max-width: none; }
    .pcof-mobile-page .pcof .pcof-header-tools #pcof-open-editor { flex: 1 1 auto; }
    .pcof-mobile-page .pcof .pcof-header-tools #pcof-refresh { order: 3; }
}