@layer components{.button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2xs);min-height:var(--control-height);padding-inline:var(--space-md);padding-block:0;border:var(--border-width) solid transparent;border-radius:var(--radius-sm);font-family:var(--font-text);font-size:.8125rem;font-weight:var(--weight-medium);line-height:1;letter-spacing:.045em;text-align:center;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;isolation:isolate;transition:background-color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),opacity var(--duration-fast) var(--ease-out)}.button:active{transform:translateY(1px)}.button[disabled],.button[aria-disabled=true]{cursor:not-allowed}.button--primary[disabled],.button--primary[aria-disabled=true]{background-color:var(--surface-alt);border-color:var(--surface-alt);color:var(--text-muted)}.button--secondary[disabled],.button--secondary[aria-disabled=true],.button--ghost[disabled],.button--ghost[aria-disabled=true]{color:var(--text-muted);border-color:var(--border)}.button[disabled]:active,.button[aria-disabled=true]:active{transform:none}.button--primary{background-color:var(--accent);color:var(--on-accent);border-color:var(--accent)}.button--primary:hover:not([disabled]):not([aria-disabled=true]){background-color:color-mix(in oklab,var(--accent) 86%,var(--background));border-color:color-mix(in oklab,var(--accent) 86%,var(--background))}.button--secondary{background-color:transparent;color:var(--text);border-color:var(--border-strong)}.button--secondary:hover:not([disabled]):not([aria-disabled=true]){background-color:var(--tint-hover)}.button--ghost{background-color:transparent;color:var(--text);border-color:transparent;padding-inline:var(--space-sm)}.button--ghost:hover:not([disabled]):not([aria-disabled=true]){background-color:var(--tint-hover)}.button--on-media{background-color:rgb(var(--on-media));color:rgb(var(--on-media-contrast));border-color:rgb(var(--on-media))}.button--on-media:hover:not([disabled]):not([aria-disabled=true]){background-color:rgb(var(--on-media) / .88)}.button--on-media-outline{background-color:rgb(var(--on-media) / .06);color:rgb(var(--on-media));border-color:rgb(var(--on-media) / .55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.button--on-media-outline:hover:not([disabled]):not([aria-disabled=true]){border-color:rgb(var(--on-media));background-color:rgb(var(--on-media) / .14)}.button--surface{background-color:var(--surface);color:var(--text);border-color:var(--surface);box-shadow:var(--shadow-soft)}.button--surface:hover:not([disabled]):not([aria-disabled=true]){background-color:var(--text);color:var(--background);border-color:var(--text)}.button--sm{min-height:var(--control-height-sm);padding-inline:var(--space-sm);font-size:var(--text-body-s)}.button--lg{min-height:3.25rem;padding-inline:var(--space-lg)}.button--full{width:100%}.button--pill{border-radius:var(--radius-pill)}.button[aria-busy=true]{cursor:progress;pointer-events:none}.button[aria-busy=true] .button__label{opacity:0}.button[aria-busy=true] .button__spinner{opacity:1}.button__spinner{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;opacity:0;transition:opacity var(--duration-fast) var(--ease-out)}.button-link{display:inline-flex;align-items:center;gap:var(--space-2xs);min-height:var(--tap-target);font-size:var(--text-ui);font-weight:var(--weight-medium);letter-spacing:var(--tracking-ui);border-block-end:var(--border-width) solid var(--hairline);transition:border-color var(--duration-standard) var(--ease-out)}.button-link:hover{border-block-end-color:currentColor}.button-link__mark{display:inline-block;transition:transform var(--duration-standard) var(--ease-out)}.button-link:hover .button-link__mark{transform:translate(.3em)}.spinner{display:block;width:1.125rem;height:1.125rem;border:2px solid currentColor;border-top-color:transparent;border-radius:var(--radius-round);animation:spinner-rotate .62s linear infinite}.spinner--sm{width:.875rem;height:.875rem;border-width:1.5px}@keyframes spinner-rotate{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation-duration:1.6s}}.field{display:flex;flex-direction:column;gap:var(--space-3xs)}.field__label{font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-medium);color:var(--text-muted)}.field__hint{font-size:var(--text-meta);color:var(--text-muted)}.field__error{display:flex;align-items:center;gap:var(--space-3xs);font-size:var(--text-meta);color:var(--critical)}.input,.textarea,.select__control{width:100%;min-height:var(--control-height);padding:var(--space-xs) var(--space-sm);background-color:var(--surface);color:var(--text);border:var(--border-width) solid var(--border-control);border-radius:var(--radius-sm);font-size:var(--text-ui);line-height:var(--leading-snug);transition:border-color var(--duration-fast) var(--ease-out),background-color var(--duration-fast) var(--ease-out);-webkit-appearance:none;appearance:none}.input::placeholder,.textarea::placeholder{color:var(--text-muted);opacity:1}.input:hover,.textarea:hover,.select__control:hover{border-color:var(--text-muted)}.input:focus,.textarea:focus,.select__control:focus{border-color:var(--text)}.input[aria-invalid=true],.textarea[aria-invalid=true]{border-color:var(--critical)}.textarea{min-height:8rem;resize:vertical;line-height:var(--leading-body)}.select{position:relative;display:block}.select__control{padding-inline-end:var(--space-xl);cursor:pointer}.select__icon{position:absolute;inset-inline-end:var(--space-sm);inset-block-start:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-muted)}.choice{display:flex;align-items:flex-start;gap:var(--space-2xs);min-height:var(--tap-target);padding-block:var(--space-3xs);cursor:pointer}.choice__input{flex:none;width:1.125rem;height:1.125rem;margin:.28rem 0 0;-webkit-appearance:none;appearance:none;border:var(--border-width) solid var(--border-control);border-radius:var(--radius-xs);background-color:var(--surface);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out)}.choice__input[type=radio]{border-radius:var(--radius-round)}.choice__input:checked{background-color:var(--accent);border-color:var(--accent)}.choice__input[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.4 4.8 8.7 9.5 3.6'/%3E%3C/svg%3E");background-size:100%;background-repeat:no-repeat}.choice__input[type=radio]:checked{box-shadow:inset 0 0 0 3px var(--surface)}.choice__label{font-size:var(--text-body-s);line-height:var(--leading-snug)}.quantity{display:inline-grid;grid-template-columns:var(--tap-target) minmax(2.5rem,auto) var(--tap-target);align-items:center;min-height:var(--control-height);border:var(--border-width) solid var(--border-control);border-radius:var(--radius-sm);background-color:var(--surface)}.quantity__button{display:grid;place-items:center;height:100%;color:var(--text-muted);transition:color var(--duration-fast) var(--ease-out)}.quantity__button:hover:not([disabled]){color:var(--text)}.quantity__button[disabled]{opacity:.35;cursor:not-allowed}.quantity__input{width:100%;height:100%;padding:0;border:0;background:none;text-align:center;font-size:var(--text-ui);font-variant-numeric:tabular-nums;-webkit-appearance:textfield;appearance:textfield}.quantity__input::-webkit-outer-spin-button,.quantity__input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-3xs) var(--space-2xs)}.price__compare{color:var(--text-muted);text-decoration-thickness:1px;text-underline-offset:0}.price__unit{color:var(--text-muted)}.badge{display:inline-flex;align-items:center;gap:var(--space-3xs);padding:.3rem var(--space-2xs);border:var(--border-width) solid var(--hairline);border-radius:var(--radius-xs);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-medium);line-height:1;color:var(--text-muted);background-color:transparent}.badge--solid{background-color:var(--text);border-color:var(--text);color:var(--background)}.badge--critical{color:var(--critical);border-color:color-mix(in oklab,var(--critical) 34%,transparent)}.badge--success{color:var(--success);border-color:color-mix(in oklab,var(--success) 34%,transparent)}.status{display:inline-flex;align-items:center;gap:var(--space-2xs);font-size:var(--text-meta);color:var(--text-muted)}.status:before{content:"";width:.4rem;height:.4rem;border-radius:var(--radius-round);background-color:var(--status-color, var(--text-muted));flex:none}.status--in-stock{--status-color: var(--success)}.status--low{--status-color: var(--warning)}.status--out{--status-color: var(--text-muted)}.disclosure{border-block-end:var(--rule)}.disclosure__summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);min-height:var(--tap-target);padding-block:var(--space-sm);font-size:var(--text-ui);font-weight:var(--weight-medium);list-style:none}.disclosure__icon{flex:none;color:var(--text-muted);transition:transform var(--duration-standard) var(--ease-out)}.disclosure[open] .disclosure__icon{transform:rotate(45deg)}.disclosure__panel{padding-block-end:var(--space-md);color:var(--text-muted);max-width:var(--measure)}.notice{display:flex;align-items:flex-start;gap:var(--space-2xs);padding:var(--space-xs) var(--space-sm);border:var(--border-width) solid var(--notice-color, var(--hairline));border-radius:var(--radius-sm);font-size:var(--text-body-s);line-height:var(--leading-snug);color:var(--notice-color, var(--text));background-color:color-mix(in oklab,var(--notice-color, var(--text)) 5%,transparent)}.notice--critical{--notice-color: var(--critical)}.notice--success{--notice-color: var(--success)}.notice--warning{--notice-color: var(--warning)}.skeleton{background-color:var(--media-placeholder);border-radius:var(--radius-sm);animation:skeleton-pulse 1.4s var(--ease-in-out) infinite}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.55}}@media(prefers-reduced-motion:reduce){.skeleton{animation:none}}}
/*# sourceMappingURL=/cdn/shop/t/3/assets/components.css.map */