/* ═════ components: one language for every surface ═════
   “printed paper” = 1.5px ink outline + a flat offset block (the kit's brown frame + honey fill) */

/* ── buttons ── */
.btn,body .add-btn,body .checkout-btn,body .submit-btn,body .rc-cta,body .hero-cta{
  --btn-bg:var(--sl-brown);--btn-ink:var(--sl-cream);--btn-ofs:var(--sl-sand);
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;cursor:pointer;text-decoration:none;
  font:700 15px/1.2 var(--font-ui);padding:.85em 1.5em;border-radius:999px;
  background:var(--btn-bg)!important;color:var(--btn-ink)!important;border:var(--stroke) solid var(--sl-brown)!important;
  box-shadow:4px 4px 0 var(--btn-ofs);transform:translate(0,0);
  transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),background var(--dur-1);
}
.btn:hover,body .add-btn:hover,body .checkout-btn:hover,body .submit-btn:hover,body .rc-cta:hover,body .hero-cta:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--btn-ofs);background:var(--btn-bg)!important}
.btn:active,body .add-btn:active,body .checkout-btn:active,body .submit-btn:active,body .rc-cta:active,body .hero-cta:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--btn-ofs)}
.btn[disabled],body .submit-btn:disabled{opacity:.6;cursor:progress;transform:none;box-shadow:2px 2px 0 var(--btn-ofs)}
.btn-sand{--btn-bg:var(--sl-sand);--btn-ink:var(--sl-brown);--btn-ofs:var(--sl-ochre)}
.btn-terracotta{--btn-bg:var(--sl-terracotta);--btn-ink:var(--sl-cream);--btn-ofs:var(--sl-brown)}
.btn-ghost{--btn-bg:transparent;--btn-ink:var(--sl-brown);--btn-ofs:var(--sl-sand)}
body .submit-btn,body .checkout-btn{width:100%;padding:1em 1.4em;font-size:16px}

/* ── paper surface ── */
.paper{background:var(--sl-cream);color:var(--sl-brown);border:var(--stroke) solid var(--sl-brown);border-radius:var(--r-lg);box-shadow:var(--offset) var(--offset) 0 var(--offset-color)}

/* ── chips (sizes, tabs, tags) ── */
body .size-btn,body .tab{
  display:inline-flex;align-items:center;gap:.4em;padding:.5em 1em;font:700 14px/1.2 var(--font-ui);cursor:pointer;
  border:var(--stroke) solid var(--sl-brown)!important;border-radius:999px;background:var(--sl-cream)!important;color:var(--sl-brown)!important;
  transition:transform var(--dur-1) var(--ease),background var(--dur-1),box-shadow var(--dur-1);box-shadow:2px 2px 0 var(--sl-sand)}
body .size-btn:hover,body .tab:hover{transform:translateY(-1px);box-shadow:3px 3px 0 var(--sl-sand);color:var(--sl-brown)!important;border-color:var(--sl-brown)!important}
body .size-btn.selected,body .tab.active,body .tab:hover.active{background:var(--sl-brown)!important;color:var(--sl-cream)!important;border-color:var(--sl-brown)!important;box-shadow:2px 2px 0 var(--sl-ochre)}
body .size-btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--sl-sand)}
.best-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--sl-olive);color:var(--sl-cream);font:600 10.5px/1 var(--font-note);padding:3px 9px;border-radius:999px;white-space:nowrap;border:1px solid var(--sl-brown)}
.size-btn.selected .best-tag{background:var(--sl-ochre)}

/* ── form controls ── */
body .form-group label{font:700 13.5px var(--font-ui);color:var(--sl-brown)!important;display:block;margin-bottom:6px}
body .form-group input,body .form-group textarea,body .form-group select,body textarea#rtext{
  width:100%;background:var(--cream-2)!important;color:var(--sl-brown);border:var(--stroke) solid var(--sl-brown)!important;border-radius:var(--r-sm);padding:12px 14px;font:500 15px var(--font-ui);
  transition:box-shadow var(--dur-1),transform var(--dur-1)}
body .form-group input:focus,body .form-group textarea:focus,body .form-group select:focus{outline:none!important;box-shadow:4px 4px 0 var(--sl-sand);transform:translate(-1px,-1px);border-color:var(--sl-brown)!important}
.field-error{display:none;margin-top:6px;font:700 12.5px var(--font-ui);color:var(--sl-terracotta)}
.field-error.show{display:block}
.field-error::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--sl-terracotta);margin-inline-end:7px}
[aria-invalid="true"]{border-color:var(--sl-terracotta)!important;box-shadow:3px 3px 0 var(--sl-terracotta)}

/* ── toast ── */
.sl-toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,24px);background:var(--sl-brown);color:var(--sl-cream);padding:12px 18px;border-radius:var(--r-md);border:var(--stroke) solid var(--sl-sand);box-shadow:4px 4px 0 var(--sl-ochre);font:600 14px var(--font-ui);z-index:1500;opacity:0;pointer-events:none;transition:opacity var(--dur-2),transform var(--dur-2) var(--ease);max-width:min(92vw,420px);text-align:center}
.sl-toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.sl-toast.error{background:var(--sl-terracotta);border-color:var(--sl-cream);box-shadow:4px 4px 0 var(--sl-brown)}
.sl-toast button{background:none;border:0;color:var(--sl-sand);font:700 14px var(--font-ui);text-decoration:underline;cursor:pointer;margin-inline-start:12px}

/* ── icons ── */
.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none;overflow:visible}
.ic .ofs{fill:var(--sl-f1);stroke:none}
.ic .dot{fill:currentColor;stroke:none}

/* ── skeleton ── */
.skel{position:relative;overflow:hidden;background:var(--cream-2);border:var(--stroke) dashed var(--line-soft);border-radius:var(--r-lg);min-height:380px}
.skel::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--sl-sand) 45%,transparent) 50%,transparent 70%);transform:translateX(-100%);animation:shimmer 1.6s var(--ease-soft) infinite}
@keyframes shimmer{to{transform:translateX(100%)}}