/* Mobile pass 11/11/2026 for the seller pages (/sell, /pricing, /wholesale)
   and /business-signup. Linked after the page's own stylesheets; phone
   widths only, no desktop change. Targets: no horizontal scroll at 360px,
   tap targets ~44px, inputs at 16px (no iOS focus zoom), fine print >= 13px. */

/* ---------- cookie banner (plugins/cookieconsent, inline styles) ---------- */
@media (max-width: 640px) {
    #cookieConsent { padding: 10px 14px !important; gap: 8px !important; font-size: 14px; line-height: 1.45; }
    #cookieConsent a { display: inline-block; padding: 4px 0; }
    #acceptCookies, #refuseCookies { min-height: 44px; min-width: 96px; font-size: 15px; }
}

/* ---------- seller nav (inc/seller-nav.html, sell.css .sl-nav) ---------- */
@media (max-width: 560px) {
    /* de "Anmelden" + "Shop eröffnen" pushed the CTA 7px past a 360px screen. */
    body.sl .sl-nav .sl-wrap { gap: 8px; padding-top: 8px; padding-bottom: 8px; }
    body.sl .sl-nav-links { gap: 6px; }
    body.sl .sl-nav-logo { flex-shrink: 0; }
    body.sl .sl-nav-logo img { height: 24px; }
    body.sl .sl-nav-links li.sl-nav-login a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; white-space: nowrap; }
    body.sl .sl-nav-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; box-sizing: border-box; }
}
@media (max-width: 380px) {
    body.sl .sl-nav-logo img { height: 22px; }
    body.sl .sl-nav-cta { padding: 0 11px; }
}

/* ---------- /sell ---------- */
@media (max-width: 640px) {
    /* Feed slider dots: same 6px dot, 26px hit area. */
    body.sl .sl-dots { gap: 0; }
    body.sl .sl-dots button { box-sizing: content-box; border: 10px solid transparent; background-clip: padding-box; }
    /* Revenue calculator slider: taller touch track. */
    body.sl .sl-calc input[type="range"] { height: 44px; margin-top: 8px; }
    body.sl .sl-calc-note, body.sl .sl-source { font-size: 13px; }
    /* Tap to Pay card: the 280px min-width columns ran past the card padding. */
    body.sl .sl-dark-copy, body.sl .sl-dark-list { min-width: 0; flex-basis: 100%; }
    body.sl .sl-dark-fine { font-size: 13px; }
    /* Plan cards: same 260/280px min-width columns overflowed the 20px card padding at 360. */
    body.sl .sl-plan-head, body.sl .sl-plan-feats { min-width: 0; flex-basis: 100%; }
    /* Calculator columns and panel cards: 260px minimums ran 4-5px into the padding at 360. */
    body.sl .sl-calc-left, body.sl .sl-calc-right { min-width: min(260px, 100%); }
    body.sl .sl-cards { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
    /* "What you can sell": two columns instead of six full-width rows. */
    body.sl .sl-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    body.sl .sl-kind { padding: 16px 8px; gap: 10px; }
}

/* ---------- /wholesale ---------- */
@media (max-width: 860px) {
    body.ws .ws-form input[type=text], body.ws .ws-form input[type=email], body.ws .ws-form input[type=tel],
    body.ws .ws-form input[type=url], body.ws .ws-form select, body.ws .ws-form textarea,
    body.ws .ws-sim-sel { font-size: 16px; min-height: 44px; }
    body.ws .ws-form input[type=file] { font-size: 16px; min-height: 44px; }
    body.ws .ws-form input[type=checkbox] { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--sl-red); }
    body.ws .ws-form small { font-size: 13px; }
    body.ws .ws-hub-lbl { font-size: 12px; }
}

/* ---------- seller footer (inc/seller-footer.html) ---------- */
@media (max-width: 560px) {
    body.sl .sl-ft li { margin: 0; }
    body.sl .sl-ft li a { display: inline-block; padding: 9px 0; }
    body.sl .sl-ft .sl-ft-note { font-size: 13px; margin-top: 6px; }
    body.sl .sl-ft .sl-ft-shop { min-height: 44px; box-sizing: border-box; }
    body.sl .sl-ft .sl-ft-bottom { font-size: 13px; }
    body.sl .sl-ft .sl-ft-legal { gap: 0 14px; }
    body.sl .sl-ft .sl-ft-legal a { display: inline-block; padding: 10px 0; }
}

/* ---------- /business-signup (business-signup.css) ---------- */
@media (max-width: 768px) {
    .checkout-header .header-meta a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }
    .checkout-header .header-meta { font-size: 14px; }

    /* 15px inputs made iOS zoom on focus. */
    .checkout-wrapper .form-control,
    .checkout-wrapper .form-select,
    .checkout-wrapper .domain-slug-input,
    .checkout-wrapper .domain-subdomain-preview input,
    .checkout-wrapper .domain-custom-input-wrap input { font-size: 16px; }
    /* flex:1 input kept its intrinsic width at 16px and widened the card past 360px. */
    .checkout-wrapper .domain-subdomain-preview input { min-width: 0; width: 100%; }
    .checkout-wrapper .domain-prefix { flex-shrink: 0; }
    .checkout-wrapper .form-label { font-size: 14px; }

    .checkout-wrapper .step-subtitle,
    .checkout-wrapper .payment-step-subtitle { font-size: 13.5px; }
    .checkout-wrapper .plan-card-sub { font-size: 14px; line-height: 1.45; }
    .checkout-wrapper .plan-features { font-size: 14px; line-height: 1.45; }
    .checkout-wrapper .plan-features li { margin-bottom: 6px; }
    .checkout-wrapper .plan-features li i { font-size: 12px; top: 4px; }
    .checkout-wrapper .plan-badge { font-size: 12px; }
    .checkout-wrapper .domain-prefix,
    .checkout-wrapper .domain-suffix,
    .checkout-wrapper .domain-suffix-select { font-size: 14px; }
    .checkout-wrapper .domain-hint-text { font-size: 13.5px; line-height: 1.45; }
    .checkout-wrapper .optional-tag { font-size: 13px; }
    .checkout-wrapper .domain-toggle-btn { font-size: 13.5px; min-height: 44px; }
    .checkout-wrapper .order-summary-cadence,
    .checkout-wrapper .checkout-trust-badges { font-size: 13px; }

    .checkout-wrapper .form-check-input,
    .checkout-wrapper .signup-adult__check { width: 22px; height: 22px; flex-shrink: 0; margin-top: 0; }
    .checkout-wrapper .form-check-label { font-size: 14px; line-height: 1.5; }
    .checkout-wrapper .signup-adult__row .signup-adult__check { width: 22px; height: 22px; }
    .checkout-wrapper .order-summary-cadence .cadence-cancel,
    .checkout-wrapper .totals-row.next-payment-row > span:first-child,
    .checkout-wrapper .totals-row.next-payment-row #order-summary-next-payment { font-size: 13px; }

    /* "You already have a Shoppi account" box (js/signup-signedin.js, inline styles). */
    #sg-signedin { margin: 0 0 14px !important; }
    #sg-signedin a { padding: 12px 16px !important; margin: 0 0 4px !important; }
    #sg-signedin button { min-height: 44px; padding: 10px 0 !important; }
}

/* 11/11/2026 best practice: on phones form steps first, then summary + payment.
   Overrides business-signup.css order:-1; signup-mobile.js adds a sticky price bar. */
@media (max-width: 991px) {
    .checkout-grid .checkout-sidebar { order: 0 !important; margin-top: 24px; margin-bottom: 24px; }
    #sg-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; align-items: center; gap: 12px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #D7DEE8;
        box-shadow: 0 -6px 20px rgba(11,27,51,.08); transition: transform .2s ease; }
    #sg-mbar.is-hidden { transform: translateY(110%); }
    #sg-mbar .sg-mbar__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
    #sg-mbar .sg-mbar__plan { font-size: 13px; color: #46536B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #sg-mbar .sg-mbar__price { font-size: 17px; color: #0B1B33; }
    #sg-mbar .sg-mbar__btn { flex: 0 0 auto; min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: #E8113C; color: #fff; font: inherit; font-weight: 600; font-size: 15px; }
    body.has-sg-mbar { padding-bottom: 76px; }
}