/* Palm & Salt — shared mobile / small-screen fixes */

/* ── Overflow containment ── */
.prod-scroll,
.conc-glow,
.diff-visual,
.vid-card,
.page-hero,
.hero-bg {
  max-width: 100%;
}

.conc-glow {
  width: min(420px, 92vw) !important;
}

/* ── Navigation ── */
@media (max-width: 768px) {
  .nav,
  .nav.scrolled {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .nav-end {
    gap: 10px;
    min-width: 0;
    flex-shrink: 1;
  }

  .nav-links {
    gap: 0;
  }

  /* Concierge lives in mobile menu + floating FAB */
  .nav-links .nav-cta {
    display: none !important;
  }

  .nav-logo {
    font-size: 13px !important;
    letter-spacing: 0.14em !important;
    min-width: 0;
    gap: 8px;
  }

  .nav-actions {
    gap: 6px;
    flex-shrink: 0;
  }

  .nav-cart {
    width: 36px;
    height: 36px;
  }

  .nav-user {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .nav-burger {
    width: 32px;
    height: 32px;
  }

  .mm {
    width: min(300px, 100vw);
    padding: 24px 20px;
  }

  /* Sticky panels become in-flow on narrow screens */
  .checkout-aside {
    position: static;
    top: auto;
  }

  .detail-media {
    position: static;
    top: auto;
  }

  .footer-top {
    flex-direction: column;
    gap: 28px;
  }

  .footer-subscribe-form {
    flex-direction: column;
  }

  .footer-subscribe-btn {
    width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .tab-btn {
    min-width: 0;
    padding: 12px 12px;
    font-size: 14px !important;
  }

  .filter-tags {
    gap: 6px;
  }

  .filter-count {
    width: 100%;
    margin-left: 0;
    margin-top: 4px;
  }

  .page-promo {
    border-radius: 16px;
  }

  .diff-grid {
    gap: 48px;
  }

  /* Forms — single column before content can overflow */
  .form-grid,
  .card-row {
    grid-template-columns: 1fr !important;
  }

  .card-row .field:first-child {
    grid-column: 1 !important;
  }

  .checkout-panel,
  .confirm-card,
  .order-info-summary,
  .account-card,
  .help-card,
  .feedback-card {
    padding: 20px 16px;
  }

  .summary-price,
  .cart-item-price,
  .confirm-item > :last-child {
    white-space: normal;
    word-break: break-word;
  }

  .summary-item {
    grid-template-columns: 30px minmax(0, 1fr) auto;
  }

  .order-info-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Small phones — layout only (typography in block below) ── */
@media (max-width: 560px) {
  .nav-logo {
    max-width: calc(100vw - 118px);
  }

  /* Hero layout */
  .hero {
    min-height: 100svh;
    min-height: 100dvh;
  }

  .hero-content {
    padding: 0 20px;
  }

  .hero-cta-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    padding: 6px;
    border-radius: 14px;
  }

  .hero-cta-link {
    display: block;
    width: 100%;
    padding: 14px 16px !important;
    text-align: center;
    white-space: normal;
  }

  .hero-cta-divider {
    display: none;
  }

  .hero-scroll {
    bottom: max(76px, calc(64px + env(safe-area-inset-bottom, 0px)));
  }

  .hero-line {
    display: none;
  }

  /* Cards & catalog */
  .catalog-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .catalog-card {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    grid-template-areas:
      "media body"
      "foot foot";
    align-items: stretch;
  }

  .catalog-card-link {
    display: contents;
    color: inherit;
  }

  .catalog-img {
    grid-area: media;
    height: 108px;
    min-height: 108px;
  }

  .catalog-body {
    grid-area: body;
    padding: 12px 14px 10px;
    min-width: 0;
    align-self: center;
  }

  .catalog-name {
    font-size: 18px !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important;
  }

  .catalog-detail {
    margin-bottom: 2px !important;
  }

  .catalog-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0 !important;
    line-height: 1.45 !important;
  }

  .catalog-body:has(.catalog-detail) .catalog-desc {
    display: none;
  }

  .stock-pill {
    margin-bottom: 6px !important;
  }

  .catalog-foot {
    grid-area: foot;
    padding: 0 14px 12px !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
  }

  .catalog-foot .card-meta-actions {
    margin-left: auto;
  }

  .treat-meta,
  .prod-row {
    flex-wrap: wrap;
    gap: 10px;
  }

  .card-meta-actions {
    flex-wrap: nowrap;
  }

  .treat-btn,
  .catalog-card .catalog-btn {
    padding: 8px 14px;
  }

  /* Checkout / confirmation layout */
  .fulfillment-toggle {
    grid-template-columns: 1fr;
  }

  .summary-item {
    grid-template-columns: 30px 1fr auto;
    gap: 8px;
  }

  .summary-thumb {
    width: 30px;
    height: 30px;
  }

  .confirm-subscribe {
    padding: 20px;
  }

  .confirm-subscribe-btn {
    width: 100%;
  }

  /* Concierge section */
  .conc-btn {
    width: 100%;
    max-width: 280px;
    padding: 14px 24px;
  }

  .conc-actions {
    flex-direction: column;
    align-items: center;
  }

  /* Detail pages */
  .detail-actions {
    flex-direction: column;
  }

  .detail-btn-primary,
  .detail-btn-secondary {
    width: 100%;
    text-align: center;
  }

  .detail-meta-row {
    gap: 10px;
  }

  /* Floating UI + safe areas */
  .chat-fab {
    bottom: max(18px, env(safe-area-inset-bottom, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
  }

  .cart-foot,
  .chat-foot {
    padding-bottom: max(22px, calc(16px + env(safe-area-inset-bottom, 0px)));
  }

  .checkout-steps {
    flex-wrap: wrap;
    row-gap: 4px;
  }
}

/* ── Very narrow (iPhone SE, etc.) — layout only ── */
@media (max-width: 380px) {
  .nav-logo {
    max-width: calc(100vw - 108px);
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE TYPOGRAPHY — readable minimums (768px and below)
   Body 16px · Secondary 15px · Labels 13px · Inputs 16px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── Body & paragraph copy ── */
  .hero-sub,
  .section-sub,
  .intro-text,
  .page-sub,
  .page-promo-sub,
  .checkout-sub,
  .confirm-sub,
  .account-sub,
  .detail-sub,
  .conc-sub,
  .diff-desc,
  .hiw-desc,
  .treat-desc,
  .catalog-desc,
  .prod-detail,
  .catalog-detail,
  .faq-answer,
  .faq-intro p,
  .help-aside-block p,
  .help-sub,
  .feedback-sub,
  .detail-section p,
  .detail-section li,
  .detail-perk,
  .detail-ingredients,
  .timeline-desc,
  .voucher-note p,
  .voucher-notice-inner-title,
  .voucher-notice-text,
  .voucher-modal-inner-title,
  .voucher-modal-text,
  .subscription-info p,
  .next-step-body p,
  .confirm-note,
  .pickup-spa,
  .confirm-delivery-meta,
  .confirm-mini-card-body,
  .ship-address,
  .cart-empty,
  .cart-note,
  .chat-bubble,
  .delivery-note,
  .delivery-spa-line,
  .delivery-line,
  .ticket-msg,
  .feedback-card p,
  .account-empty {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }

  /* ── Secondary / meta text ── */
  .summary-row,
  .checkout-steps,
  .breadcrumb,
  .summary-detail,
  .confirm-detail,
  .confirm-order,
  .history-detail,
  .history-meta,
  .history-order,
  .cart-item-detail,
  .cart-item-qty,
  .confirm-delivery-status,
  .pickup-item-status,
  .fulfillment-option small,
  .delivery-line-meta,
  .field label,
  .field-hint,
  .profile-field span,
  .order-info-field span,
  .order-info-field span.muted,
  .upcoming-detail,
  .upcoming-time,
  .secure-note,
  .summary-footnote,
  .order-info-total span:first-child,
  .account-link,
  .help-aside-link,
  .help-log-count,
  .ticket-meta,
  .ticket-msg-head,
  .star-label,
  .detail-back,
  .detail-size,
  .footer-tagline,
  .footer-col a,
  .footer-bottom,
  .footer-inner,
  .footer-copy,
  .footer-wai,
  .footer-wai a,
  .chat-status,
  .chat-input,
  .chat-prompt,
  .mm a.mm-link,
  .nav-user-menu a,
  .nav-user-menu button {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  /* ── Section & UI labels (uppercase) ── */
  .account-card h2,
  .panel-title,
  .summary-title,
  .detail-section h2,
  .order-info-summary h2,
  .confirm-card h2,
  .confirm-col h2,
  .cart-title,
  .help-card h2,
  .cart-group-label,
  .summary-group-label,
  .filter-tags-label,
  .detail-eyebrow,
  .footer-col h4,
  .footer-subscribe-title,
  .confirm-delivery-label,
  .chat-prompts-label {
    font-size: 13px !important;
    letter-spacing: 0.1em !important;
  }

  .profile-field label,
  .order-info-field label,
  .ticket-id {
    font-size: 13px !important;
  }

  /* ── Eyebrows & small labels ── */
  .section-eyebrow,
  .hero-eyebrow,
  .conc-eyebrow,
  .page-eyebrow,
  .page-promo-eyebrow,
  .diff-num,
  .diff-tag,
  .diff-visual-label,
  .filter-tag,
  .filter-count,
  .detail-tag,
  .treat-duration,
  .catalog-duration,
  .prod-stock,
  .vid-label,
  .next-step-num {
    font-size: 13px !important;
  }

  /* ── Badges, pills, stock ── */
  .status-pill,
  .stock-pill,
  .catalog-badge,
  .treat-img-tag,
  .detail-media-badge,
  .ticket-status,
  .upcoming-month {
    font-size: 12px !important;
  }

  /* ── Card & list titles ── */
  .treat-name,
  .catalog-name,
  .prod-name,
  .confirm-name,
  .summary-name,
  .pickup-item-name,
  .cart-item-name,
  .history-name,
  .upcoming-name,
  .ticket-head strong,
  .faq-item summary,
  .confirm-subscribe-copy h2,
  .subscription-info h3,
  .next-step-body h3,
  .timeline-title {
    font-size: clamp(20px, 5vw, 24px) !important;
    line-height: 1.25 !important;
  }

  /* ── Display headings — keep impact, improve line-height ── */
  .hero-title {
    font-size: clamp(34px, 9vw, 44px) !important;
    line-height: 1.08 !important;
    margin-bottom: 20px;
  }

  .section-title,
  .page-title,
  .checkout-title,
  .confirm-title,
  .account-greeting,
  .detail-title,
  .conc-title,
  .page-promo-title,
  .diff-title,
  .hiw-title,
  .help-title,
  .feedback-title {
    line-height: 1.12 !important;
  }

  /* ── Prices ── */
  .treat-price,
  .catalog-price,
  .prod-price,
  .summary-price,
  .cart-item-price,
  .detail-price {
    font-size: 22px !important;
  }

  .summary-row.total,
  .summary-row.total span:last-child,
  .order-info-total span:last-child,
  .cart-subtotal-amount {
    font-size: 20px !important;
  }

  .catalog-price del {
    font-size: 15px !important;
  }

  /* ── Form inputs — 16px prevents iOS auto-zoom ── */
  .field input,
  .field select,
  .field textarea,
  .filter-search,
  .footer-subscribe-input,
  .chat-input,
  .feedback-card textarea,
  .help-card input,
  .help-card select,
  .help-card textarea {
    font-size: 16px !important;
  }

  /* ── Buttons & CTAs ── */
  .nav-cta,
  .hero-btn,
  .hero-cta-link,
  .conc-btn,
  .treat-btn,
  .catalog-btn,
  .detail-btn-primary,
  .detail-btn-secondary,
  .page-promo-btn,
  .place-order,
  .checkout-empty-btn,
  .confirm-btn,
  .confirm-subscribe-btn,
  .cart-checkout,
  .mm-cta,
  .footer-subscribe-btn,
  .subscription-btn,
  .book-btn,
  .book-now-btn,
  .appt-btn,
  .tab-btn,
  .fulfillment-option span,
  .faq-cta-btn,
  .help-submit,
  .feedback-submit {
    font-size: 16px !important;
  }

  .place-order {
    padding: 16px 14px !important;
    line-height: 1.35 !important;
  }

  .treat-btn,
  .catalog-btn,
  .book-btn,
  .book-now-btn {
    padding: 12px 18px !important;
  }

  /* ── Shell: cart & chat ── */
  .chat-title {
    font-size: 20px !important;
  }

  .chat-brand,
  .chat-fab-brand {
    font-size: 13px !important;
  }

  .chat-fab-label {
    font-size: 15px !important;
  }

  .cart-subtotal-label {
    font-size: 14px !important;
  }

  .nav-cart-count {
    font-size: 11px !important;
  }

  .nav-link {
    font-size: 15px !important;
  }

  /* ── How-it-works numbers — decorative, keep large ── */
  .hiw-num {
    font-size: 48px !important;
  }
}