@snacky/ui 0.1.0

package/dist/index.css

@@ -0,0 +1,1625 @@
+/* src/theme/tokens.css */
+:root {
+  --color-primary-50: #fef8eb;
+  --color-primary-100: #fde9bf;
+  --color-primary-200: #fcdea1;
+  --color-primary-300: #facf76;
+  --color-primary-400: #f9c55b;
+  --color-primary-500: #f8b732;
+  --color-primary-600: #e2a72e;
+  --color-primary-700: #b08224;
+  --color-primary-800: #88651c;
+  --color-primary-900: #684d15;
+  --color-neutral-0: #ffffff;
+  --color-neutral-10: #fdfdfd;
+  --color-neutral-20: #f7f7f7;
+  --color-neutral-50: #f3f3f3;
+  --color-neutral-100: #e0e0e0;
+  --color-neutral-200: #cccccc;
+  --color-neutral-400: #a3a3a3;
+  --color-neutral-500: #7a7a7a;
+  --color-neutral-600: #6a6a6a;
+  --color-neutral-700: #525252;
+  --color-neutral-800: #4b4b4b;
+  --color-neutral-900: #434343;
+  --color-neutral-950: #333333;
+  --color-red-50: #fdeeee;
+  --color-red-100: #f9cbcb;
+  --color-red-200: #f6b2b2;
+  --color-red-300: #f28e8e;
+  --color-red-400: #ef7979;
+  --color-red-500: #eb5757;
+  --color-red-600: #d64f4f;
+  --color-red-700: #a73e3e;
+  --color-red-800: #813030;
+  --color-red-900: #632525;
+  --bg-app: #f7f7f7;
+  --bg-surface: #ffffff;
+  --bg-surface-primary: #f8b732;
+  --bg-surface-accent: #eb5757;
+  --bg-surface-variant: #f3f3f3;
+  --bg-surface-field: #ffffff;
+  --bg-surface-highlight: #fef8eb;
+  --bg-action-primary: #f8b732;
+  --bg-action-primary-hover: #e2a72e;
+  --bg-action-primary-pressed: #b08224;
+  --bg-action-secondary: #ffffff;
+  --bg-action-secondary-hover: #f3f3f3;
+  --bg-action-secondary-pressed: #e0e0e0;
+  --bg-action-disabled: #cccccc;
+  --bg-action-primary-danger: #eb5757;
+  --bg-action-primary-danger-hovered: #d64f4f;
+  --bg-action-primary-danger-pressed: #a73e3e;
+  --bg-overlay-dim: rgba(51,51,51,0.8);
+  --border-main: #cccccc;
+  --border-highlight: #fcdea1;
+  --border-input-default: #cccccc;
+  --border-input-active: #f8b732;
+  --border-input-error: #eb5757;
+  --border-action-secondary: #cccccc;
+  --border-action-secondary-pressed: #a3a3a3;
+  --border-action-danger: #eb5757;
+  --border-action-disabled: #cccccc;
+  --text-primary: #333333;
+  --text-secondary: #7a7a7a;
+  --text-placeholder: #7a7a7a;
+  --text-disabled: #a3a3a3;
+  --text-link: #88651c;
+  --text-error: #a73e3e;
+  --text-inverse: #ffffff;
+  --text-on-action-primary: #333333;
+  --text-on-action-secondary: #333333;
+  --text-on-action-tertiary: #b08224;
+  --text-on-action-tertiary-hovered: #88651c;
+  --text-on-action-tertiary-pressed: #684d15;
+  --text-action-danger: #d64f4f;
+  --text-action-danger-hovered: #a73e3e;
+  --text-action-danger-pressed: #813030;
+  --text-action-disabled: #a3a3a3;
+  --icon-primary: #333333;
+  --icon-secondary: #525252;
+  --icon-brand: #f8b732;
+  --icon-disabled: #a3a3a3;
+  --icon-active: #eb5757;
+  --icon-on-accent: #ffffff;
+  --spacing-2: 2px;
+  --spacing-4: 4px;
+  --spacing-8: 8px;
+  --spacing-12: 12px;
+  --spacing-16: 16px;
+  --spacing-24: 24px;
+  --spacing-32: 32px;
+  --gap-icon-label: 4px;
+  --gap-cell: 4px;
+  --gap-text-icon: 8px;
+  --gap-text-underline: 16px;
+  --gap-layout-section-list: 8px;
+  --gap-layout-block: 16px;
+  --gap-layout-stack: 24px;
+  --gap-layout-page: 32px;
+  --margin-screen: 16px;
+  --radius-4: 4px;
+  --radius-6: 6px;
+  --radius-8: 8px;
+  --radius-10: 10px;
+  --radius-20: 20px;
+  --radius-100: 100px;
+  --radius-999: 999px;
+  --radius-field: 4px;
+  --radius-tag: 6px;
+  --radius-bubble: 8px;
+  --radius-card: 10px;
+  --radius-sheet-top: 20px;
+  --radius-full: 100px;
+  --size-icon-sm: 16px;
+  --size-icon-md: 20px;
+  --size-icon-lg: 24px;
+  --size-avatar-sm: 32px;
+  --size-avatar-md: 56px;
+  --size-avatar-lg: 72px;
+  --shadow-md: 0 4px 8px rgba(0,0,0,0.08);
+  --shadow-lg: 0 10px 30px rgba(0,0,0,0.1);
+  --shadow-top: 0 -4px 10px rgba(0,0,0,0.08);
+  --font-h1-bold-family: "Poppins", sans-serif;
+  --font-h1-bold-size: 32px;
+  --font-h1-bold-weight: 700;
+  --font-h1-bold-line-height: 36px;
+  --font-h1-bold-letter-spacing: 0.01em;
+  --font-h2-bold-family: "Poppins", sans-serif;
+  --font-h2-bold-size: 20px;
+  --font-h2-bold-weight: 700;
+  --font-h2-bold-line-height: 36px;
+  --font-h2-bold-letter-spacing: 0.01em;
+  --font-h3-bold-family: "Poppins", sans-serif;
+  --font-h3-bold-size: 16px;
+  --font-h3-bold-weight: 700;
+  --font-h3-bold-line-height: 36px;
+  --font-h3-bold-letter-spacing: 0.01em;
+  --font-h3-regular-family: "Poppins", sans-serif;
+  --font-h3-regular-size: 16px;
+  --font-h3-regular-weight: 400;
+  --font-h3-regular-line-height: 36px;
+  --font-h3-regular-letter-spacing: normal;
+  --font-body-semibold-family: "Poppins", sans-serif;
+  --font-body-semibold-size: 14px;
+  --font-body-semibold-weight: 600;
+  --font-body-semibold-line-height: 24px;
+  --font-body-semibold-letter-spacing: normal;
+  --font-body-regular-family: "Poppins", sans-serif;
+  --font-body-regular-size: 14px;
+  --font-body-regular-weight: 400;
+  --font-body-regular-line-height: 24px;
+  --font-body-regular-letter-spacing: normal;
+  --font-small-semibold-family: "Poppins", sans-serif;
+  --font-small-semibold-size: 12px;
+  --font-small-semibold-weight: 600;
+  --font-small-semibold-line-height: 24px;
+  --font-small-semibold-letter-spacing: normal;
+  --font-small-bold-family: "Poppins", sans-serif;
+  --font-small-bold-size: 12px;
+  --font-small-bold-weight: 700;
+  --font-small-bold-line-height: 24px;
+  --font-small-bold-letter-spacing: 0.01em;
+  --font-small-regular-family: "Poppins", sans-serif;
+  --font-small-regular-size: 12px;
+  --font-small-regular-weight: 400;
+  --font-small-regular-line-height: 24px;
+  --font-small-regular-letter-spacing: normal;
+  --font-caption-semibold-family: "Poppins", sans-serif;
+  --font-caption-semibold-size: 10px;
+  --font-caption-semibold-weight: 600;
+  --font-caption-semibold-line-height: 23px;
+  --font-caption-semibold-letter-spacing: 0.01em;
+  --font-caption-regular-family: "Poppins", sans-serif;
+  --font-caption-regular-size: 10px;
+  --font-caption-regular-weight: 400;
+  --font-caption-regular-line-height: 16px;
+  --font-caption-regular-letter-spacing: 0.01em;
+}
+
+/* src/components/Button/Button.css */
+.snacky-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-12) var(--spacing-8);
+  border-radius: var(--radius-field);
+  border: none;
+  font-family: var(--font-small-semibold-family);
+  font-size: var(--font-small-semibold-size);
+  font-weight: var(--font-small-semibold-weight);
+  line-height: var(--font-small-semibold-line-height);
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    background-color 0.12s ease,
+    border-color 0.12s ease,
+    color 0.12s ease;
+}
+.snacky-btn:disabled {
+  cursor: not-allowed;
+}
+.snacky-btn--small {
+  padding: var(--spacing-8) var(--spacing-8);
+}
+.snacky-btn--primary {
+  background: var(--bg-action-primary);
+  color: var(--text-on-action-primary);
+}
+.snacky-btn--primary:hover:not(:disabled) {
+  background: var(--bg-action-primary-hover);
+}
+.snacky-btn--primary:active:not(:disabled) {
+  background: var(--bg-action-primary-pressed);
+}
+.snacky-btn--primary:disabled {
+  background: var(--bg-action-disabled);
+  color: var(--text-action-disabled);
+}
+.snacky-btn--primary.snacky-btn--danger {
+  background: var(--bg-action-primary-danger);
+  color: var(--text-on-action-primary);
+}
+.snacky-btn--primary.snacky-btn--danger:hover:not(:disabled) {
+  background: var(--bg-action-primary-danger-hovered);
+}
+.snacky-btn--primary.snacky-btn--danger:active:not(:disabled) {
+  background: var(--bg-action-primary-danger-pressed);
+}
+.snacky-btn--primary.snacky-btn--danger:disabled {
+  background: var(--bg-action-disabled);
+  color: var(--text-action-disabled);
+  border: 1px solid var(--border-action-disabled);
+}
+.snacky-btn--secondary {
+  background: var(--bg-action-secondary);
+  border: 1px solid var(--border-action-secondary);
+  color: var(--text-on-action-primary);
+}
+.snacky-btn--secondary:hover:not(:disabled) {
+  background: var(--bg-action-secondary-hover);
+}
+.snacky-btn--secondary:active:not(:disabled) {
+  background: var(--bg-action-secondary-pressed);
+}
+.snacky-btn--secondary:disabled {
+  color: var(--text-action-disabled);
+}
+.snacky-btn--secondary.snacky-btn--danger {
+  border-color: var(--border-action-danger);
+  color: var(--text-action-danger);
+}
+.snacky-btn--secondary.snacky-btn--danger:hover:not(:disabled) {
+  background: var(--bg-action-secondary-hover);
+}
+.snacky-btn--secondary.snacky-btn--danger:active:not(:disabled) {
+  background: var(--bg-action-secondary-pressed);
+}
+.snacky-btn--secondary.snacky-btn--danger:disabled {
+  border-color: var(--border-action-disabled);
+  color: var(--text-action-disabled);
+}
+.snacky-btn--tertiary {
+  background: transparent;
+  color: var(--text-on-action-tertiary);
+}
+.snacky-btn--tertiary:hover:not(:disabled) {
+  color: var(--text-on-action-tertiary-hovered);
+}
+.snacky-btn--tertiary:active:not(:disabled) {
+  color: var(--text-on-action-tertiary-pressed);
+}
+.snacky-btn--tertiary:disabled {
+  color: var(--text-action-disabled);
+}
+.snacky-btn--tertiary.snacky-btn--danger {
+  color: var(--text-action-danger);
+}
+.snacky-btn--tertiary.snacky-btn--danger:hover:not(:disabled) {
+  color: var(--text-action-danger-hovered);
+}
+.snacky-btn--tertiary.snacky-btn--danger:active:not(:disabled) {
+  color: var(--text-action-danger-pressed);
+}
+.snacky-btn--tertiary.snacky-btn--danger:disabled {
+  color: var(--text-action-disabled);
+}
+.snacky-btn__icon {
+  position: absolute;
+  left: var(--spacing-8);
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+/* src/components/IconButton/IconButton.css */
+.snacky-iconbtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border: none;
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  transition: background-color 0.12s ease;
+}
+.snacky-iconbtn:disabled {
+  cursor: not-allowed;
+}
+.snacky-iconbtn svg,
+.snacky-iconbtn img {
+  width: 100%;
+  height: 100%;
+}
+.snacky-iconbtn--primary {
+  width: 32px;
+  height: 32px;
+  padding: var(--spacing-8);
+  background: var(--bg-action-primary);
+}
+.snacky-iconbtn--primary .snacky-iconbtn__icon {
+  width: 16px;
+  height: 16px;
+  color: var(--text-primary);
+}
+.snacky-iconbtn--primary:hover:not(:disabled) {
+  background: var(--bg-action-primary-hover);
+}
+.snacky-iconbtn--primary:active:not(:disabled) {
+  background: var(--bg-action-primary-pressed);
+}
+.snacky-iconbtn--primary:disabled {
+  background: var(--bg-action-disabled);
+  border: 1px solid var(--border-action-disabled);
+}
+.snacky-iconbtn--primary:disabled .snacky-iconbtn__icon {
+  color: var(--text-action-disabled);
+}
+.snacky-iconbtn--primary.snacky-iconbtn--small {
+  width: 24px;
+  height: 24px;
+  padding: var(--spacing-4);
+}
+.snacky-iconbtn--secondary {
+  width: 40px;
+  height: 40px;
+  padding: var(--spacing-8);
+  background: var(--bg-action-secondary);
+  box-shadow: var(--shadow-md);
+}
+.snacky-iconbtn--secondary .snacky-iconbtn__icon {
+  width: 20px;
+  height: 20px;
+  color: var(--icon-secondary);
+}
+.snacky-iconbtn--secondary:hover:not(:disabled) {
+  background: var(--bg-action-secondary-hover);
+}
+.snacky-iconbtn--secondary:active:not(:disabled) {
+  background: var(--bg-action-secondary-pressed);
+}
+.snacky-iconbtn--secondary:disabled {
+  background: var(--bg-action-disabled);
+  box-shadow: none;
+}
+.snacky-iconbtn--secondary:disabled .snacky-iconbtn__icon {
+  color: var(--icon-disabled);
+}
+.snacky-iconbtn--secondary.snacky-iconbtn--selected .snacky-iconbtn__icon {
+  color: var(--icon-active);
+}
+.snacky-iconbtn--tertiary {
+  width: 40px;
+  height: 40px;
+  padding: var(--spacing-8);
+  background: transparent;
+}
+.snacky-iconbtn--tertiary .snacky-iconbtn__icon {
+  width: 24px;
+  height: 24px;
+  color: var(--icon-primary);
+}
+.snacky-iconbtn--tertiary:hover:not(:disabled) {
+  background: rgba(0, 0, 0, 0.08);
+}
+.snacky-iconbtn--tertiary:active:not(:disabled) {
+  background: rgba(0, 0, 0, 0.12);
+}
+.snacky-iconbtn--tertiary:disabled .snacky-iconbtn__icon {
+  color: var(--icon-disabled);
+}
+
+/* src/components/IconButton/UploadButton.css */
+.snacky-upload {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 72px;
+  height: 72px;
+  padding: var(--spacing-24);
+  border-radius: var(--radius-full);
+  background: var(--bg-surface);
+  border: 1px dashed var(--border-main);
+  cursor: pointer;
+  transition: background-color 0.12s ease;
+}
+.snacky-upload svg,
+.snacky-upload img {
+  width: 100%;
+  height: 100%;
+}
+.snacky-upload:hover {
+  background: var(--bg-action-secondary-hover);
+}
+.snacky-upload:active {
+  background: var(--bg-action-secondary-pressed);
+}
+
+/* src/components/Input/TextField.css */
+.snacky-field {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-text-icon);
+  width: 100%;
+  height: 48px;
+  padding: var(--spacing-12) var(--spacing-8);
+  background: var(--bg-surface-field);
+  border: 1px solid var(--border-input-default);
+  border-radius: var(--radius-field);
+  box-sizing: border-box;
+  transition: border-color 0.12s ease;
+}
+.snacky-field:focus-within {
+  border-color: var(--border-input-active);
+}
+.snacky-field--error {
+  border-color: var(--border-input-error) !important;
+}
+.snacky-field--disabled {
+  background: var(--bg-surface-variant);
+  cursor: not-allowed;
+}
+.snacky-field__input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: var(--font-small-regular-family);
+  font-size: var(--font-small-regular-size);
+  font-weight: var(--font-small-regular-weight);
+  line-height: var(--font-small-regular-line-height);
+  color: var(--text-primary);
+}
+.snacky-field__input::placeholder {
+  color: var(--text-placeholder);
+}
+.snacky-field__input:disabled {
+  cursor: not-allowed;
+  color: var(--text-disabled);
+}
+.snacky-field__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  color: var(--icon-secondary);
+}
+.snacky-field__icon--button {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: var(--icon-secondary);
+}
+.snacky-field-label {
+  display: block;
+  margin-bottom: var(--spacing-4);
+  font-family: var(--font-small-regular-family);
+  font-size: var(--font-small-regular-size);
+  color: var(--text-primary);
+}
+.snacky-field-error {
+  display: block;
+  margin-top: var(--spacing-4);
+  font-family: var(--font-caption-regular-family);
+  font-size: var(--font-caption-regular-size);
+  color: var(--text-error);
+}
+
+/* src/components/Input/SearchField.css */
+.snacky-search {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-12);
+  width: 260px;
+  height: 40px;
+  padding: var(--spacing-8) var(--spacing-12);
+  background: var(--bg-surface-variant);
+  border: 1px solid transparent;
+  border-radius: var(--radius-field);
+  box-sizing: border-box;
+  transition: border-color 0.12s ease, width 0.15s ease;
+}
+.snacky-search:focus-within {
+  width: 312px;
+  border-color: var(--border-input-active);
+}
+.snacky-search__input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: var(--font-small-regular-family);
+  font-size: var(--font-small-regular-size);
+  color: var(--text-primary);
+}
+.snacky-search__input::placeholder {
+  color: var(--text-placeholder);
+}
+.snacky-search__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  color: var(--icon-secondary);
+}
+.snacky-search__clear {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: var(--icon-secondary);
+}
+
+/* src/components/Input/OtpField.css */
+.snacky-otp {
+  display: flex;
+  gap: var(--spacing-4);
+}
+.snacky-otp__cell {
+  width: 48px;
+  height: 48px;
+  padding: 0;
+  box-sizing: border-box;
+  text-align: center;
+  border: 1px solid transparent;
+  border-radius: var(--radius-field);
+  background: var(--bg-surface-variant);
+  font-family: var(--font-h3-bold-family);
+  font-size: var(--font-h3-bold-size);
+  font-weight: var(--font-h3-bold-weight);
+  line-height: 46px;
+  letter-spacing: 0.16px;
+  color: var(--text-primary);
+  outline: none;
+  transition: border-color 0.1s ease;
+}
+.snacky-otp__cell:focus {
+  border-color: var(--border-input-active);
+}
+
+/* src/components/Input/CopyField.css */
+.snacky-copy {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 48px;
+  padding: var(--spacing-12);
+  background: var(--bg-surface-variant);
+  border-radius: var(--radius-field);
+  box-sizing: border-box;
+}
+.snacky-copy__value {
+  font-family: var(--font-body-semibold-family);
+  font-size: var(--font-body-semibold-size);
+  font-weight: var(--font-body-semibold-weight);
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.snacky-copy__action {
+  flex-shrink: 0;
+  margin-left: var(--spacing-12);
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  font-family: var(--font-small-bold-family);
+  font-size: var(--font-small-bold-size);
+  font-weight: var(--font-small-bold-weight);
+  color: var(--text-link);
+}
+.snacky-copy__action--copied {
+  color: var(--text-secondary);
+}
+
+/* src/components/Input/ChatInput.css */
+.snacky-chatfield {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-text-icon);
+  width: 100%;
+  height: 72px;
+  padding: var(--spacing-12);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-input-default);
+  border-radius: var(--radius-field);
+  box-sizing: border-box;
+  transition: border-color 0.12s ease;
+}
+.snacky-chatfield:focus-within {
+  border-color: var(--border-input-active);
+}
+.snacky-chatfield__input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: var(--font-small-regular-family);
+  font-size: var(--font-small-regular-size);
+  color: var(--text-primary);
+}
+.snacky-chatfield__input::placeholder {
+  color: var(--text-placeholder);
+}
+.snacky-chatfield__send {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  border: none;
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: var(--icon-secondary);
+  cursor: default;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.snacky-chatfield__send--active {
+  background: var(--bg-action-primary);
+  color: var(--text-on-action-primary);
+  cursor: pointer;
+}
+.snacky-chatfield__send--active:hover {
+  background: var(--bg-action-primary-hover);
+}
+
+/* src/components/Input/AddressResult.css */
+.snacky-address-result {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gap-text-icon);
+  width: 100%;
+  padding: var(--spacing-12) var(--spacing-8);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-input-default);
+  border-radius: var(--radius-field);
+  box-sizing: border-box;
+  cursor: pointer;
+  text-align: left;
+}
+.snacky-address-result__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  color: var(--icon-secondary);
+  margin-top: 2px;
+}
+.snacky-address-result__title {
+  margin: 0;
+  font-family: var(--font-small-bold-family);
+  font-size: var(--font-small-bold-size);
+  font-weight: var(--font-small-bold-weight);
+  color: var(--text-primary);
+}
+.snacky-address-result__subtitle {
+  margin: 0;
+  font-family: var(--font-small-regular-family);
+  font-size: var(--font-small-regular-size);
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* src/components/Chips/Chips.css */
+.snacky-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  padding: var(--spacing-8);
+  border-radius: var(--radius-full);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-main);
+  font-family: var(--font-small-regular-family);
+  font-size: var(--font-small-regular-size);
+  color: var(--text-primary);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.snacky-chip--selected {
+  background: var(--bg-surface-highlight);
+  border-color: var(--color-primary-500);
+}
+.snacky-chip__thumb {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  object-fit: contain;
+}
+
+/* src/components/RadioButton/RadioButton.css */
+.snacky-radio-option {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-icon-label);
+  cursor: pointer;
+  font-family: var(--font-small-regular-family);
+  font-size: var(--font-small-regular-size);
+  color: var(--text-primary);
+}
+.snacky-radio-option--disabled {
+  cursor: not-allowed;
+}
+.snacky-radio {
+  appearance: none;
+  width: 24px;
+  height: 24px;
+  margin: 0;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border-radius: 999px;
+  border: 1.5px solid var(--border-main);
+  background: transparent;
+  cursor: pointer;
+  position: relative;
+}
+.snacky-radio:checked {
+  border-color: var(--color-primary-500);
+}
+.snacky-radio:checked::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 12px;
+  height: 12px;
+  border-radius: 999px;
+  background: var(--color-primary-500);
+}
+.snacky-radio:disabled {
+  cursor: not-allowed;
+  border-color: var(--border-main);
+  background: var(--bg-surface);
+}
+.snacky-radio:disabled::after {
+  display: none;
+}
+
+/* src/components/Checkbox/Checkbox.css */
+.snacky-checkbox-option {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-icon-label);
+  cursor: pointer;
+  font-family: var(--font-small-regular-family);
+  font-size: var(--font-small-regular-size);
+  color: var(--text-primary);
+}
+.snacky-checkbox {
+  appearance: none;
+  width: 24px;
+  height: 24px;
+  margin: 0;
+  flex-shrink: 0;
+  border: none;
+  border-radius: var(--radius-field);
+  cursor: pointer;
+  position: relative;
+  background: var(--icon-secondary);
+}
+.snacky-checkbox:checked {
+  background: var(--color-primary-500);
+}
+.snacky-checkbox:checked::after {
+  content: "";
+  position: absolute;
+  inset: 3px;
+  background: var(--text-primary);
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+/* src/components/Toggle/Toggle.css */
+.snacky-toggle {
+  position: relative;
+  display: inline-block;
+  width: 56px;
+  height: 32px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  appearance: none;
+}
+.snacky-toggle:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.snacky-toggle__track {
+  position: absolute;
+  left: 0;
+  top: 4px;
+  width: 56px;
+  height: 24px;
+  border-radius: 12px;
+  background: var(--color-neutral-200);
+  transition: background-color 0.2s ease;
+}
+.snacky-toggle--on .snacky-toggle__track {
+  background: var(--bg-surface-highlight);
+}
+.snacky-toggle__thumb {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 999px;
+  background: var(--color-neutral-500);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  transition: left 0.2s ease, background-color 0.2s ease;
+}
+.snacky-toggle--on .snacky-toggle__thumb {
+  left: 24px;
+  background: var(--color-primary-500);
+}
+
+/* src/components/Navbar/Navbar.css */
+.snacky-navbar {
+  display: flex;
+  width: 100%;
+  background: var(--bg-surface);
+  box-shadow: var(--shadow-top);
+}
+.snacky-navbar__item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--gap-icon-label);
+  padding: var(--spacing-12) 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: var(--font-small-regular-family);
+  font-size: var(--font-small-regular-size);
+  color: var(--text-secondary);
+}
+.snacky-navbar__item--active {
+  font-family: var(--font-small-bold-family);
+  font-weight: var(--font-small-bold-weight);
+  color: var(--text-primary);
+}
+.snacky-navbar__icon {
+  display: inline-flex;
+  width: 20px;
+  height: 20px;
+  color: var(--icon-secondary);
+}
+.snacky-navbar__item--active .snacky-navbar__icon {
+  color: var(--color-primary-500);
+}
+
+/* src/components/Tab/Tab.css */
+.snacky-tabrow {
+  display: flex;
+  gap: var(--spacing-24);
+  border-bottom: 1px solid var(--border-main);
+}
+.snacky-tab {
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  padding: 0 0 var(--spacing-12) 0;
+  cursor: pointer;
+  font-family: var(--font-body-regular-family);
+  font-size: 14px;
+  line-height: var(--font-body-regular-line-height);
+  color: var(--text-primary);
+  transition: color 0.15s ease;
+}
+.snacky-tab--active {
+  font-family: var(--font-body-semibold-family);
+  font-weight: var(--font-body-semibold-weight);
+  color: var(--color-primary-500);
+  border-bottom-color: var(--color-primary-500);
+}
+
+/* src/components/Header/Header.css */
+.snacky-header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--spacing-16) var(--spacing-8);
+  background: var(--bg-surface);
+}
+.snacky-header__icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: var(--text-primary);
+  cursor: pointer;
+}
+.snacky-header__title-row {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  justify-content: center;
+}
+.snacky-header__title-row--balance {
+  padding-right: 40px;
+}
+.snacky-header__title {
+  font-family: var(--font-h3-bold-family);
+  font-weight: var(--font-h3-bold-weight);
+  font-size: var(--font-h3-bold-size);
+  line-height: var(--font-h3-bold-line-height);
+  letter-spacing: var(--font-h3-bold-letter-spacing);
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* src/components/Banner/Banner.css */
+.snacky-banner-hero {
+  display: block;
+  width: 100%;
+  border-radius: var(--radius-field);
+  box-shadow: var(--shadow-md);
+  object-fit: cover;
+}
+.snacky-banner-square {
+  display: block;
+  width: 100%;
+  aspect-ratio: 360 / 334;
+  border-radius: var(--radius-bubble);
+  object-fit: cover;
+}
+.snacky-banner-full {
+  display: block;
+  width: 100%;
+  aspect-ratio: 360 / 176;
+  object-fit: cover;
+}
+.snacky-banner-point-balance {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--spacing-8) var(--spacing-16);
+  gap: var(--spacing-12);
+  background: var(--bg-surface-highlight);
+  border: 1px solid var(--color-primary-500);
+  border-radius: var(--radius-card);
+  box-sizing: border-box;
+}
+.snacky-banner-point-balance__item {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-icon-label);
+}
+.snacky-banner-point-balance__icon {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+.snacky-banner-point-balance__label {
+  margin: 0;
+  font-family: var(--font-small-regular-family);
+  font-size: var(--font-small-regular-size);
+  color: var(--text-primary);
+}
+.snacky-banner-point-balance__value {
+  margin: 0;
+  font-family: var(--font-small-bold-family);
+  font-weight: var(--font-small-bold-weight);
+  color: var(--text-primary);
+}
+.snacky-banner-point-balance__divider {
+  width: 1px;
+  align-self: stretch;
+  background: var(--color-primary-500);
+}
+.snacky-banner-alert {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 40px;
+  padding: var(--spacing-8) var(--spacing-24);
+  gap: var(--spacing-4);
+  background: var(--bg-surface-accent);
+  box-sizing: border-box;
+}
+.snacky-banner-alert__message {
+  margin: 0;
+  font-family: var(--font-body-regular-family);
+  font-size: var(--font-body-regular-size);
+  color: var(--text-inverse);
+}
+.snacky-banner-alert__countdown {
+  margin: 0;
+  font-family: var(--font-body-semibold-family);
+  font-weight: var(--font-body-semibold-weight);
+  color: var(--text-inverse);
+}
+
+/* src/components/Badge/Badge.css */
+.snacky-badge-wrap {
+  position: relative;
+  display: inline-flex;
+}
+.snacky-badge-notification {
+  position: absolute;
+  top: -8px;
+  right: -10px;
+  min-width: 20px;
+  height: 19px;
+  padding: var(--spacing-2) var(--spacing-4);
+  border-radius: 999px;
+  background: var(--bg-surface-accent);
+  color: var(--text-inverse);
+  font-family: var(--font-caption-semibold-family);
+  font-size: var(--font-caption-semibold-size);
+  font-weight: var(--font-caption-semibold-weight);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+.snacky-discount-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-2) var(--spacing-4);
+  border-radius: var(--radius-tag);
+  background: var(--bg-surface-accent);
+  color: var(--text-inverse);
+  font-family: var(--font-caption-semibold-family);
+  font-size: var(--font-caption-semibold-size);
+  font-weight: var(--font-caption-semibold-weight);
+}
+.snacky-soldout-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-12) var(--spacing-8);
+  border-radius: 999px;
+  background: rgba(51, 51, 51, 0.8);
+  color: var(--text-inverse);
+  font-family: var(--font-small-regular-family);
+  font-size: var(--font-small-regular-size);
+}
+.snacky-variant-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--spacing-8);
+  border-radius: var(--radius-field);
+  background: var(--bg-surface-highlight);
+  border: 1px solid var(--color-primary-500);
+  color: var(--text-primary);
+  font-family: var(--font-caption-regular-family);
+  font-size: var(--font-caption-regular-size);
+}
+
+/* src/components/Callout/Callout.css */
+.snacky-callout {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  max-width: 200px;
+  padding: var(--spacing-12) var(--spacing-8);
+  border-radius: var(--radius-bubble);
+  font-family: var(--font-body-regular-family);
+  font-size: var(--font-body-regular-size);
+  color: var(--text-primary);
+}
+.snacky-callout--received {
+  align-self: flex-start;
+  background: var(--bg-surface);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+.snacky-callout--sent,
+.snacky-callout--pending {
+  align-self: flex-end;
+  background: var(--color-primary-500);
+}
+.snacky-callout__message {
+  margin: 0;
+  width: 100%;
+}
+.snacky-callout__meta {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-4);
+  width: 100%;
+  font-family: var(--font-caption-regular-family);
+  font-size: var(--font-caption-regular-size);
+  color: var(--text-primary);
+  text-align: right;
+}
+.snacky-callout__meta-icon {
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+}
+
+/* src/components/List/List.css */
+.snacky-order-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  width: 100%;
+  padding: var(--spacing-8) var(--spacing-12);
+  background: var(--bg-surface);
+  border-radius: var(--radius-field);
+  box-shadow: var(--shadow-md);
+  box-sizing: border-box;
+  text-align: left;
+}
+.snacky-order-item__top {
+  display: flex;
+  gap: var(--spacing-8);
+  width: 100%;
+}
+.snacky-order-item__thumb-box {
+  width: 56px;
+  height: 56px;
+  flex-shrink: 0;
+  border-radius: var(--radius-field);
+  background: #f4f4f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.snacky-order-item__thumb {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+}
+.snacky-order-item__info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.snacky-order-item__status {
+  font-family: var(--font-small-semibold-family);
+  font-weight: var(--font-small-semibold-weight);
+  font-size: var(--font-small-semibold-size);
+  line-height: 24px;
+  color: var(--text-primary);
+}
+.snacky-order-item__status--cancelled {
+  color: var(--text-error);
+}
+.snacky-order-item__name {
+  font-family: var(--font-small-regular-family);
+  font-size: var(--font-small-regular-size);
+  line-height: 24px;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.snacky-order-item__details {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  width: 100%;
+}
+.snacky-order-item__count {
+  flex: 1;
+  min-width: 0;
+  font-family: var(--font-small-regular-family);
+  font-size: var(--font-small-regular-size);
+  line-height: 24px;
+  color: var(--text-secondary);
+}
+.snacky-order-item__total {
+  flex: 1;
+  font-family: var(--font-small-regular-family);
+  font-size: var(--font-small-regular-size);
+  line-height: 24px;
+  color: var(--text-primary);
+  text-align: right;
+  white-space: nowrap;
+}
+.snacky-order-item__total b {
+  font-weight: var(--font-small-bold-weight);
+  letter-spacing: 0.12px;
+}
+.snacky-order-item__total--cod {
+  flex: 0 1 auto;
+}
+.snacky-order-item__cod {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--spacing-8);
+  border-radius: var(--radius-field);
+  border: 1px solid var(--border-main);
+  background: var(--bg-surface);
+  font-family: var(--font-small-bold-family);
+  font-weight: var(--font-small-bold-weight);
+  font-size: var(--font-small-bold-size);
+  line-height: 24px;
+  letter-spacing: 0.12px;
+  color: var(--text-secondary);
+}
+.snacky-order-item__deadline {
+  width: 100%;
+  background: var(--bg-surface-highlight);
+  text-align: center;
+  font-family: var(--font-small-regular-family);
+  font-size: var(--font-small-regular-size);
+  line-height: 24px;
+  color: var(--text-primary);
+}
+.snacky-order-item__action-row {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+.snacky-notif-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--spacing-8) var(--spacing-12);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-main);
+  border-radius: var(--radius-field);
+  text-align: left;
+}
+.snacky-notif-item--unread {
+  background: var(--bg-surface-highlight);
+}
+.snacky-notif-item__title {
+  font-family: var(--font-small-semibold-family);
+  font-weight: var(--font-small-semibold-weight);
+  font-size: var(--font-small-semibold-size);
+  line-height: 24px;
+  color: var(--text-primary);
+}
+.snacky-notif-item__message {
+  font-family: var(--font-small-regular-family);
+  font-size: var(--font-small-regular-size);
+  line-height: 24px;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* src/components/Accordion/Accordion.css */
+.snacky-accordion {
+  width: 100%;
+  background: var(--bg-surface);
+  border-radius: var(--radius-field);
+  box-shadow: var(--shadow-md);
+  overflow: hidden;
+}
+.snacky-accordion--bordered {
+  border: 1px solid var(--border-main);
+}
+.snacky-accordion__header {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-text-icon);
+  width: 100%;
+  padding: var(--spacing-12) var(--spacing-8);
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  color: var(--text-primary);
+}
+.snacky-accordion__icon {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+.snacky-accordion__title {
+  flex: 1;
+  font-family: var(--font-body-semibold-family);
+  font-size: 14px;
+  font-weight: var(--font-body-semibold-weight);
+}
+.snacky-accordion--icon .snacky-accordion__title {
+  font-family: var(--font-small-semibold-family);
+  font-size: var(--font-small-semibold-size);
+  font-weight: var(--font-small-semibold-weight);
+}
+.snacky-accordion__chevron {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  transition: transform 0.15s ease;
+}
+.snacky-accordion__chevron--open {
+  transform: rotate(180deg);
+}
+.snacky-accordion__panel {
+  padding: 0 var(--spacing-8) var(--spacing-12);
+  font-family: var(--font-small-regular-family);
+  font-size: var(--font-small-regular-size);
+  color: var(--text-primary);
+}
+
+/* src/components/Modal/BottomSheet.css */
+.snacky-sheet-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--bg-overlay-dim);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  z-index: 1000;
+}
+.snacky-sheet {
+  width: 100%;
+  max-width: 480px;
+  max-height: 90vh;
+  overflow-y: auto;
+  background: var(--bg-surface);
+  border-radius: var(--radius-sheet-top) var(--radius-sheet-top) 0 0;
+  padding: var(--spacing-24);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-layout-block);
+}
+.snacky-sheet__handle {
+  width: 36px;
+  height: 4px;
+  border-radius: 999px;
+  background: var(--color-neutral-200);
+  margin: 0 auto var(--spacing-8);
+}
+
+/* src/components/Section/Section.css */
+.snacky-section {
+  width: 100%;
+  padding: var(--spacing-16) var(--spacing-24);
+  background: var(--bg-surface);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-layout-block);
+}
+.snacky-section__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.snacky-section__title {
+  margin: 0;
+  font-family: var(--font-h3-bold-family);
+  font-size: var(--font-h3-bold-size);
+  font-weight: var(--font-h3-bold-weight);
+  color: var(--text-primary);
+}
+.snacky-section__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  padding: var(--spacing-4);
+  border: none;
+  border-radius: var(--radius-full);
+  background: var(--bg-action-primary);
+  color: var(--text-on-action-primary);
+  cursor: pointer;
+}
+.snacky-section__action:hover {
+  background: var(--bg-action-primary-hover);
+}
+
+/* src/components/Avatar/Avatar.css */
+.snacky-avatar {
+  display: block;
+  border-radius: 999px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+.snacky-avatar--sm {
+  width: 32px;
+  height: 32px;
+}
+.snacky-avatar--md {
+  width: 56px;
+  height: 56px;
+}
+.snacky-avatar--lg {
+  width: 72px;
+  height: 72px;
+}
+
+/* src/components/Illustration/Illustration.css */
+.snacky-illustration {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+/* src/components/ProductImage/ProductImage.css */
+.snacky-product-image-wrap {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+}
+.snacky-product-image {
+  display: block;
+  object-fit: contain;
+}
+.snacky-product-image--card,
+.snacky-product-image--details {
+  width: 100%;
+  height: 100%;
+  background: transparent;
+}
+.snacky-product-image-wrap--card {
+  width: 128px;
+  height: 128px;
+}
+.snacky-product-image-wrap--details {
+  width: 200px;
+  height: 200px;
+}
+.snacky-product-image-wrap--list {
+  width: 56px;
+  height: 56px;
+  padding: var(--spacing-4);
+  border-radius: var(--radius-field);
+  box-sizing: border-box;
+}
+.snacky-product-image-wrap--review {
+  width: 48px;
+  height: 48px;
+  padding: var(--spacing-4);
+  border: 1px solid var(--border-main);
+  border-radius: var(--radius-field);
+  box-sizing: border-box;
+}
+.snacky-product-image-wrap--variant {
+  width: 88px;
+  height: 88px;
+  padding: var(--spacing-4);
+  border: 1px solid var(--border-main);
+  border-radius: var(--radius-field);
+  box-sizing: border-box;
+}
+.snacky-product-image-wrap--accordion-modal {
+  width: 24px;
+  height: 24px;
+}
+.snacky-product-image-sold-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.46);
+  border-radius: inherit;
+}
+.snacky-product-image-sold-label {
+  padding: var(--spacing-12) 7px;
+  border-radius: 999px;
+  background: rgba(51, 51, 51, 0.8);
+  color: var(--text-inverse);
+  font-family: var(--font-small-regular-family);
+  font-size: var(--font-small-regular-size);
+}
+
+/* src/components/ProductCard/ProductCard.css */
+.snacky-product-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-12);
+  background: var(--bg-surface);
+  text-align: left;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+}
+.snacky-product-card--list {
+  width: 152px;
+  padding: var(--spacing-12) var(--spacing-8);
+  border-radius: var(--radius-field);
+  box-shadow: var(--shadow-lg);
+}
+.snacky-product-card--details {
+  width: 100%;
+  padding: var(--spacing-12) 0 var(--spacing-16);
+  gap: var(--spacing-8);
+}
+.snacky-product-card__image-wrap {
+  position: relative;
+}
+.snacky-product-card--list .snacky-product-card__image-wrap {
+  width: 128px;
+  height: 128px;
+}
+.snacky-product-card--details .snacky-product-card__image-wrap {
+  width: 200px;
+  height: 200px;
+  margin: 0 auto;
+}
+.snacky-product-card__image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.snacky-product-card__discount {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.snacky-product-card__name {
+  margin: 0;
+  font-family: var(--font-small-regular-family);
+  font-size: var(--font-small-regular-size);
+  color: var(--text-primary);
+}
+.snacky-product-card--details .snacky-product-card__name {
+  font-size: 14px;
+}
+.snacky-product-card__price-row {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-4);
+}
+.snacky-product-card__price {
+  font-family: var(--font-small-bold-family);
+  font-weight: var(--font-small-bold-weight);
+  color: var(--text-primary);
+}
+.snacky-product-card--details .snacky-product-card__price {
+  font-size: 20px;
+  font-weight: 700;
+}
+.snacky-product-card__original-price {
+  font-family: var(--font-small-bold-family);
+  font-weight: var(--font-small-bold-weight);
+  font-size: 10px;
+  color: var(--text-secondary);
+  text-decoration: line-through;
+}
+.snacky-product-card--details .snacky-product-card__original-price {
+  font-size: 16px;
+  font-weight: 700;
+}
+.snacky-product-card__footer-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-8);
+}
+.snacky-product-card__rating {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-icon-label);
+  font-family: var(--font-small-regular-family);
+  font-size: var(--font-small-regular-size);
+  color: var(--text-secondary);
+}
+.snacky-product-card__rating-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--color-primary-500);
+}
+.snacky-product-card__actions {
+  display: flex;
+  gap: var(--gap-cell);
+}
+.snacky-product-card__actions--details button {
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08);
+}
+/*# sourceMappingURL=index.css.map */