.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:13px;letter-spacing:.075em;text-transform:uppercase;padding:15px 26px;background:var(--acai);color:var(--creme);border:1px solid var(--acai);transition:background var(--t-hover) var(--ease-hover),color var(--t-hover) var(--ease-hover)}
.btn:hover{background:transparent;color:var(--acai)}
.btn:active{background:var(--ink);border-color:var(--ink);color:var(--creme)}
.btn[aria-disabled="true"]{background:var(--ink-10);border-color:var(--ink-40);color:var(--ink-40);pointer-events:none}
.btn svg{display:block;flex-shrink:0}
.btn-ghost{background:transparent;color:var(--acai)}
.btn-ghost:hover{background:var(--acai);color:var(--creme)}
.btn-light{background:var(--creme);color:var(--acai);border-color:var(--creme)}
.btn-light:hover{background:transparent;color:var(--creme)}
.btn-stack{flex-direction:column;gap:3px;line-height:1.15;padding-block:13px}
.btn-stack b{font-weight:700;font-size:13px;letter-spacing:.075em}
.btn-stack small{font-weight:600;font-size:10px;letter-spacing:.08em;opacity:.72}

.price{--price-d:clamp(56px,4.6vw,74px);position:absolute;right:clamp(14px,1.5vw,22px);top:clamp(14px,1.5vw,22px);width:var(--price-d);height:var(--price-d);border:calc(var(--price-d) * .085) solid var(--paper);border-radius:50%;background:rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;color:var(--paper);font-weight:700;font-size:calc(var(--price-d) * .39);letter-spacing:-.01em;line-height:1}
.price span{display:block;rotate:-18deg}
.price sup{font-size:.584em;vertical-align:.44em;letter-spacing:0;margin-left:.04em;transform:translateY(-.55em)}

.cover{width:100%;height:100%;object-fit:cover}

.dot{width:clamp(30px,3vw,42px);height:clamp(30px,3vw,42px);border-radius:50%;margin:0 auto clamp(14px,1.6vw,22px)}
.cat-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.cat-line{flex:1;height:1px;background:var(--line)}
.cat-note{margin-top:var(--s4);font-size:14.5px;color:var(--ink-80)}

.fill-violet{background:var(--mix-violet)}
.fill-creme{background:var(--creme)}
.fill-yellow{background:var(--mix-yellow)}
.fill-granola{background:var(--granola)}
.fill-teal{background:var(--mix-teal)}
.fill-matcha{background:var(--matcha)}
.fill-orange{background:var(--mix-orange)}
.fill-pink{background:var(--mix-pink)}
.fill-white{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}

.stamps{display:flex;flex-direction:column;gap:clamp(7px,.8vw,11px)}
.stamp-row{display:flex;gap:clamp(7px,.8vw,11px)}
.stamp{width:clamp(36px,3.7vw,54px);height:clamp(36px,3.7vw,54px);border-radius:50%;border:2px solid var(--acai);display:grid;place-items:center;font-weight:700;font-size:14px;color:var(--acai)}
.stamp.done{background:var(--acai);color:var(--creme)}
.stamp.gift{border-color:var(--fruits);color:var(--fruits);border-style:solid;position:relative}
.stamp.gift::after{content:'';position:absolute;inset:-7px;border:1px solid var(--fruits);border-radius:50%}
.stamp-break{grid-column-start:1}
.on-dark .stamp{border-color:var(--creme);color:var(--creme)}
.on-dark .stamp.done{background:var(--creme);color:var(--acai)}
.on-dark .stamp.gift,.on-dark .stamp.gift::after{border-color:var(--mix-yellow)}
.on-dark .stamp.gift{color:var(--mix-yellow)}
.stamp-legend{display:flex;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s5);font-size:13px;color:var(--ink-80)}
.stamp-legend span{display:flex;align-items:center;gap:8px}
.legend-key{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid var(--acai);flex-shrink:0}
.legend-key.f{background:var(--acai)}
.legend-key.g{border-color:var(--fruits)}

.item-soon{font-weight:700;text-transform:uppercase;font-size:10.5px;letter-spacing:.07em;color:var(--ink-80);border:1px solid var(--ink-40);padding:2px 7px;flex-shrink:0;align-self:center}
.st{font-weight:700;text-transform:uppercase;font-size:10px;letter-spacing:.07em;padding:3px 8px;
  border:1px solid currentColor;flex-shrink:0}
.st-open{color:var(--ink-80)}
.st-conf{color:var(--energy)}
.st-prep{color:var(--mix-orange-ink)}
.st-ready{color:var(--matcha)}
.st-done{color:var(--ink-40)}
.st-canc{color:var(--fruits)}

.field{margin-bottom:var(--s5)}
.field > label{display:block;font-weight:700;text-transform:uppercase;font-size:11.5px;letter-spacing:.08em;color:var(--acai);margin-bottom:7px}
.req{color:var(--fruits);font-size:13px;line-height:1;vertical-align:baseline}
.inp{width:100%;font:inherit;font-size:15.5px;color:var(--ink);background:var(--paper);border:1px solid var(--line);padding:13px 14px}
.inp::placeholder{color:var(--ink-40)}
.inp:hover{border-color:var(--line-strong)}
.inp:focus{outline:2px solid var(--acai);outline-offset:-1px;border-color:var(--acai)}
.inp.has-error{border-color:var(--fruits)}
.inp[disabled]{background:var(--ink-10);color:var(--ink-40);cursor:not-allowed}
.field-hint{font-size:13px;color:var(--ink-80);margin-top:6px}
.field-err{display:flex;align-items:flex-start;gap:7px;font-size:13px;font-weight:600;color:var(--fruits);margin-top:6px}
.field-err svg{flex-shrink:0;margin-top:2px}
.inp-group{display:flex}
.inp-group .inp{border-right:0}
.inp-toggle{border:1px solid var(--line);border-left:0;padding-inline:14px;color:var(--acai);display:grid;place-items:center}
.inp-toggle:hover{background:var(--ink-10)}
.inp-group .inp.has-error + .inp-toggle{border-color:var(--fruits)}
.check{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;line-height:1.45;cursor:pointer}
.check input{width:19px;height:19px;flex-shrink:0;margin-top:1px;accent-color:var(--acai)}

.notice{display:flex;gap:12px;border:1px solid var(--line);border-left:4px solid var(--acai);padding:14px 16px;font-size:14.5px;line-height:1.5;margin-bottom:var(--s5)}
.notice.is-error{border-left-color:var(--fruits)}
.notice.is-ok{border-left-color:var(--matcha)}
.notice svg{flex-shrink:0;margin-top:2px}

.sk{background:var(--ink-10);position:relative;overflow:hidden}
.sk::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);transform:translateX(-100%);animation:sheen 1500ms linear infinite}
@keyframes sheen{to{transform:translateX(100%)}}

.dialog{width:min(520px,calc(100% - 2 * var(--pad)));max-width:none;max-height:calc(100% - 2 * var(--s5));
  margin:auto;padding:0;border:0;background:transparent;color:var(--ink);overflow:auto}
.dialog::backdrop{background:rgba(0,0,0,.5)}

.state{border:1px solid var(--line);padding:var(--s6);text-align:center}
.state h4{font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.06em;color:var(--acai);margin-bottom:8px}
.state p{font-size:14.5px;color:var(--ink-80);max-width:44ch;margin:0 auto var(--s5)}

.fact{padding-block:var(--s5);border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(120px,26%) 1fr;gap:var(--s4)}
.fact > :first-child{font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.075em;color:var(--acai)}
.fact > :last-child{font-size:16px;line-height:1.55}
@media (max-width:860px){
  .fact{grid-template-columns:1fr;gap:6px}
}

.text-link{font-weight:600;color:var(--acai);border-bottom:1px solid var(--line);transition:border-color var(--t-hover) var(--ease-hover)}
.text-link:hover{border-color:var(--acai)}

.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s6);flex-wrap:wrap;margin-bottom:clamp(28px,3.6vw,56px)}
.page-head p{max-width:56ch;color:var(--ink-80)}

.nf{min-height:calc(100svh - var(--nav-h));display:flex;flex-direction:column;justify-content:center;padding-block:var(--s8)}
.nf > .wrap{width:100%}
.nf-label{color:var(--acai)}
.nf-claim{font-size:clamp(76px,14vw,232px);line-height:.88;letter-spacing:-.01em;color:var(--acai);margin-top:var(--s5)}
.nf-claim span{display:block}
.nf-text{margin-top:var(--s6);max-width:34ch}
.nf-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
@media (orientation:landscape) and (max-height:500px){
  .nf{padding-block:var(--s5)}
  .nf > .wrap{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto auto auto 1fr;column-gap:var(--s7)}
  .nf-claim{grid-column:1;grid-row:1/-1;align-self:center;margin-top:0;font-size:min(14vw,30svh)}
  .nf-label{grid-column:2;grid-row:2}
  .nf-text{grid-column:2;grid-row:3;margin-top:var(--s3);max-width:none}
  .nf-actions{grid-column:2;grid-row:4;margin-top:var(--s4)}
}