/* UTF Product Samples. Uses the site font (Instrument Sans) and matches the pack calculator. */
.utfs-wrap{--utfs-ink:#111;--utfs-muted:#5b6470;--utfs-line:#dee2e6;--utfs-ok:#1e7e34;font-family:inherit;text-align:left}
form.cart .utfs-wrap{flex-basis:100%;width:100%}
/* Compact: the button becomes part of the "Add to basket" row; the counter/note drop to a small line underneath */
form.cart .utfs-wrap--compact,.utfs-wrap--compact{display:contents}
.utfs-wrap.utfs-wrap--compact .utfs-btn{flex:0 0 auto;width:auto;max-width:none;min-height:44px;height:auto;align-self:flex-end;padding:0 20px;font-size:14px;gap:7px;border-width:1.5px;white-space:nowrap;margin:0;box-sizing:border-box}
@media (max-width:600px){.utfs-wrap.utfs-wrap--compact .utfs-btn{flex-basis:100%;width:100%}}
.utfs-wrap--compact .utfs-btn .utfs-ico{width:16px;height:16px}
.utfs-wrap.utfs-wrap--compact .utfs-meta,.utfs-wrap.utfs-wrap--compact .utfs-inline-msg{flex-basis:100%;width:100%;margin:-4px 0 12px;font-size:12px}
.utfs-wrap--compact .utfs-meta .utfs-note{display:inline}
.utfs-wrap--compact .utfs-meta .utfs-note:before{content:" · "}
.utfs-wrap--product{margin:4px 0 18px}
.utfs-wrap--archive{margin:8px 0 0}
.utfs-form{margin:0}

/* Button (deliberately not using the theme's .button class, which the site restyles) */
.utfs-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 22px;border-radius:999px;font:inherit;font-size:15px;font-weight:700;line-height:1.2;letter-spacing:0;text-transform:none;text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s;box-shadow:none}
.utfs-btn--outline{background:#fff;color:var(--utfs-ink,#111);border:1.5px solid var(--utfs-ink,#111)}
.utfs-btn--outline:hover{background:#111;color:#fff}
.utfs-btn--solid{background:#111;color:#fff;border:1.5px solid #111}
.utfs-btn--solid:hover{background:#333;border-color:#333;color:#fff}
.utfs-btn--link{background:none;border:0;padding:0;min-height:40px;color:#111;text-decoration:underline;text-underline-offset:3px}
.utfs-wrap--product .utfs-btn{width:100%;max-width:420px}
.utfs-wrap--archive .utfs-btn{min-height:40px;padding:0 16px;font-size:13px}
.utfs-wrap--archive .utfs-btn--link{padding:0}
.utfs-btn:focus-visible{outline:3px solid #8a5a35;outline-offset:2px}
.utfs-btn .utfs-ico{flex:none}
.utfs-btn.is-added{border-color:var(--utfs-ok,#1e7e34);color:var(--utfs-ok,#1e7e34);background:#eef7f0}
.utfs-btn.is-added:hover{background:#e2f1e6;color:#1e7e34}
.utfs-btn.is-busy{opacity:.6;cursor:progress}
.utfs-btn.is-disabled{opacity:.5;cursor:not-allowed;border-style:dashed}
.utfs-shake{animation:utfs-shake .4s}
@keyframes utfs-shake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}

.utfs-meta{margin:8px 0 0;padding:0;font-size:13px;line-height:1.5;color:var(--utfs-muted,#5b6470)}
.utfs-meta .utfs-counter{font-weight:600;color:#111}
.utfs-meta .utfs-note{display:block}
.utfs-inline-msg{margin:8px 0 0;padding:8px 12px;border-radius:6px;background:#fff4e0;color:#7a4300;font-size:13px}

/* Basket */
.utfs-cart-tag{display:inline-block;margin-right:4px;padding:1px 8px;border-radius:99px;background:#f1ebe4;color:#8a5a35;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;vertical-align:middle}
.utfs-free{font-weight:700;color:#1e7e34}

/* Pop-up */
html.utfs-locked{overflow:hidden}
.utfs-modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px;font-family:inherit}
.utfs-modal[hidden]{display:none}
.utfs-modal__backdrop{position:absolute;inset:0;background:rgba(17,17,17,.55)}
.utfs-modal__dialog{position:relative;width:100%;max-width:460px;max-height:calc(100vh - 32px);overflow:auto;padding:28px 24px 22px;background:#fff;color:#111;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.25);text-align:left;outline:none;animation:utfs-in .18s ease-out}
@keyframes utfs-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.utfs-modal__x{position:absolute;top:10px;right:10px;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:transparent;color:#111;font-size:26px;line-height:1;cursor:pointer}
.utfs-modal__x:hover{background:#f1f1f1}
.utfs-modal__icon{display:flex;align-items:center;justify-content:center;width:46px;height:46px;margin:0 0 12px;border-radius:50%;font-size:18px;font-weight:700}
.utfs-modal__icon--ok{background:#eef7f0;color:#1e7e34;font-size:22px}
.utfs-modal__icon--info{background:#f1ebe4;color:#8a5a35;font-size:14px}
.utfs-modal__title{margin:0 0 6px;padding:0 30px 0 0;font-family:inherit;font-size:20px;font-weight:700;line-height:1.3;color:#111}
.utfs-modal__text{margin:0 0 8px;font-size:15px;line-height:1.5;color:#3d434a}
.utfs-modal__text--strong{font-weight:600;color:#111}
.utfs-modal__tip{margin:12px 0 0;padding:10px 12px;border-radius:8px;background:#f8f9fa;font-size:13px;line-height:1.45;color:#5b6470}
.utfs-list{list-style:none;margin:14px 0 4px;padding:0;border-top:1px solid #eee}
.utfs-list__item{display:flex;align-items:center;gap:12px;margin:0;padding:10px 0;border-bottom:1px solid #eee}
.utfs-list__item img{flex:none;width:56px;height:56px;object-fit:cover;border-radius:6px;background:#f3f3f3}
.utfs-list__name{flex:1;min-width:0;font-size:14px;font-weight:600;line-height:1.35;color:#111;text-decoration:none}
.utfs-list__name:hover{text-decoration:underline}
.utfs-list__qty{font-weight:400;color:#5b6470}
.utfs-list__remove{flex:none;width:36px;height:36px;padding:0;border:1px solid #ddd;border-radius:50%;background:#fff;color:#555;font-size:18px;line-height:1;cursor:pointer}
.utfs-list__remove:hover{border-color:#7f1d1d;color:#7f1d1d}
.utfs-modal__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.utfs-mbtn{display:inline-flex;align-items:center;justify-content:center;flex:1 1 160px;min-height:46px;padding:0 18px;border-radius:999px;font:inherit;font-size:14px;font-weight:700;line-height:1.2;text-decoration:none;text-transform:none;letter-spacing:0;cursor:pointer}
.utfs-mbtn--dark{background:#111;color:#fff!important;border:1.5px solid #111}
.utfs-mbtn--dark:hover{background:#333}
.utfs-mbtn--line{background:#fff;color:#111;border:1.5px solid #111}
.utfs-mbtn--line:hover{background:#f3f3f3}
.utfs-mbtn--sm{flex:none;min-height:36px;padding:0 14px;font-size:13px}
.utfs-mbtn.is-busy,.utfs-list__remove.is-busy{opacity:.6;cursor:progress}
@media (max-width:480px){
  .utfs-modal{align-items:flex-end;padding:0}
  .utfs-modal__dialog{max-width:none;border-radius:16px 16px 0 0;padding:24px 16px 18px;max-height:88vh}
}
@media (prefers-reduced-motion:reduce){.utfs-modal__dialog,.utfs-shake{animation:none}}