/*
 * Storefront stylesheet source → resources/assets/widget.css
 * (`npm run compile:css-widget`). Design tokens are shared with the admin so the
 * shop widget and wp-admin speak the same colour / spacing / radius language.
 */

/*
 * ReviewX admin design tokens.
 *
 * Single source of truth for colour, spacing, radius, elevation, motion and
 * layering. Tailwind (libs/shared-tailwind/src/tailwind.config.js) maps these
 * variables to utilities such as `rvx-bg-surface`, `rvx-text-fg-muted`,
 * `rvx-border-line`, `rvx-z-modal`. Components must consume tokens; never
 * hard-code hex values or arbitrary px in share-ui.
 *
 * Colour tokens are stored as space-separated RGB triplets so Tailwind can
 * apply opacity modifiers (`rvx-bg-surface/80`).
 */

:root {
  /* ---- Brand ---------------------------------------------------------- */
  --rvx-c-brand: 0 67 221;
  /* #0043DD */
  --rvx-c-brand-hover: 0 77 255;
  /* #004DFF */
  --rvx-c-brand-active: 0 57 187;
  /* #0039BB */
  --rvx-c-brand-soft: 238 243 255;
  /* #EEF3FF */
  --rvx-c-brand-soft-line: 204 219 255;
  /* #CCDBFF */
  --rvx-c-brand-fg: 255 255 255;
  /* ---- Surfaces ------------------------------------------------------- */
  --rvx-c-canvas: 240 240 241;
  /* #F0F0F1 – wp-admin body */
  --rvx-c-surface: 255 255 255;
  --rvx-c-surface-sunken: 250 250 250;
  /* #FAFAFA */
  --rvx-c-surface-raised: 255 255 255;
  --rvx-c-surface-overlay: 33 33 33;
  /* used with alpha for scrims */
  --rvx-c-surface-inverse: 33 33 33;
  /* ---- Lines ---------------------------------------------------------- */
  --rvx-c-line: 224 224 224;
  /* #E0E0E0 */
  --rvx-c-line-subtle: 238 238 238;
  /* #EEEEEE */
  --rvx-c-line-strong: 189 189 189;
  /* #BDBDBD */
  --rvx-c-line-focus: 0 67 221;
  /* ---- Foreground ----------------------------------------------------- */
  --rvx-c-fg: 33 33 33;
  /* #212121 */
  --rvx-c-fg-muted: 97 97 97;
  /* #616161  – 5.9:1 on white */
  --rvx-c-fg-subtle: 117 117 117;
  /* #757575 – 4.6:1 on white (AA min) */
  --rvx-c-fg-disabled: 158 158 158;
  /* #9E9E9E – decorative only */
  --rvx-c-fg-inverse: 255 255 255;
  --rvx-c-fg-link: 0 67 221;
  /* ---- Status --------------------------------------------------------- */
  --rvx-c-success: 46 125 50;
  /* #2E7D32 */
  --rvx-c-success-soft: 232 245 233;
  /* #E8F5E9 */
  --rvx-c-success-line: 165 214 167;
  /* #A5D6A7 */
  --rvx-c-warning: 230 81 0;
  /* #E65100 */
  --rvx-c-warning-soft: 255 243 224;
  /* #FFF3E0 */
  --rvx-c-warning-line: 255 204 128;
  /* #FFCC80 */
  --rvx-c-danger: 198 40 40;
  /* #C62828 */
  --rvx-c-danger-soft: 255 235 238;
  /* #FFEBEE */
  --rvx-c-danger-line: 239 154 154;
  /* #EF9A9A */
  --rvx-c-info: 2 119 189;
  /* #0277BD */
  --rvx-c-info-soft: 225 245 254;
  /* #E1F5FE */
  --rvx-c-info-line: 129 212 250;
  /* #81D4FA */
  --rvx-c-star: 250 198 0;
  /* #FAC600 */
  /* Attention: coral red for "needs action" calls to action (pending reviews). */
  --rvx-c-attention: 217 72 63;
  /* #D9483F */
  --rvx-c-attention-hover: 200 60 52;
  --rvx-c-attention-fg: 255 255 255;
  /* ---- Legacy palette (token-backed) ---------------------------------- *
   * `neutral-*`, `primary-*`, `secondary-*` utilities still appear in
   * un-migrated pages. They read these variables so dark mode reaches them
   * too. New code uses the semantic tokens above.
   */
  --rvx-n-50: 250 250 250;
  --rvx-n-100: 245 245 245;
  --rvx-n-200: 238 238 238;
  --rvx-n-300: 224 224 224;
  --rvx-n-400: 189 189 189;
  --rvx-n-500: 158 158 158;
  --rvx-n-600: 117 117 117;
  --rvx-n-700: 97 97 97;
  --rvx-n-800: 66 66 66;
  --rvx-n-900: 33 33 33;
  --rvx-p-10: 238 243 255;
  --rvx-p-20: 204 219 255;
  --rvx-p-30: 170 196 255;
  --rvx-p-40: 136 172 255;
  --rvx-p-50: 102 148 255;
  --rvx-p-60: 68 125 255;
  --rvx-p-70: 34 101 255;
  --rvx-p-80: 0 77 255;
  --rvx-p-100: 0 57 187;
  --rvx-p-110: 0 46 153;
  --rvx-p-120: 0 36 119;
  --rvx-p-130: 0 15 51;
  --rvx-p-140: 0 32 121;
  --rvx-p-150: 0 5 17;
  --rvx-s-10: 255 239 238;
  --rvx-s-20: 255 231 229;
  --rvx-s-40: 255 206 204;
  --rvx-s-60: 255 182 179;
  --rvx-s-80: 255 133 128;
  --rvx-s-110: 255 36 26;
  --rvx-s-120: 230 10 0;
  --rvx-s-130: 179 8 0;
  --rvx-s-140: 128 6 0;
  --rvx-s-150: 77 3 0;
  /* ---- Typography ----------------------------------------------------- */
  --rvx-font-sans: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --rvx-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* ---- Radius --------------------------------------------------------- */
  --rvx-radius-control: 8px;
  /* inputs, buttons, chips */
  --rvx-radius-card: 12px;
  --rvx-radius-panel: 16px;
  /* modals, drawers, hero cards */
  --rvx-radius-pill: 9999px;
  /* ---- Elevation ------------------------------------------------------ */
  --rvx-shadow-xs: 0 1px 2px 0 rgb(24 39 75 / 0.06);
  --rvx-shadow-sm: 0 1px 3px 0 rgb(24 39 75 / 0.08), 0 1px 2px -1px rgb(24 39 75 / 0.08);
  --rvx-shadow-md: 0 4px 6px -1px rgb(24 39 75 / 0.08), 0 2px 4px -2px rgb(24 39 75 / 0.08);
  --rvx-shadow-lg: 0 10px 15px -3px rgb(24 39 75 / 0.1), 0 4px 6px -4px rgb(24 39 75 / 0.08);
  --rvx-shadow-xl: 0 20px 25px -5px rgb(24 39 75 / 0.12), 0 8px 10px -6px rgb(24 39 75 / 0.08);
  --rvx-shadow-popover: 0 12px 32px -4px rgb(0 0 0 / 0.18), 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 0 0 1px rgb(0 0 0 / 0.06);
  --rvx-shadow-modal: 0 24px 64px -16px rgb(0 0 0 / 0.28), 0 0 0 1px rgb(0 0 0 / 0.06);
  --rvx-shadow-focus: 0 0 0 2px rgb(var(--rvx-c-surface)), 0 0 0 4px rgb(var(--rvx-c-brand));
  /* ---- Layering ------------------------------------------------------- *
   * wp-admin: #adminmenuwrap 9990, #wpadminbar 99999. Overlays sit above the
   * admin bar so drawers/modals cover the full viewport. Dropdowns stay
   * below the admin bar so a sticky header never paints over it.
   */
  --rvx-z-raised: 10;
  --rvx-z-sticky: 100;
  --rvx-z-dropdown: 1000;
  --rvx-z-overlay: 100000;
  --rvx-z-drawer: 100010;
  --rvx-z-modal: 100020;
  --rvx-z-popover: 100030;
  --rvx-z-toast: 100040;
  /* ---- Motion --------------------------------------------------------- */
  --rvx-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --rvx-ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --rvx-duration-fast: 120ms;
  --rvx-duration-base: 200ms;
  --rvx-duration-slow: 320ms;
  /* ---- Layout --------------------------------------------------------- */
  --rvx-page-max: 1440px;
  --rvx-gutter: 16px;
  --rvx-gutter-lg: 24px;
  --rvx-control-h-sm: 32px;
  --rvx-control-h-md: 40px;
  --rvx-control-h-lg: 48px;
  --rvx-wp-adminbar-h: 32px;
}

/* wp-admin collapses the admin bar to 46px under its 783px breakpoint. */

@media screen and (max-width: 782px) {
  :root {
    --rvx-wp-adminbar-h: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --rvx-duration-fast: 0ms;
    --rvx-duration-base: 0ms;
    --rvx-duration-slow: 0ms;
  }
}

/* ---- Dark theme ---------------------------------------------------------
 * Applied by useRvxTheme() as `data-rvx-theme="dark"` on <html> (admin), and on a
 * storefront root as `data-rvx-mode="dark"` (resources/js/color-mode.js). Only the
 * colour tokens change; spacing, radius, motion and layering are shared.
 * Surfaces stay neutral (not blue-tinted) so merchant brand colours read
 * the same as in light mode.
 */

html[data-rvx-theme='dark'],
.rvx-storefront[data-rvx-mode='dark'] {
  --rvx-c-brand: 96 141 255;
  /* #608DFF – 5.2:1 on surface */
  --rvx-c-brand-hover: 122 160 255;
  --rvx-c-brand-active: 78 122 235;
  --rvx-c-brand-soft: 30 40 68;
  --rvx-c-brand-soft-line: 52 72 122;
  /* Text on solid brand fills (primary buttons, selected days, badges). The dark
   * brand is light enough to read as text on the dark surface, so white on it
   * is only 3.1:1; deep navy gives 5.8:1. */
  --rvx-c-brand-fg: 8 20 51;
  /* #081433 */
  --rvx-c-canvas: 20 20 23;
  /* #141417 */
  --rvx-c-surface: 31 31 36;
  /* #1F1F24 */
  --rvx-c-surface-sunken: 26 26 30;
  --rvx-c-surface-raised: 40 40 46;
  --rvx-c-surface-overlay: 0 0 0;
  --rvx-c-surface-inverse: 240 240 242;
  --rvx-c-line: 58 58 66;
  --rvx-c-line-subtle: 46 46 53;
  --rvx-c-line-strong: 92 92 102;
  --rvx-c-line-focus: 96 141 255;
  --rvx-c-fg: 236 236 240;
  --rvx-c-fg-muted: 178 178 186;
  /* 8.6:1 */
  --rvx-c-fg-subtle: 148 148 158;
  /* 5.9:1 */
  --rvx-c-fg-disabled: 104 104 114;
  --rvx-c-fg-inverse: 20 20 23;
  --rvx-c-fg-link: 122 160 255;
  --rvx-c-success: 102 187 106;
  --rvx-c-success-soft: 22 46 26;
  --rvx-c-success-line: 46 94 52;
  --rvx-c-warning: 255 167 38;
  --rvx-c-warning-soft: 58 40 14;
  --rvx-c-warning-line: 112 76 22;
  --rvx-c-danger: 239 96 92;
  --rvx-c-danger-soft: 62 26 28;
  --rvx-c-danger-line: 120 48 50;
  --rvx-c-info: 79 195 247;
  --rvx-c-info-soft: 16 42 56;
  --rvx-c-info-line: 32 86 116;
  --rvx-c-attention: 230 96 86;
  --rvx-c-attention-hover: 240 116 106;
  --rvx-n-50: 40 40 46;
  --rvx-n-100: 46 46 53;
  --rvx-n-200: 58 58 66;
  --rvx-n-300: 74 74 84;
  --rvx-n-400: 104 104 114;
  --rvx-n-500: 148 148 158;
  --rvx-n-600: 168 168 178;
  --rvx-n-700: 196 196 204;
  --rvx-n-800: 222 222 228;
  --rvx-n-900: 236 236 240;
  --rvx-p-10: 30 40 68;
  --rvx-p-20: 52 72 122;
  --rvx-p-30: 66 92 156;
  --rvx-p-40: 80 112 190;
  --rvx-p-50: 96 141 255;
  --rvx-p-60: 110 152 255;
  --rvx-p-70: 122 160 255;
  --rvx-p-80: 136 172 255;
  --rvx-p-100: 150 184 255;
  --rvx-p-110: 170 196 255;
  --rvx-p-120: 190 212 255;
  --rvx-p-130: 210 226 255;
  --rvx-p-140: 224 234 255;
  --rvx-p-150: 238 243 255;
  --rvx-s-10: 62 26 28;
  --rvx-s-20: 80 34 36;
  --rvx-s-40: 120 48 50;
  --rvx-s-60: 160 64 64;
  --rvx-s-80: 210 90 88;
  --rvx-s-110: 255 120 112;
  --rvx-s-120: 255 140 132;
  --rvx-s-130: 255 160 154;
  --rvx-s-140: 255 182 179;
  --rvx-s-150: 255 206 204;
  --rvx-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.4);
  --rvx-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.45), 0 1px 2px -1px rgb(0 0 0 / 0.4);
  --rvx-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.4);
  --rvx-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
  --rvx-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.55), 0 8px 10px -6px rgb(0 0 0 / 0.4);
  --rvx-shadow-popover: 0 12px 32px -4px rgb(0 0 0 / 0.6), 0 4px 12px -2px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.08);
  --rvx-shadow-modal: 0 24px 64px -16px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.08);
  color-scheme: dark;
}

/*
 * Storefront base — a small reset that lives INSIDE `.rvx-storefront` only.
 * Themes reset buttons, inputs and headings in wildly different ways; this
 * neutralises those within our roots so the token utilities render the same
 * everywhere, without touching anything outside ReviewX markup.
 * Specificity stays at (0,1,1) so every scoped utility (0,2,0) wins.
 */

.rvx-storefront {
  /* Merchant colours — overwritten on the root from widget settings. */
  --rvx-sf-brand: rgb(var(--rvx-c-brand));
  --rvx-sf-brand-fg: rgb(var(--rvx-c-brand-fg));
  --rvx-sf-star: rgb(var(--rvx-c-star));
  font-family: var(--rvx-font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: rgb(var(--rvx-c-fg));
  -webkit-font-smoothing: antialiased;
  text-align: start;
}

/* Dark mode (resources/js/color-mode.js sets the attribute): the dark tokens come from
   tokens.css; this tells the browser to draw form controls and scrollbars dark too. */

.rvx-storefront[data-rvx-mode='dark'] {
  color-scheme: dark;
}

/* A fixed mode (theme="dark" on a light page, "Always light" on a dark one) brings its own
   backdrop, so the reviews stay readable whatever the page behind them
   (data-rvx-backdrop, set by resources/js/color-mode.js). */

.rvx-storefront[data-rvx-backdrop] {
  background-color: rgb(var(--rvx-c-canvas));
  border-radius: var(--rvx-radius-panel);
  padding: 16px;
}

@media (min-width: 640px) {
  .rvx-storefront[data-rvx-backdrop] {
    padding: 24px;
  }
}

/* The inline rating badge stays a badge. */

.rvx-storefront.rvx-review-star-count[data-rvx-backdrop] {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: var(--rvx-radius-pill);
}

.rvx-storefront[data-rvx-mode='dark'],
.rvx-storefront[data-rvx-mode='dark'] * {
  --tw-ring-offset-color: rgb(var(--rvx-c-surface));
}

.rvx-storefront,
.rvx-storefront *,
.rvx-storefront *::before,
.rvx-storefront *::after {
  box-sizing: border-box;
  /* Tailwind's variable defaults. They normally come with `@tailwind base`, which
     the storefront leaves out (its preflight would reset the theme). Without them
     every transform utility (rotate, translate, scale), `tabular-nums` and `ring`
     compose an invalid value and silently do nothing — e.g. the dislike thumb
     rendered as a second thumbs-up. */
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
}

.rvx-storefront :is(h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote, fieldset) {
  margin: 0;
  padding: 0;
}

.rvx-storefront :is(h1, h2, h3, h4, h5, h6) {
  font-family: inherit;
  font-weight: 600;
  line-height: 1.3;
  color: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.rvx-storefront :is(ul, ol) {
  list-style: none;
}

/* Fieldsets are plain groups; a floated legend keeps it out of the border notch. */

.rvx-storefront fieldset {
  border: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent;
}

.rvx-storefront legend {
  float: inline-start;
  width: 100%;
  padding: 0;
  margin: 0;
}

.rvx-storefront legend + * {
  clear: both;
}

.rvx-storefront button {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  line-height: inherit;
  color: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
  box-shadow: none;
  border-radius: 0;
  cursor: pointer;
}

.rvx-storefront :is(input, textarea, select) {
  font: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  box-shadow: none;
  max-width: 100%;
}

.rvx-storefront textarea {
  resize: vertical;
}

/* Checkboxes / radios: custom-drawn so they match across themes (brand-tinted). */

.rvx-storefront :is(input[type='checkbox'], input[type='radio']) {
  -moz-appearance: none !important;
       appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none;
  display: inline-grid !important;
  place-content: center;
  border: 1.5px solid rgb(var(--rvx-c-line-strong)) !important;
  background: rgb(var(--rvx-c-surface)) !important;
  box-shadow: none !important;
  cursor: pointer;
  vertical-align: middle;
  transition: border-color var(--rvx-duration-fast) var(--rvx-ease-standard), background-color var(--rvx-duration-fast) var(--rvx-ease-standard), box-shadow var(--rvx-duration-fast) var(--rvx-ease-standard);
}

.rvx-storefront input[type='checkbox'] {
  border-radius: 5px !important;
}

.rvx-storefront input[type='radio'] {
  border-radius: 50% !important;
}

.rvx-storefront :is(input[type='checkbox'], input[type='radio'])::before {
  content: '';
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform var(--rvx-duration-fast) var(--rvx-ease-emphasized);
}

.rvx-storefront input[type='checkbox']::before {
  background: var(--rvx-sf-brand-fg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center / 12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center / 12px no-repeat;
  width: 12px;
  height: 12px;
}

.rvx-storefront input[type='radio']::before {
  border-radius: 50%;
  background: var(--rvx-sf-brand-fg);
  width: 8px;
  height: 8px;
}

.rvx-storefront :is(input[type='checkbox'], input[type='radio']):hover {
  border-color: var(--rvx-sf-brand) !important;
}

.rvx-storefront :is(input[type='checkbox'], input[type='radio']):checked {
  border-color: var(--rvx-sf-brand) !important;
  background: var(--rvx-sf-brand) !important;
}

.rvx-storefront :is(input[type='checkbox'], input[type='radio']):checked::before {
  transform: scale(1);
}

.rvx-storefront :is(input[type='checkbox'], input[type='radio']):focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rvx-sf-brand) 25%, transparent) !important;
}

.rvx-storefront :is(input[type='checkbox'], input[type='radio'])[aria-invalid='true'] {
  border-color: rgb(var(--rvx-c-danger)) !important;
}

.rvx-storefront label {
  display: inline;
  margin: 0;
  font-weight: inherit;
  cursor: pointer;
}

.rvx-storefront :is(img, video) {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
}

.rvx-storefront svg {
  display: block;
  flex: none;
}

/* Themes underline links with high-specificity rules (`.entry-content a`); inside
   ReviewX markup links are buttons/cards, so opt in to underlines with .rvx-link. */

.rvx-storefront a {
  color: inherit;
}

.rvx-storefront a:not(.rvx-link),
.rvx-storefront a:not(.rvx-link):hover,
.rvx-storefront a:not(.rvx-link):focus {
  text-decoration: none !important;
  box-shadow: none !important;
}

.rvx-storefront a.rvx-link {
  color: rgb(var(--rvx-c-fg-link));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rvx-storefront [x-cloak] {
  display: none !important;
}

.rvx-storefront :focus {
  outline: none;
}

.rvx-storefront :focus-visible {
  outline: 2px solid rgb(var(--rvx-c-line-focus));
  outline-offset: 2px;
  border-radius: 4px;
}

.rvx-storefront table,
.rvx-storefront td,
.rvx-storefront th {
  border: 0;
  background: transparent;
  padding: 0;
}

/*
 * Form controls. Themes style `input[type=text]` with selectors like
 * `.woocommerce input[type="text"]` (0,2,1) which out-rank scoped utilities
 * (0,2,0), so the control look is pinned here with !important. Tokens only.
 */

.rvx-storefront .rvx-input {
  display: block !important;
  width: 100% !important;
  min-height: var(--rvx-control-h-md) !important;
  padding: 9px 12px !important;
  border: 1px solid rgb(var(--rvx-c-line-strong)) !important;
  border-radius: var(--rvx-radius-control) !important;
  background: rgb(var(--rvx-c-surface)) !important;
  color: rgb(var(--rvx-c-fg)) !important;
  font: inherit !important;
  font-size: 14px !important;
  line-height: 20px !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color var(--rvx-duration-fast) var(--rvx-ease-standard), box-shadow var(--rvx-duration-fast) var(--rvx-ease-standard);
}

.rvx-storefront .rvx-input::-moz-placeholder {
  color: rgb(var(--rvx-c-fg-disabled));
  opacity: 1;
}

.rvx-storefront .rvx-input::placeholder {
  color: rgb(var(--rvx-c-fg-disabled));
  opacity: 1;
}

.rvx-storefront .rvx-input:focus,
.rvx-storefront .rvx-input:focus-visible {
  border-color: var(--rvx-sf-brand) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rvx-sf-brand) 20%, transparent) !important;
  outline: none !important;
}

.rvx-storefront .rvx-input[aria-invalid='true'] {
  border-color: rgb(var(--rvx-c-danger)) !important;
}

.rvx-storefront .rvx-input[aria-invalid='true']:focus {
  box-shadow: 0 0 0 3px rgb(var(--rvx-c-danger) / 0.2) !important;
}

.rvx-storefront textarea.rvx-input {
  min-height: 120px !important;
  resize: vertical !important;
}

.rvx-storefront .rvx-input--short {
  width: 120px !important;
}

/* Star input: no transforms (they read as the icon jumping), no theme focus dots on mouse clicks. */

.rvx-storefront .rvx-star-input__star {
  transition: filter var(--rvx-duration-fast) var(--rvx-ease-standard);
}

.rvx-storefront .rvx-star-input__star:hover {
  filter: brightness(1.08) drop-shadow(0 1px 1px rgb(0 0 0 / 0.12));
}

.rvx-storefront .rvx-star-input__star:focus:not(:focus-visible),
.rvx-storefront button:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

.rvx-storefront .rvx-star-input__star:focus-visible {
  outline: 2px solid rgb(var(--rvx-c-line-focus)) !important;
  outline-offset: 1px !important;
}

/* Hidden-but-accessible (screen readers). */

.rvx-storefront .rvx-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Masonry layout (CSS columns; grid/list are utilities). */

.rvx-storefront .rvx-masonry-layout {
  -moz-columns: 3 300px;
       columns: 3 300px;
  -moz-column-gap: 16px;
       column-gap: 16px;
}

.rvx-storefront .rvx-masonry-layout > * {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  margin-bottom: 16px;
}

/* Motion respect. */

@media (prefers-reduced-motion: reduce) {
  .rvx-storefront * {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}

/* Custom scrollbar for modal bodies. */

.rvx-storefront .rvx-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.rvx-storefront .rvx-scrollbar::-webkit-scrollbar-thumb {
  background: rgb(var(--rvx-c-line-strong));
  border-radius: 4px;
}

.rvx-storefront .rvx-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.rvx-storefront .rvx-pointer-events-none {
  pointer-events: none;
}

.rvx-storefront .rvx-fixed {
  position: fixed;
}

.rvx-storefront .rvx-absolute {
  position: absolute;
}

.rvx-storefront .rvx-relative {
  position: relative;
}

.rvx-storefront .rvx-inset-0 {
  inset: 0px;
}

.rvx-storefront .rvx-inset-x-space16 {
  left: 16px;
  right: 16px;
}

.rvx-storefront .rvx-inset-y-0 {
  top: 0px;
  bottom: 0px;
}

.rvx-storefront .-rvx-end-space5 {
  inset-inline-end: -5px;
}

.rvx-storefront .-rvx-top-space5 {
  top: -5px;
}

.rvx-storefront .rvx-bottom-\[calc\(100\%\+6px\)\] {
  bottom: calc(100% + 6px);
}

.rvx-storefront .rvx-bottom-space20 {
  bottom: 20px;
}

.rvx-storefront .rvx-end-0 {
  inset-inline-end: 0px;
}

.rvx-storefront .rvx-end-space12 {
  inset-inline-end: 12px;
}

.rvx-storefront .rvx-end-space8 {
  inset-inline-end: 8px;
}

.rvx-storefront .rvx-start-0 {
  inset-inline-start: 0px;
}

.rvx-storefront .rvx-top-\[calc\(100\%\+6px\)\] {
  top: calc(100% + 6px);
}

.rvx-storefront .rvx-top-space12 {
  top: 12px;
}

.rvx-storefront .rvx-top-space8 {
  top: 8px;
}

.rvx-storefront .rvx-z-dropdown {
  z-index: var(--rvx-z-dropdown);
}

.rvx-storefront .rvx-z-modal {
  z-index: var(--rvx-z-modal);
}

.rvx-storefront .rvx-z-raised {
  z-index: var(--rvx-z-raised);
}

.rvx-storefront .rvx-z-toast {
  z-index: var(--rvx-z-toast);
}

.rvx-storefront .rvx-mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.rvx-storefront .rvx-my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

.rvx-storefront .rvx-mb-\[6px\] {
  margin-bottom: 6px;
}

.rvx-storefront .rvx-mb-space16 {
  margin-bottom: 16px;
}

.rvx-storefront .rvx-mb-space8 {
  margin-bottom: 8px;
}

.rvx-storefront .rvx-me-\[2px\] {
  margin-inline-end: 2px;
}

.rvx-storefront .rvx-ms-\[2px\] {
  margin-inline-start: 2px;
}

.rvx-storefront .rvx-ms-auto {
  margin-inline-start: auto;
}

.rvx-storefront .rvx-ms-space5 {
  margin-inline-start: 5px;
}

.rvx-storefront .rvx-mt-\[2px\] {
  margin-top: 2px;
}

.rvx-storefront .rvx-mt-\[3px\] {
  margin-top: 3px;
}

.rvx-storefront .rvx-mt-\[4px\] {
  margin-top: 4px;
}

.rvx-storefront .rvx-mt-space12 {
  margin-top: 12px;
}

.rvx-storefront .rvx-mt-space16 {
  margin-top: 16px;
}

.rvx-storefront .rvx-mt-space24 {
  margin-top: 24px;
}

.rvx-storefront .rvx-mt-space5 {
  margin-top: 5px;
}

.rvx-storefront .rvx-mt-space8 {
  margin-top: 8px;
}

.rvx-storefront .rvx-line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.rvx-storefront .rvx-block {
  display: block;
}

.rvx-storefront .rvx-flex {
  display: flex;
}

.rvx-storefront .rvx-inline-flex {
  display: inline-flex;
}

.rvx-storefront .rvx-grid {
  display: grid;
}

.rvx-storefront .rvx-hidden {
  display: none;
}

.rvx-storefront .rvx-size-10 {
  width: 2.5rem;
  height: 2.5rem;
}

.rvx-storefront .rvx-size-12 {
  width: 3rem;
  height: 3rem;
}

.rvx-storefront .rvx-size-14 {
  width: 3.5rem;
  height: 3.5rem;
}

.rvx-storefront .rvx-size-16 {
  width: 4rem;
  height: 4rem;
}

.rvx-storefront .rvx-size-20 {
  width: 5rem;
  height: 5rem;
}

.rvx-storefront .rvx-size-5 {
  width: 1.25rem;
  height: 1.25rem;
}

.rvx-storefront .rvx-size-6 {
  width: 1.5rem;
  height: 1.5rem;
}

.rvx-storefront .rvx-size-8 {
  width: 2rem;
  height: 2rem;
}

.rvx-storefront .rvx-size-9 {
  width: 2.25rem;
  height: 2.25rem;
}

.rvx-storefront .rvx-size-full {
  width: 100%;
  height: 100%;
}

.rvx-storefront .rvx-h-10 {
  height: 2.5rem;
}

.rvx-storefront .rvx-h-3 {
  height: 0.75rem;
}

.rvx-storefront .rvx-h-4 {
  height: 1rem;
}

.rvx-storefront .rvx-h-5 {
  height: 1.25rem;
}

.rvx-storefront .rvx-h-\[14px\] {
  height: 14px;
}

.rvx-storefront .rvx-h-\[180px\] {
  height: 180px;
}

.rvx-storefront .rvx-h-\[6px\] {
  height: 6px;
}

.rvx-storefront .rvx-h-\[8px\] {
  height: 8px;
}

.rvx-storefront .rvx-h-control-lg {
  height: var(--rvx-control-h-lg);
}

.rvx-storefront .rvx-h-control-md {
  height: var(--rvx-control-h-md);
}

.rvx-storefront .rvx-h-control-sm {
  height: var(--rvx-control-h-sm);
}

.rvx-storefront .rvx-h-full {
  height: 100%;
}

.rvx-storefront .rvx-h-px {
  height: 1px;
}

.rvx-storefront .rvx-max-h-\[70vh\] {
  max-height: 70vh;
}

.rvx-storefront .rvx-max-h-\[92dvh\] {
  max-height: 92dvh;
}

.rvx-storefront .rvx-min-h-0 {
  min-height: 0px;
}

.rvx-storefront .rvx-min-h-\[220px\] {
  min-height: 220px;
}

.rvx-storefront .rvx-w-1\/3 {
  width: 33.333333%;
}

.rvx-storefront .rvx-w-1\/4 {
  width: 25%;
}

.rvx-storefront .rvx-w-14 {
  width: 3.5rem;
}

.rvx-storefront .rvx-w-2\/3 {
  width: 66.666667%;
}

.rvx-storefront .rvx-w-24 {
  width: 6rem;
}

.rvx-storefront .rvx-w-28 {
  width: 7rem;
}

.rvx-storefront .rvx-w-32 {
  width: 8rem;
}

.rvx-storefront .rvx-w-5\/6 {
  width: 83.333333%;
}

.rvx-storefront .rvx-w-8 {
  width: 2rem;
}

.rvx-storefront .rvx-w-9 {
  width: 2.25rem;
}

.rvx-storefront .rvx-w-\[20px\] {
  width: 20px;
}

.rvx-storefront .rvx-w-\[280px\] {
  width: 280px;
}

.rvx-storefront .rvx-w-full {
  width: 100%;
}

.rvx-storefront .rvx-min-w-0 {
  min-width: 0px;
}

.rvx-storefront .rvx-min-w-5 {
  min-width: 1.25rem;
}

.rvx-storefront .rvx-min-w-\[140px\] {
  min-width: 140px;
}

.rvx-storefront .rvx-min-w-\[180px\] {
  min-width: 180px;
}

.rvx-storefront .rvx-min-w-\[220px\] {
  min-width: 220px;
}

.rvx-storefront .rvx-min-w-\[5\.5em\] {
  min-width: 5.5em;
}

.rvx-storefront .rvx-max-w-\[640px\] {
  max-width: 640px;
}

.rvx-storefront .rvx-max-w-\[calc\(100vw-32px\)\] {
  max-width: calc(100vw - 32px);
}

.rvx-storefront .rvx-max-w-full {
  max-width: 100%;
}

.rvx-storefront .rvx-max-w-modal-2xl {
  max-width: 960px;
}

.rvx-storefront .rvx-max-w-modal-md {
  max-width: 580px;
}

.rvx-storefront .rvx-max-w-modal-sm {
  max-width: 500px;
}

.rvx-storefront .rvx-max-w-prose {
  max-width: 68ch;
}

.rvx-storefront .rvx-max-w-sm {
  max-width: 24rem;
}

.rvx-storefront .rvx-flex-1 {
  flex: 1 1 0%;
}

.rvx-storefront .rvx-shrink-0 {
  flex-shrink: 0;
}

.rvx-storefront .rvx-origin-bottom-right {
  transform-origin: bottom right;
}

.rvx-storefront .rvx-origin-top-left {
  transform-origin: top left;
}

.rvx-storefront .rvx-origin-top-right {
  transform-origin: top right;
}

.rvx-storefront .-rvx-translate-y-1 {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rvx-storefront .rvx-translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rvx-storefront .rvx-translate-y-3 {
  --tw-translate-y: 0.75rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rvx-storefront .rvx-translate-y-6 {
  --tw-translate-y: 1.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rvx-storefront .rvx-rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rvx-storefront .rvx-scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rvx-storefront .rvx-scale-95 {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes rvx-pulse {
  50% {
    opacity: .5;
  }
}

.rvx-storefront .rvx-animate-pulse {
  animation: rvx-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes rvx-spin {
  to {
    transform: rotate(360deg);
  }
}

.rvx-storefront .rvx-animate-spin {
  animation: rvx-spin 1s linear infinite;
}

.rvx-storefront .rvx-cursor-pointer {
  cursor: pointer;
}

.rvx-storefront .rvx-scroll-mt-space24 {
  scroll-margin-top: 24px;
}

.rvx-storefront .rvx-grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.rvx-storefront .rvx-grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rvx-storefront .rvx-flex-col {
  flex-direction: column;
}

.rvx-storefront .rvx-flex-wrap {
  flex-wrap: wrap;
}

.rvx-storefront .rvx-place-items-center {
  place-items: center;
}

.rvx-storefront .rvx-items-start {
  align-items: flex-start;
}

.rvx-storefront .rvx-items-end {
  align-items: flex-end;
}

.rvx-storefront .rvx-items-center {
  align-items: center;
}

.rvx-storefront .rvx-items-baseline {
  align-items: baseline;
}

.rvx-storefront .rvx-justify-start {
  justify-content: flex-start;
}

.rvx-storefront .rvx-justify-center {
  justify-content: center;
}

.rvx-storefront .rvx-justify-between {
  justify-content: space-between;
}

.rvx-storefront .rvx-gap-\[2px\] {
  gap: 2px;
}

.rvx-storefront .rvx-gap-\[3px\] {
  gap: 3px;
}

.rvx-storefront .rvx-gap-\[4px\] {
  gap: 4px;
}

.rvx-storefront .rvx-gap-\[6px\] {
  gap: 6px;
}

.rvx-storefront .rvx-gap-space12 {
  gap: 12px;
}

.rvx-storefront .rvx-gap-space16 {
  gap: 16px;
}

.rvx-storefront .rvx-gap-space24 {
  gap: 24px;
}

.rvx-storefront .rvx-gap-space5 {
  gap: 5px;
}

.rvx-storefront .rvx-gap-space8 {
  gap: 8px;
}

.rvx-storefront .rvx-gap-x-space12 {
  -moz-column-gap: 12px;
       column-gap: 12px;
}

.rvx-storefront .rvx-gap-x-space8 {
  -moz-column-gap: 8px;
       column-gap: 8px;
}

.rvx-storefront .rvx-gap-y-\[2px\] {
  row-gap: 2px;
}

.rvx-storefront .rvx-gap-y-\[4px\] {
  row-gap: 4px;
}

.rvx-storefront :is(.rvx-space-y-space12 > :not([hidden]) ~ :not([hidden])) {
  --tw-space-y-reverse: 0;
  margin-top: calc(12px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(12px * var(--tw-space-y-reverse));
}

.rvx-storefront :is(.rvx-space-y-space16 > :not([hidden]) ~ :not([hidden])) {
  --tw-space-y-reverse: 0;
  margin-top: calc(16px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(16px * var(--tw-space-y-reverse));
}

.rvx-storefront :is(.rvx-space-y-space20 > :not([hidden]) ~ :not([hidden])) {
  --tw-space-y-reverse: 0;
  margin-top: calc(20px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(20px * var(--tw-space-y-reverse));
}

.rvx-storefront :is(.rvx-space-y-space24 > :not([hidden]) ~ :not([hidden])) {
  --tw-space-y-reverse: 0;
  margin-top: calc(24px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(24px * var(--tw-space-y-reverse));
}

.rvx-storefront :is(.rvx-space-y-space8 > :not([hidden]) ~ :not([hidden])) {
  --tw-space-y-reverse: 0;
  margin-top: calc(8px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(8px * var(--tw-space-y-reverse));
}

.rvx-storefront .rvx-overflow-hidden {
  overflow: hidden;
}

.rvx-storefront .rvx-overflow-x-auto {
  overflow-x: auto;
}

.rvx-storefront .rvx-overflow-y-auto {
  overflow-y: auto;
}

.rvx-storefront .rvx-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rvx-storefront .rvx-whitespace-nowrap {
  white-space: nowrap;
}

.rvx-storefront .rvx-whitespace-pre-line {
  white-space: pre-line;
}

.rvx-storefront .rvx-break-words {
  overflow-wrap: break-word;
}

.rvx-storefront .rvx-rounded-\[2px\] {
  border-radius: 2px;
}

.rvx-storefront .rvx-rounded-\[4px\] {
  border-radius: 4px;
}

.rvx-storefront .rvx-rounded-\[6px\] {
  border-radius: 6px;
}

.rvx-storefront .rvx-rounded-card {
  border-radius: var(--rvx-radius-card);
}

.rvx-storefront .rvx-rounded-control {
  border-radius: var(--rvx-radius-control);
}

.rvx-storefront .rvx-rounded-panel {
  border-radius: var(--rvx-radius-panel);
}

.rvx-storefront .rvx-rounded-pill {
  border-radius: var(--rvx-radius-pill);
}

.rvx-storefront .rvx-rounded-t-\[calc\(var\(--rvx-radius-card\)-1px\)\] {
  border-top-left-radius: calc(var(--rvx-radius-card) - 1px);
  border-top-right-radius: calc(var(--rvx-radius-card) - 1px);
}

.rvx-storefront .rvx-rounded-t-panel {
  border-top-left-radius: var(--rvx-radius-panel);
  border-top-right-radius: var(--rvx-radius-panel);
}

.rvx-storefront .rvx-border {
  border-width: 1px;
}

.rvx-storefront .rvx-border-2 {
  border-width: 2px;
}

.rvx-storefront .rvx-border-s-2 {
  border-inline-start-width: 2px;
}

.rvx-storefront .rvx-border-t {
  border-top-width: 1px;
}

.rvx-storefront .rvx-border-dashed {
  border-style: dashed;
}

.rvx-storefront .rvx-border-brand-soft-line {
  --tw-border-opacity: 1;
  border-color: rgb(var(--rvx-c-brand-soft-line) / var(--tw-border-opacity));
}

.rvx-storefront .rvx-border-danger-line {
  --tw-border-opacity: 1;
  border-color: rgb(var(--rvx-c-danger-line) / var(--tw-border-opacity));
}

.rvx-storefront .rvx-border-line {
  --tw-border-opacity: 1;
  border-color: rgb(var(--rvx-c-line) / var(--tw-border-opacity));
}

.rvx-storefront .rvx-border-line-strong {
  --tw-border-opacity: 1;
  border-color: rgb(var(--rvx-c-line-strong) / var(--tw-border-opacity));
}

.rvx-storefront .rvx-border-line-subtle {
  --tw-border-opacity: 1;
  border-color: rgb(var(--rvx-c-line-subtle) / var(--tw-border-opacity));
}

.rvx-storefront .rvx-border-merchant {
  border-color: var(--rvx-sf-brand);
}

.rvx-storefront .rvx-border-success-line {
  --tw-border-opacity: 1;
  border-color: rgb(var(--rvx-c-success-line) / var(--tw-border-opacity));
}

.rvx-storefront .rvx-border-transparent {
  border-color: transparent;
}

.rvx-storefront .rvx-border-warning-line {
  --tw-border-opacity: 1;
  border-color: rgb(var(--rvx-c-warning-line) / var(--tw-border-opacity));
}

.rvx-storefront .rvx-bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

.rvx-storefront .rvx-bg-brand {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--rvx-c-brand) / var(--tw-bg-opacity));
}

.rvx-storefront .rvx-bg-brand-soft {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--rvx-c-brand-soft) / var(--tw-bg-opacity));
}

.rvx-storefront .rvx-bg-danger {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--rvx-c-danger) / var(--tw-bg-opacity));
}

.rvx-storefront .rvx-bg-danger-soft {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--rvx-c-danger-soft) / var(--tw-bg-opacity));
}

.rvx-storefront .rvx-bg-line {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--rvx-c-line) / var(--tw-bg-opacity));
}

.rvx-storefront .rvx-bg-line-subtle {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--rvx-c-line-subtle) / var(--tw-bg-opacity));
}

.rvx-storefront .rvx-bg-merchant {
  background-color: var(--rvx-sf-brand);
}

.rvx-storefront .rvx-bg-merchant-soft {
  background-color: color-mix(in srgb, var(--rvx-sf-brand) 10%, transparent);
}

.rvx-storefront .rvx-bg-success-soft {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--rvx-c-success-soft) / var(--tw-bg-opacity));
}

.rvx-storefront .rvx-bg-surface {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--rvx-c-surface) / var(--tw-bg-opacity));
}

.rvx-storefront .rvx-bg-surface-inverse {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--rvx-c-surface-inverse) / var(--tw-bg-opacity));
}

.rvx-storefront .rvx-bg-surface-overlay\/60 {
  background-color: rgb(var(--rvx-c-surface-overlay) / 0.6);
}

.rvx-storefront .rvx-bg-surface-overlay\/70 {
  background-color: rgb(var(--rvx-c-surface-overlay) / 0.7);
}

.rvx-storefront .rvx-bg-surface-sunken {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--rvx-c-surface-sunken) / var(--tw-bg-opacity));
}

.rvx-storefront .rvx-bg-surface\/90 {
  background-color: rgb(var(--rvx-c-surface) / 0.9);
}

.rvx-storefront .rvx-bg-transparent {
  background-color: transparent;
}

.rvx-storefront .rvx-bg-warning-soft {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--rvx-c-warning-soft) / var(--tw-bg-opacity));
}

.rvx-storefront .rvx-object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.rvx-storefront .rvx-object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.rvx-storefront .rvx-p-0 {
  padding: 0px;
}

.rvx-storefront .rvx-p-\[2px\] {
  padding: 2px;
}

.rvx-storefront .rvx-p-space12 {
  padding: 12px;
}

.rvx-storefront .rvx-p-space16 {
  padding: 16px;
}

.rvx-storefront .rvx-p-space20 {
  padding: 20px;
}

.rvx-storefront .rvx-p-space24 {
  padding: 24px;
}

.rvx-storefront .rvx-p-space5 {
  padding: 5px;
}

.rvx-storefront .rvx-px-\[5px\] {
  padding-left: 5px;
  padding-right: 5px;
}

.rvx-storefront .rvx-px-space12 {
  padding-left: 12px;
  padding-right: 12px;
}

.rvx-storefront .rvx-px-space16 {
  padding-left: 16px;
  padding-right: 16px;
}

.rvx-storefront .rvx-px-space20 {
  padding-left: 20px;
  padding-right: 20px;
}

.rvx-storefront .rvx-px-space24 {
  padding-left: 24px;
  padding-right: 24px;
}

.rvx-storefront .rvx-px-space5 {
  padding-left: 5px;
  padding-right: 5px;
}

.rvx-storefront .rvx-px-space8 {
  padding-left: 8px;
  padding-right: 8px;
}

.rvx-storefront .rvx-py-\[2px\] {
  padding-top: 2px;
  padding-bottom: 2px;
}

.rvx-storefront .rvx-py-\[3px\] {
  padding-top: 3px;
  padding-bottom: 3px;
}

.rvx-storefront .rvx-py-\[6px\] {
  padding-top: 6px;
  padding-bottom: 6px;
}

.rvx-storefront .rvx-py-space12 {
  padding-top: 12px;
  padding-bottom: 12px;
}

.rvx-storefront .rvx-py-space16 {
  padding-top: 16px;
  padding-bottom: 16px;
}

.rvx-storefront .rvx-py-space40 {
  padding-top: 40px;
  padding-bottom: 40px;
}

.rvx-storefront .rvx-py-space5 {
  padding-top: 5px;
  padding-bottom: 5px;
}

.rvx-storefront .rvx-py-space8 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.rvx-storefront .rvx-pb-space16 {
  padding-bottom: 16px;
}

.rvx-storefront .rvx-pe-space12 {
  padding-inline-end: 12px;
}

.rvx-storefront .rvx-pe-space40 {
  padding-inline-end: 40px;
}

.rvx-storefront .rvx-ps-space12 {
  padding-inline-start: 12px;
}

.rvx-storefront .rvx-ps-space24 {
  padding-inline-start: 24px;
}

.rvx-storefront .rvx-ps-space5 {
  padding-inline-start: 5px;
}

.rvx-storefront .rvx-ps-space8 {
  padding-inline-start: 8px;
}

.rvx-storefront .rvx-pt-\[2px\] {
  padding-top: 2px;
}

.rvx-storefront .rvx-pt-\[4px\] {
  padding-top: 4px;
}

.rvx-storefront .rvx-pt-space12 {
  padding-top: 12px;
}

.rvx-storefront .rvx-pt-space5 {
  padding-top: 5px;
}

.rvx-storefront .rvx-pt-space8 {
  padding-top: 8px;
}

.rvx-storefront .rvx-text-center {
  text-align: center;
}

.rvx-storefront .rvx-text-start {
  text-align: start;
}

.rvx-storefront .rvx-text-end {
  text-align: end;
}

.rvx-storefront .rvx-text-2xl {
  font-size: 20px;
  line-height: 28px;
}

.rvx-storefront .rvx-text-2xs {
  font-size: 11px;
  line-height: 16px;
}

.rvx-storefront .rvx-text-\[36px\] {
  font-size: 36px;
}

.rvx-storefront .rvx-text-\[44px\] {
  font-size: 44px;
}

.rvx-storefront .rvx-text-base {
  font-size: 14px;
  line-height: 20px;
}

.rvx-storefront .rvx-text-lg {
  font-size: 16px;
  line-height: 24px;
}

.rvx-storefront .rvx-text-md {
  font-size: 15px;
  line-height: 22px;
}

.rvx-storefront .rvx-text-sm {
  font-size: 13px;
  line-height: 18px;
}

.rvx-storefront .rvx-text-xl {
  font-size: 18px;
  line-height: 26px;
}

.rvx-storefront .rvx-text-xs {
  font-size: 12px;
  line-height: 16px;
}

.rvx-storefront .rvx-font-bold {
  font-weight: 700;
}

.rvx-storefront .rvx-font-normal {
  font-weight: 400;
}

.rvx-storefront .rvx-font-semibold {
  font-weight: 600;
}

.rvx-storefront .rvx-uppercase {
  text-transform: uppercase;
}

.rvx-storefront .rvx-tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.rvx-storefront .rvx-leading-none {
  line-height: 1;
}

.rvx-storefront .rvx-leading-relaxed {
  line-height: 1.625;
}

.rvx-storefront .rvx-leading-snug {
  line-height: 1.375;
}

.rvx-storefront .rvx-tracking-tight {
  letter-spacing: -0.025em;
}

.rvx-storefront .rvx-tracking-wide {
  letter-spacing: 0.025em;
}

.rvx-storefront .rvx-text-brand-fg {
  --tw-text-opacity: 1;
  color: rgb(var(--rvx-c-brand-fg) / var(--tw-text-opacity));
}

.rvx-storefront .rvx-text-danger {
  --tw-text-opacity: 1;
  color: rgb(var(--rvx-c-danger) / var(--tw-text-opacity));
}

.rvx-storefront .rvx-text-fg {
  --tw-text-opacity: 1;
  color: rgb(var(--rvx-c-fg) / var(--tw-text-opacity));
}

.rvx-storefront .rvx-text-fg-inverse {
  --tw-text-opacity: 1;
  color: rgb(var(--rvx-c-fg-inverse) / var(--tw-text-opacity));
}

.rvx-storefront .rvx-text-fg-inverse\/70 {
  color: rgb(var(--rvx-c-fg-inverse) / 0.7);
}

.rvx-storefront .rvx-text-fg-inverse\/75 {
  color: rgb(var(--rvx-c-fg-inverse) / 0.75);
}

.rvx-storefront .rvx-text-fg-link {
  --tw-text-opacity: 1;
  color: rgb(var(--rvx-c-fg-link) / var(--tw-text-opacity));
}

.rvx-storefront .rvx-text-fg-muted {
  --tw-text-opacity: 1;
  color: rgb(var(--rvx-c-fg-muted) / var(--tw-text-opacity));
}

.rvx-storefront .rvx-text-fg-subtle {
  --tw-text-opacity: 1;
  color: rgb(var(--rvx-c-fg-subtle) / var(--tw-text-opacity));
}

.rvx-storefront .rvx-text-info {
  --tw-text-opacity: 1;
  color: rgb(var(--rvx-c-info) / var(--tw-text-opacity));
}

.rvx-storefront .rvx-text-line-strong {
  --tw-text-opacity: 1;
  color: rgb(var(--rvx-c-line-strong) / var(--tw-text-opacity));
}

.rvx-storefront .rvx-text-merchant {
  color: var(--rvx-sf-brand);
}

.rvx-storefront .rvx-text-merchant-fg {
  color: var(--rvx-sf-brand-fg);
}

.rvx-storefront .rvx-text-merchant-star {
  color: var(--rvx-sf-star);
}

.rvx-storefront .rvx-text-success {
  --tw-text-opacity: 1;
  color: rgb(var(--rvx-c-success) / var(--tw-text-opacity));
}

.rvx-storefront .rvx-text-warning {
  --tw-text-opacity: 1;
  color: rgb(var(--rvx-c-warning) / var(--tw-text-opacity));
}

.rvx-storefront .rvx-underline {
  text-decoration-line: underline;
}

.rvx-storefront .rvx-no-underline {
  text-decoration-line: none;
}

.rvx-storefront .rvx-opacity-0 {
  opacity: 0;
}

.rvx-storefront .rvx-opacity-100 {
  opacity: 1;
}

.rvx-storefront .rvx-shadow-md {
  --tw-shadow: var(--rvx-shadow-md);
  --tw-shadow-colored: var(--rvx-shadow-md);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rvx-storefront .rvx-shadow-modal {
  --tw-shadow: var(--rvx-shadow-modal);
  --tw-shadow-colored: var(--rvx-shadow-modal);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rvx-storefront .rvx-shadow-popover {
  --tw-shadow: var(--rvx-shadow-popover);
  --tw-shadow-colored: var(--rvx-shadow-popover);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rvx-storefront .rvx-shadow-sm {
  --tw-shadow: var(--rvx-shadow-sm);
  --tw-shadow-colored: var(--rvx-shadow-sm);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rvx-storefront .rvx-shadow-xs {
  --tw-shadow: var(--rvx-shadow-xs);
  --tw-shadow-colored: var(--rvx-shadow-xs);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rvx-storefront .rvx-outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.rvx-storefront .rvx-ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.rvx-storefront .rvx-transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.rvx-storefront .rvx-transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.rvx-storefront .rvx-transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.rvx-storefront .rvx-transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.rvx-storefront .rvx-duration-base {
  transition-duration: var(--rvx-duration-base);
}

.rvx-storefront .rvx-duration-fast {
  transition-duration: var(--rvx-duration-fast);
}

.rvx-storefront .rvx-duration-slow {
  transition-duration: var(--rvx-duration-slow);
}

.rvx-storefront .rvx-ease-emphasized {
  transition-timing-function: var(--rvx-ease-emphasized);
}

.rvx-storefront .rvx-ease-standard {
  transition-timing-function: var(--rvx-ease-standard);
}

.rvx-storefront .rvx-tabular-nums {
  font-variant-numeric: tabular-nums;
}

.rvx-storefront .hover\:rvx-z-raised:hover {
  z-index: var(--rvx-z-raised);
}

.rvx-storefront .hover\:rvx-border-fg-subtle:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--rvx-c-fg-subtle) / var(--tw-border-opacity));
}

.rvx-storefront .hover\:rvx-bg-brand-hover:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--rvx-c-brand-hover) / var(--tw-bg-opacity));
}

.rvx-storefront .hover\:rvx-bg-merchant-hover:hover {
  background-color: color-mix(in srgb, var(--rvx-sf-brand) 88%, black);
}

.rvx-storefront .hover\:rvx-bg-merchant-soft:hover {
  background-color: color-mix(in srgb, var(--rvx-sf-brand) 10%, transparent);
}

.rvx-storefront .hover\:rvx-bg-surface-sunken:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--rvx-c-surface-sunken) / var(--tw-bg-opacity));
}

.rvx-storefront .hover\:rvx-text-danger:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--rvx-c-danger) / var(--tw-text-opacity));
}

.rvx-storefront .hover\:rvx-text-fg:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--rvx-c-fg) / var(--tw-text-opacity));
}

.rvx-storefront .hover\:rvx-text-fg-inverse:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--rvx-c-fg-inverse) / var(--tw-text-opacity));
}

.rvx-storefront .hover\:rvx-underline:hover {
  text-decoration-line: underline;
}

.rvx-storefront .hover\:rvx-no-underline:hover {
  text-decoration-line: none;
}

.rvx-storefront .hover\:rvx-opacity-90:hover {
  opacity: 0.9;
}

.rvx-storefront .hover\:rvx-shadow-md:hover {
  --tw-shadow: var(--rvx-shadow-md);
  --tw-shadow-colored: var(--rvx-shadow-md);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rvx-storefront .disabled\:rvx-cursor-default:disabled {
  cursor: default;
}

.rvx-storefront .disabled\:rvx-cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.rvx-storefront .disabled\:rvx-opacity-60:disabled {
  opacity: 0.6;
}

.rvx-storefront .disabled\:hover\:rvx-bg-transparent:hover:disabled {
  background-color: transparent;
}

.rvx-storefront :is(.rvx-group:hover .group-hover\:rvx-text-merchant) {
  color: var(--rvx-sf-brand);
}

@media (min-width: 480px) {
  .rvx-storefront .xs\:rvx-block {
    display: block;
  }

  .rvx-storefront .xs\:rvx-inline {
    display: inline;
  }
}

@media (min-width: 640px) {
  .rvx-storefront .sm\:rvx-inset-x-auto {
    left: auto;
    right: auto;
  }

  .rvx-storefront .sm\:rvx-end-space24 {
    inset-inline-end: 24px;
  }

  .rvx-storefront .sm\:rvx-block {
    display: block;
  }

  .rvx-storefront .sm\:rvx-max-h-\[86vh\] {
    max-height: 86vh;
  }

  .rvx-storefront .sm\:rvx-max-w-\[60\%\] {
    max-width: 60%;
  }

  .rvx-storefront .sm\:rvx-translate-y-0 {
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .rvx-storefront .sm\:rvx-scale-100 {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .rvx-storefront .sm\:rvx-scale-95 {
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .rvx-storefront .sm\:rvx-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rvx-storefront .sm\:rvx-grid-cols-\[150px_1fr\] {
    grid-template-columns: 150px 1fr;
  }

  .rvx-storefront .sm\:rvx-flex-row {
    flex-direction: row;
  }

  .rvx-storefront .sm\:rvx-items-start {
    align-items: flex-start;
  }

  .rvx-storefront .sm\:rvx-items-center {
    align-items: center;
  }

  .rvx-storefront .sm\:rvx-gap-space16 {
    gap: 16px;
  }

  .rvx-storefront .sm\:rvx-rounded-panel {
    border-radius: var(--rvx-radius-panel);
  }

  .rvx-storefront .sm\:rvx-p-space24 {
    padding: 24px;
  }

  .rvx-storefront .sm\:rvx-px-space24 {
    padding-left: 24px;
    padding-right: 24px;
  }

  .rvx-storefront .sm\:rvx-ps-\[166px\] {
    padding-inline-start: 166px;
  }

  .rvx-storefront .sm\:rvx-pt-\[10px\] {
    padding-top: 10px;
  }

  .rvx-storefront .sm\:rvx-text-start {
    text-align: start;
  }
}

@media (min-width: 768px) {
  .rvx-storefront .md\:rvx-flex {
    display: flex;
  }

  .rvx-storefront .md\:rvx-max-h-full {
    max-height: 100%;
  }

  .rvx-storefront .md\:rvx-min-h-0 {
    min-height: 0px;
  }

  .rvx-storefront .md\:rvx-min-h-\[420px\] {
    min-height: 420px;
  }

  .rvx-storefront .md\:rvx-grid-cols-\[220px_1fr\] {
    grid-template-columns: 220px 1fr;
  }

  .rvx-storefront .md\:rvx-grid-cols-\[minmax\(0\2c 5fr\)_minmax\(0\2c 6fr\)\] {
    grid-template-columns: minmax(0,5fr) minmax(0,6fr);
  }

  .rvx-storefront .md\:rvx-grid-cols-\[minmax\(200px\2c 260px\)_1fr\] {
    grid-template-columns: minmax(200px,260px) 1fr;
  }

  .rvx-storefront .md\:rvx-items-start {
    align-items: flex-start;
  }

  .rvx-storefront .md\:rvx-items-center {
    align-items: center;
  }

  .rvx-storefront .md\:rvx-border-e {
    border-inline-end-width: 1px;
  }

  .rvx-storefront .md\:rvx-border-line-subtle {
    --tw-border-opacity: 1;
    border-color: rgb(var(--rvx-c-line-subtle) / var(--tw-border-opacity));
  }

  .rvx-storefront .md\:rvx-object-contain {
    -o-object-fit: contain;
       object-fit: contain;
  }

  .rvx-storefront .md\:rvx-object-top {
    -o-object-position: top;
       object-position: top;
  }

  .rvx-storefront .md\:rvx-pe-space24 {
    padding-inline-end: 24px;
  }
}

@media (min-width: 1024px) {
  .rvx-storefront .lg\:rvx-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.rvx-storefront .rtl\:rvx-origin-bottom-left:where([dir="rtl"], [dir="rtl"] *) {
  transform-origin: bottom left;
}

.rvx-storefront .rtl\:rvx-origin-top-left:where([dir="rtl"], [dir="rtl"] *) {
  transform-origin: top left;
}

.rvx-storefront .rtl\:rvx-origin-top-right:where([dir="rtl"], [dir="rtl"] *) {
  transform-origin: top right;
}

.rvx-storefront .rtl\:-rvx-scale-x-100:where([dir="rtl"], [dir="rtl"] *) {
  --tw-scale-x: -1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}