/* Support Cartily: /support/, the thank-you page, the account section and the
   "Owner supports Cartily" chip on a claimed shop. */
.support-page{max-width:880px;padding-block:32px 56px}
.support-hero{display:flex;gap:28px;align-items:center;margin-bottom:28px}
.support-hero .donor-badge-art{flex:0 0 auto;width:136px;height:136px}
.support-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.6vw,44px);line-height:1.08;letter-spacing:-.02em;margin:6px 0 12px}
.support-lead{font-size:17px;line-height:1.6;color:var(--muted);margin:0;max-width:56ch}
.support-status{display:flex;align-items:center;gap:10px;margin:16px 0 0;font-weight:600}
.donor-badge-icon{width:24px;height:24px;flex:0 0 auto}

.support-give{max-width:560px;margin-inline:auto;background:var(--white);border:1px solid var(--line);border-radius:20px;padding:24px;margin-bottom:12px}
.support-mode{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:16px;border-radius:12px;background:var(--paper);border:1px solid var(--line)}
.support-mode button{min-height:44px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:600 15px/1 var(--sans);cursor:pointer}
.support-mode button.is-on{background:var(--white);color:var(--ink);box-shadow:0 1px 3px rgba(52,42,36,.12)}
.support-mode button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.support-note{display:flex;gap:10px;align-items:flex-start;margin:4px 0 18px;padding:12px 14px;border-radius:12px;background:#eef6ee;color:#2f4f34;font-size:14px;line-height:1.5}
.support-note>span:first-child{color:var(--orange);font-size:16px;line-height:1.3}
.support-secure{margin:10px 0 0;text-align:center;font-size:12.5px;color:var(--muted)}
.support-quiet{max-width:560px;margin:0 auto 28px;text-align:center}
.support-amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.support-amount,.support-custom{min-height:52px;min-width:0;padding:8px 14px;border:1.5px solid #d9cbbd;border-radius:12px;background:var(--white);color:var(--ink);font:700 18px/1.1 var(--sans);display:inline-flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}
.support-amount small{font:500 11px/1.2 var(--sans);color:var(--muted);margin-top:2px}
.support-amount:hover{border-color:var(--orange)}
.support-amount.is-on,.support-custom.is-on,.support-custom:focus-within{border-color:var(--orange);background:var(--peach);box-shadow:0 0 0 1px var(--orange) inset}
.support-amount:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.support-custom{flex-direction:row;gap:2px;font-size:15px;cursor:text;min-width:0}
.support-custom>span:first-child{font-weight:600;color:var(--muted)}
.support-custom-field{display:inline-flex;align-items:center;gap:2px}
.support-custom input{width:100%;min-width:0;border:0;background:transparent;font:700 18px/1 var(--sans);color:var(--ink);padding:0;-moz-appearance:textfield}
.support-custom input:focus{outline:none}
.support-custom input::-webkit-outer-spin-button,.support-custom input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.support-go{width:100%;min-height:52px;font-size:16px}

.support-never,.support-badge-meaning,.support-list{margin-bottom:24px}
.support-never h2,.support-badge-meaning h2,.support-list h2{font-family:var(--serif);font-weight:400;font-size:24px;margin:0 0 10px}
.support-never ul{margin:0;padding-left:18px;line-height:1.6}
.support-badge-meaning p{line-height:1.6;margin:0;max-width:68ch}
.support-list ul{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.support-list li{padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--white);font-size:14px}
.support-list li small{color:var(--green);font-weight:600;margin-left:4px}
.support-fine{border-top:1px solid var(--line);padding-top:16px;line-height:1.6}
.support-thanks .support-hero{margin-top:24px}

/* On a claimed shop's page, beside the owner's name. */
.donor-chip{display:inline-flex;align-items:center;justify-content:center;margin:8px 0 0;padding:0;width:40px;height:40px;border:0;border-radius:50%;background:none;cursor:pointer}
.donor-chip .donor-badge-icon{width:36px;height:36px}
.donor-chip:hover .donor-badge-icon{transform:scale(1.06)}
.donor-chip .donor-badge-icon{transition:transform .15s}
.donor-chip:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.donor-explain{text-align:center}
.donor-explain .donor-badge-art{width:112px;height:112px;margin:0 auto 10px;display:block}
.donor-explain p{line-height:1.6;text-align:left}

.support-settings .support-status{margin:0 0 8px}
.support-settings .check{display:flex;gap:10px;align-items:center;min-height:44px;padding:0 16px;font-size:14px}
.support-listing{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:6px 16px;border-top:1px solid var(--line);font-size:14px}
.support-listing select{min-height:40px;border-radius:10px;border:1px solid var(--line);background:var(--white);padding:0 10px}

@media(max-width:680px){
  .support-page{padding-block:20px 40px}
  .support-hero{flex-direction:column;align-items:flex-start;gap:14px}
  .support-hero .donor-badge-art{width:96px;height:96px}
    .support-give{padding:16px}
}
/* Phones stack the shop heading by order: name, then the line under it; the
   chip follows the name and its tags rather than sitting under the photo. */
/* The badge sits to the right of the shop's name, on one line with it. */
.shop-name-row{display:flex;align-items:center;gap:10px;min-width:0}
.shop-name-row h1{min-width:0}
.shop-name-row .donor-chip{margin:0;flex:0 0 auto}
@media(max-width:680px){.shop-page .shop-identity .shop-name-row{justify-content:center;width:100%}.shop-page .shop-identity .shop-name-row h1{width:auto}}
/* Phones: a small badge beside the heading, so the form starts high. */
@media(max-width:680px){
  .support-hero{flex-direction:row;align-items:center;gap:14px;margin-bottom:18px}
  .support-hero .donor-badge-art{width:64px;height:64px}
  .support-hero h1{font-size:28px;margin:0 0 6px}
  .support-lead{font-size:15px}
}
@media(max-width:480px){.support-amounts{grid-template-columns:repeat(3,1fr)}.support-custom{grid-column:1/-1}}