/* =====================================================================
   ALLNATURALS — PRODUCT ATTRIBUTE SWATCHES  (Size / Color / any option)
   Replaces the plain full-width radio fieldset with centered pill buttons
   that stretch evenly across the row.
   Natural palette:  leaf #5b8f3c · forest #3f6b28 · deep #2f5d22
                     warm border #ddd6c9 · cream #fffdf9 · label #5b6b4f
   Scoped to the add-to-cart form so nothing else on the page is touched.
   ===================================================================== */

/* ── Fieldset: strip the default full-width border/padding box ───────── */
.commerce-order-item-add-to-cart-form fieldset.product--rendered-attribute {
  border: 0;
  padding: 0;
  margin: 0 0 22px;
  background: none;
}
/* ── Cool animated backdrop; the option pills float above it ──────────── */
.commerce-order-item-add-to-cart-form fieldset.product--rendered-attribute .fieldset-wrapper {
  position: relative;
  padding: 16px 16px 14px;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(120deg,
    #efe7fb 0%, #e3eedd 25%, #e7ecfb 50%, #efe2f7 75%, #e3eedd 100%);
  background-size: 280% 280%;
  animation: an-attr-shift 14s ease-in-out infinite;
  box-shadow: inset 0 1px 4px rgba(95, 74, 133, 0.10);
}
/* Drifting colour orbs for depth/motion */
.commerce-order-item-add-to-cart-form fieldset.product--rendered-attribute .fieldset-wrapper::before {
  content: "";
  position: absolute;
  inset: -45%;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 30%, rgba(155, 111, 196, 0.22), transparent 45%),
    radial-gradient(circle at 72% 68%, rgba(91, 143, 60, 0.20), transparent 45%);
  animation: an-attr-orbs 16s ease-in-out infinite alternate;
}
@keyframes an-attr-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes an-attr-orbs {
  0%   { transform: translate(-6%, -4%) rotate(0deg); }
  100% { transform: translate(6%, 4%) rotate(8deg); }
}

/* ── Legend ("Size") → small uppercase brand label ──────────────────── */
.commerce-order-item-add-to-cart-form fieldset.product--rendered-attribute > legend {
  float: none;
  width: auto;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
}
.commerce-order-item-add-to-cart-form fieldset.product--rendered-attribute .fieldset-legend {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #5f4a85;
}
.commerce-order-item-add-to-cart-form fieldset.product--rendered-attribute .fieldset-legend.form-required::after,
.commerce-order-item-add-to-cart-form fieldset.product--rendered-attribute .form-required::after {
  color: #b08400;
}

/* ── Options row: flex, each option stretches to fill the width ──────── */
.commerce-order-item-add-to-cart-form .product--rendered-attribute .form-radios {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}
.commerce-order-item-add-to-cart-form .product--rendered-attribute .form-radios > .form-item {
  flex: 1 1 0;
  min-width: 72px;
  margin: 0;
  padding: 0;
}

/* ── Hide the native radio dot (kept focusable for keyboard users) ───── */
.commerce-order-item-add-to-cart-form .product--rendered-attribute .form-radios input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* ── The clickable pill ─────────────────────────────────────────────── */
.commerce-order-item-add-to-cart-form .product--rendered-attribute .form-radios label.option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 10px 16px;
  border: 1.6px solid #6f51a3;
  border-radius: 12px;
  background: linear-gradient(160deg, #a88fd4 0%, #7d5fb5 100%);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.4px;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: 0 4px 10px rgba(95, 74, 133, 0.28);
  transition: filter 0.18s ease, box-shadow 0.18s ease;
}
.commerce-order-item-add-to-cart-form .product--rendered-attribute .form-radios label.option .field__item,
.commerce-order-item-add-to-cart-form .product--rendered-attribute .form-radios label.option > div {
  line-height: 1;
}

/* ── Hover ──────────────────────────────────────────────────────────── */
.commerce-order-item-add-to-cart-form .product--rendered-attribute .form-radios label.option:hover {
  filter: brightness(1.07);
  box-shadow: 0 6px 16px rgba(95, 74, 133, 0.36);
}

/* ── Selected (checked) → filled leaf-green pill ────────────────────── */
.commerce-order-item-add-to-cart-form .product--rendered-attribute .form-radios input[type="radio"]:checked + label.option {
  border-color: #2f5d22;
  background: linear-gradient(160deg, #5b8f3c 0%, #3f6b28 100%);
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7),
              0 8px 18px rgba(63, 107, 40, 0.40);
}

/* ── Keyboard focus ring ────────────────────────────────────────────── */
.commerce-order-item-add-to-cart-form .product--rendered-attribute .form-radios input[type="radio"]:focus-visible + label.option {
  outline: 2px solid #6f9c4f;
  outline-offset: 2px;
}

/* ── Super-cool AJAX loader — replaces Drupal's default throbber ─────── */
.ajax-progress.ajax-progress-throbber {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 0 10px;
  padding: 4px 8px;
  border: 0;
  background: none !important;
  box-shadow: none;
  vertical-align: middle;
}
.ajax-progress.ajax-progress-throbber .throbber {
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  float: none;
  border: 0 !important;
  border-radius: 50%;
  background: conic-gradient(from 90deg,
    #5b8f3c, #9b6fc4, #8899d4, #c4a8e8, #5b8f3c) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  filter: drop-shadow(0 0 5px rgba(155, 111, 196, 0.6))
          drop-shadow(0 0 3px rgba(91, 143, 60, 0.5));
  animation: an-throb-spin 0.9s linear infinite;
}
.ajax-progress.ajax-progress-throbber .message {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #5b8f3c, #7d5fb5);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: an-throb-pulse 1.1s ease-in-out infinite;
}
@keyframes an-throb-spin { to { transform: rotate(360deg); } }
@keyframes an-throb-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* ── Small screens: still fill the row, comfortable tap targets ─────── */
@media (max-width: 480px) {
  .commerce-order-item-add-to-cart-form .product--rendered-attribute .form-radios > .form-item {
    min-width: 64px;
  }
  .commerce-order-item-add-to-cart-form .product--rendered-attribute .form-radios label.option {
    min-height: 46px;
    font-size: 14px;
  }
}