/** Shopify CDN: Minification failed

Line 257:0 Unexpected "="

**/
/* ==========================================================================
   RUE LOOT — FOUNDATION COMPONENTS
   Buttons, form controls, badges. Section-level components come later.
   ========================================================================== */

/* ==========================================================================
   BUTTONS
   Squared corners per brief 3.2. Primary inverts against its surface, so a
   single class works on bone and on ink without an override.
   ========================================================================== */

.rd-btn {
  --_bg: var(--rd-text);
  --_fg: var(--rd-surface);
  --_bd: var(--rd-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rd-space-2xs);
  min-height: var(--rd-tap-min);
  padding: var(--rd-space-xs) var(--rd-space-l);
  border: var(--rd-hairline) solid var(--_bd);
  border-radius: var(--rd-radius);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--rd-font-body);
  font-weight: 600;
  font-size: var(--rd-size-label-lg);
  letter-spacing: var(--rd-label-tracking);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--rd-dur-fast) var(--rd-ease),
              color var(--rd-dur-fast) var(--rd-ease),
              border-color var(--rd-dur-fast) var(--rd-ease);
}

.rd-btn:hover:not(:disabled):not([aria-disabled="true"]) {
  --_bg: transparent;
  --_fg: var(--rd-text);
}

.rd-btn--secondary {
  --_bg: transparent;
  --_fg: currentColor;
  --_bd: currentColor;
}
.rd-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  --_bg: var(--rd-text);
  --_fg: var(--rd-surface);
}

/* Over photography: force the light-on-dark pairing regardless of surface. */
.rd-on-media .rd-btn {
  --_bg: var(--rd-bone);
  --_fg: var(--rd-ink);
  --_bd: var(--rd-bone);
}
.rd-on-media .rd-btn--secondary {
  --_bg: transparent;
  --_fg: var(--rd-bone);
  --_bd: var(--rd-bone);
}

.rd-btn--full { width: 100%; }

.rd-btn:disabled,
.rd-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 1;                       /* opacity alone would fail contrast */
  --_bg: var(--rd-chrome-light);
  --_fg: var(--rd-steel-ink);
  --_bd: var(--rd-chrome-light);
}
.rd-surface-dark .rd-btn:disabled,
.rd-surface-dark .rd-btn[aria-disabled="true"] {
  --_bg: var(--rd-graphite);
  --_fg: var(--rd-steel);
  --_bd: var(--rd-graphite);
}

/* Loading — the label stays in the DOM for screen readers; only ink is hidden. */
.rd-btn[data-loading="true"] { position: relative; color: transparent; }
.rd-btn[data-loading="true"]::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 1rem; height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: 50%;
  color: var(--_fg);
  animation: rd-spin 640ms linear infinite;
}
@keyframes rd-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   FORM CONTROLS
   ========================================================================== */

.rd-field { display: flex; flex-direction: column; gap: var(--rd-space-2xs); }

.rd-field__label {
  font-family: var(--rd-font-body);
  font-weight: 600;
  font-size: var(--rd-size-label);
  letter-spacing: var(--rd-label-tracking);
  text-transform: uppercase;
  color: var(--rd-text);
}

.rd-input,
.rd-select,
.rd-textarea {
  width: 100%;
  min-height: var(--rd-control-h);
  padding: var(--rd-space-xs) var(--rd-space-s);
  border: var(--rd-hairline) solid var(--rd-border-strong);
  border-radius: var(--rd-radius);
  background: var(--rd-surface-raised);
  color: var(--rd-text);
  font-family: var(--rd-font-body);
  font-size: var(--rd-size-body);   /* 16px — never smaller, or iOS zooms */
  line-height: 1.4;
  letter-spacing: var(--rd-body-tracking);
}
.rd-textarea { min-height: 8rem; resize: vertical; }

.rd-input::placeholder,
.rd-textarea::placeholder {
  color: var(--rd-text-secondary);  /* 5.31:1 on bone — placeholders must pass too */
  opacity: 1;
}

.rd-select {
  appearance: none;
  padding-inline-end: var(--rd-space-l);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.15rem center, right 0.85rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.rd-input:disabled, .rd-select:disabled, .rd-textarea:disabled {
  background: var(--rd-chrome-light);
  color: var(--rd-steel-ink);
  cursor: not-allowed;
}

/* Error state names the problem; colour is never the only signal. */
.rd-field--error .rd-input,
.rd-field--error .rd-select,
.rd-field--error .rd-textarea { border-color: var(--rd-signal-red-ink); border-width: 2px; }

.rd-field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--rd-space-3xs);
  font-size: var(--rd-size-body-sm);
  font-weight: 500;
  color: var(--rd-signal-red-ink);   /* 5.50:1 on bone */
}
.rd-surface-dark .rd-field__error { color: var(--rd-signal-red); }
.rd-field__error::before { content: "!"; font-weight: 700; }

.rd-field__hint { font-size: var(--rd-size-body-sm); color: var(--rd-text-secondary); }

/* Checkbox — custom box, real input underneath for keyboard and AT. */
.rd-checkbox { display: flex; align-items: flex-start; gap: var(--rd-space-2xs); cursor: pointer; }
.rd-checkbox input {
  appearance: none;
  flex: 0 0 auto;
  width: 1.125rem; height: 1.125rem;
  margin: 0.19rem 0 0;
  border: var(--rd-hairline) solid var(--rd-border-strong);
  border-radius: var(--rd-radius-sm);
  background: var(--rd-surface-raised);
  cursor: pointer;
}
.rd-checkbox input:checked { background: var(--rd-text); border-color: var(--rd-text); }
.rd-checkbox input:checked::after {
  content: "";
  display: block;
  width: 0.3rem; height: 0.6rem;
  margin: 0.08rem auto 0;
  border: solid var(--rd-surface);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Honeypot — off-screen, never display:none (bots read that), never focusable. */
.rd-honeypot {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   BADGES
   Brief 3.2 gives colour-on-surface pairings. Rendered as filled fields with
   computed-safe type: red at #FF3048 is only 3.64:1 against paper, so it is a
   field colour carrying ink type, never red type on white.
   ========================================================================== */

.rd-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem var(--rd-space-2xs);
  border-radius: var(--rd-radius);
  font-family: var(--rd-font-body);
  font-weight: 700;
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Sold-out reads off semantic tokens, not raw ink: a hardcoded ink field is
   invisible on an ink surface. This inverts with the surface automatically. */
.rd-badge--sold    { background: var(--rd-text);           color: var(--rd-surface); }
.rd-badge--sale    { background: var(--rd-signal-red);     color: var(--rd-ink); }   /* 5.60:1 */
.rd-badge--new     { background: var(--rd-electric-blue);  color: var(--rd-paper); } /* 5.33:1 */
.rd-badge--limited { background: var(--rd-bubblegum);      color: var(--rd-ink); }   /* 7.50:1 */

.rd-badge-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rd-space-3xs);
}

/* ==========================================================================
   RULES
   ========================================================================== */

.rd-rule { height: var(--rd-hairline); border: 0; background: var(--rd-border); margin: 0; }
.rd-rule--strong { background: var(--rd-border-strong); }
.rd-rule--chrome { height: 3px; border: 0; margin: 0; }

/* ==========================================================================
   ACCORDION
   Used by the product page AND the FAQ page, so it lives here in the
   globally loaded foundation rather than in one surface's stylesheet.
   ========================================================================== */

========================================================================== */


.rd-accordion { border-block-start: var(--rd-hairline) solid var(--rd-border); }
.rd-accordion:last-child { border-block-end: var(--rd-hairline) solid var(--rd-border); }
.rd-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rd-space-s);
  min-height: var(--rd-tap-min);
  list-style: none;
  cursor: pointer;
  font: 600 var(--rd-size-label)/1 var(--rd-font-body);
  letter-spacing: var(--rd-label-tracking);
  text-transform: uppercase;
}
.rd-accordion__summary::-webkit-details-marker { display: none; }
.rd-accordion__summary .rd-icon { transition: transform var(--rd-dur-fast) var(--rd-ease); }
.rd-accordion[open] > .rd-accordion__summary .rd-icon { transform: rotate(180deg); }
.rd-accordion__body { padding-block: 0 var(--rd-space-s); }