.xport-va,
.xport-va *,
.xport-va *::before,
.xport-va *::after{box-sizing:border-box}

.xport-va-container{
  width:min(100%,var(--xport-va-container-max));
  min-width:0;
  margin-inline:auto;
  padding-inline:var(--xport-va-gutter);
}

.xport-va-button{
  appearance:none;
  display:inline-flex;
  min-width:0;
  min-height:var(--xport-va-control-height);
  align-items:center;
  justify-content:center;
  gap:var(--xport-va-space-2);
  padding:0 18px;
  border:0;
  border-radius:var(--xport-va-radius-control);
  font:600 14px/1 var(--xport-va-font);
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:background-color var(--xport-va-transition),color var(--xport-va-transition),box-shadow var(--xport-va-transition),transform var(--xport-va-transition),opacity var(--xport-va-transition);
}

.xport-va-button--primary{background:var(--xport-va-color-primary);color:#0b2a14;box-shadow:var(--xport-va-shadow-control)}
.xport-va-button--primary:hover{background:var(--xport-va-color-primary-hover)}
.xport-va-button--primary:active{background:var(--xport-va-color-primary-pressed);transform:translateY(1px)}
.xport-va-button--secondary{background:rgba(255,255,255,.82);color:var(--xport-va-color-heading);box-shadow:var(--xport-va-shadow-control);backdrop-filter:blur(12px)}
.xport-va-button--secondary:hover{background:#fff}
.xport-va-button--quiet{background:var(--xport-va-color-primary-soft);color:#216b38;box-shadow:none}
.xport-va-button--quiet:hover{background:rgba(85,200,120,.2)}
.xport-va-button--danger{background:var(--xport-va-color-danger-bg);color:var(--xport-va-color-danger);box-shadow:none}
.xport-va-button--danger:hover{background:var(--xport-va-color-danger-hover)}

.xport-va-button:focus-visible,
.xport-va-input:focus-visible,
.xport-va-choice input:focus-visible{
  outline:0;
  box-shadow:var(--xport-va-focus-ring);
}

.xport-va-button:disabled,
.xport-va-button[aria-disabled="true"]{opacity:.48;cursor:not-allowed;transform:none}

.xport-va-button.is-loading{position:relative;color:transparent;pointer-events:none}
.xport-va-button.is-loading::after{
  position:absolute;
  width:18px;
  height:18px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  color:#0b2a14;
  content:"";
  animation:xport-va-spin .7s linear infinite;
}

@keyframes xport-va-spin{to{transform:rotate(360deg)}}

.xport-va-field{display:grid;min-width:0;gap:6px}
.xport-va-input{
  appearance:none;
  width:100%;
  min-width:0;
  min-height:var(--xport-va-control-height);
  padding:0 14px;
  border:0;
  border-radius:var(--xport-va-radius-control);
  background:var(--xport-va-color-surface);
  box-shadow:var(--xport-va-shadow-control);
  color:var(--xport-va-color-text);
  font:400 16px/1.3 var(--xport-va-font);
  transition:box-shadow var(--xport-va-transition),background-color var(--xport-va-transition);
}

.xport-va-input::placeholder{color:#8a948d;opacity:1}
.xport-va-field.is-error .xport-va-input{box-shadow:0 0 0 2px rgba(217,87,115,.38),var(--xport-va-shadow-control)}
.xport-va-field.is-error .xport-va-field__message{color:var(--xport-va-color-error)}
.xport-va-field.is-success .xport-va-input{box-shadow:0 0 0 2px rgba(45,143,82,.3),var(--xport-va-shadow-control)}
.xport-va-field.is-success .xport-va-field__message{color:var(--xport-va-color-success)}
.xport-va-field__message{font-size:13px;line-height:1.4}

.xport-va-choice{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:14px;line-height:1.4;cursor:pointer}
.xport-va-choice input{
  appearance:none;
  width:20px;
  height:20px;
  margin:0;
  border:0;
  border-radius:6px;
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(18,32,24,.16),var(--xport-va-shadow-control);
}
.xport-va-choice input[type="radio"]{border-radius:50%}
.xport-va-choice input:checked{box-shadow:inset 0 0 0 6px var(--xport-va-color-primary),var(--xport-va-shadow-control)}

.xport-va-panel,
.xport-va-product-card,
.xport-va-state{
  min-width:0;
  border:0;
  background:var(--xport-va-color-surface);
  box-shadow:var(--xport-va-shadow);
}

.xport-va-panel{padding:clamp(18px,3vw,28px);border-radius:var(--xport-va-radius-panel)}
.xport-va-product-card{display:grid;align-content:start;gap:var(--xport-va-space-3);padding:16px;border-radius:var(--xport-va-radius-card);overflow:hidden}
.xport-va-product-card__media{aspect-ratio:1/1;border-radius:var(--xport-va-radius-sm);background:linear-gradient(145deg,#f2f6f3,#e6ede8)}
.xport-va-product-card .xport-va-button{width:100%}
.xport-va-badge{display:inline-flex;width:max-content;max-width:100%;padding:6px 9px;border-radius:var(--xport-va-radius-sm);background:var(--xport-va-color-primary-soft);color:#216b38;font-size:12px;line-height:1;font-weight:650}

.xport-va-state{display:grid;gap:4px;padding:18px;border-radius:var(--xport-va-radius-card);font-size:14px;line-height:1.4}
.xport-va-state span{color:var(--xport-va-color-muted)}
.xport-va-state--loading{background:linear-gradient(105deg,#fff 30%,#f3f8f4 48%,#fff 66%);background-size:240% 100%;animation:xport-va-shimmer 1.4s ease infinite}
.xport-va-state--error{background:var(--xport-va-color-danger-bg);box-shadow:none;color:var(--xport-va-color-danger)}
.xport-va-state--error span{color:inherit}

@keyframes xport-va-shimmer{to{background-position:-200% 0}}

@media(prefers-reduced-motion:reduce){
  .xport-va-button,
  .xport-va-input{transition:none}
  .xport-va-button.is-loading::after,
  .xport-va-state--loading{animation-duration:2s}
}