@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap");

html,
body,
#root {
  background-color: #f1f5f9;
  color: #0f172a;
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  max-width: 100%;
  overflow-x: hidden;
}
.appBootstrapLoading {
  background: #ffffff;
  min-height: 100vh;
}
button,
input,
select,
textarea {
  font-family: inherit;
}
:root {
  --c1: #f59e0b;
  --c2: #f97316;
  --c3: #fbbf24;
  --c4: #0f172a;
  --c5: #64748b;
  --c6: #e7e5e4;
  --c7: #c62828;
  --c8: #22c55e;
  --c9: #f5f5f4;
  --c10: #ffffffd9;
  --c11: #ffedd5;
  --c12: #d1fae5;
  --c13: #fef3c7;
  --c14: #ffffffd9;
  --c15: #fffbeb;
  --c16: #fff1f2;
  --c25: #ffffff;
  --c1-rgb: 245, 158, 11;
  --c2-rgb: 249, 115, 22;
  --c3-rgb: 251, 191, 36;
  --c4-rgb: 15, 23, 42;
  --c5-rgb: 100, 116, 139;
  --c6-rgb: 231, 229, 228;
  --c7-rgb: 198, 40, 40;
  --c8-rgb: 34, 197, 94;
  --c9-rgb: 245, 245, 244;
  --c10-rgb: 255, 255, 255;
  --c11-rgb: 255, 237, 213;
  --c12-rgb: 209, 250, 229;
  --c13-rgb: 254, 243, 199;
  --c14-rgb: 255, 255, 255;
  --c15-rgb: 255, 251, 235;
  --c16-rgb: 255, 241, 242;
  --c25-rgb: 255, 255, 255;
}
.x036 {
  /*mainRef in ProfileSettingsPage  */
  flex-grow: 1;
}
.x03b {
  /*rightFormRef in NotificationPreferencesPage  */
  flex-grow: 1;
  margin-left: 24px;
  padding: 32px;
}
.x05a {
  /*leftNavRef in ProfileSettingsPage  */
  width: 220px;
}
.x08 {
  /*hintRef in ExpiryAlertWidget  */
  color: var(--c5);
  font-size: 14px;
}
.x0b {
  /*mainRef in DashboardPage  */
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  padding-left: 0;
}
.x0bd {
  /*titleRef in ExpiryAlertWidget  */
  color: var(--c4);
  font-size: 18px;
  font-weight: 600;
}
.x0c {
  /*contentRef in OrganizationSettingsPage  */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow-y: auto;
  padding: 24px;
}
.x0dc {
  /*listRef in WarehousePickerWidget  */
  padding-bottom: 8px;
  padding-top: 8px;
}
.x0e {
  /*pageTitleRef in DashboardPage  */
  color: var(--c4);
  font-size: 20px;
  font-weight: 600;
}
.x0ec {
  /*actionsRowRef in PurchaseOrderFormPage  */
  margin-top: 24px;
}
.x0fc {
  /*tableRef in RecentMovementsWidget  */
  margin-top: 16px;
  padding: 16px;
}
.x12 {
  /*forgotRef in LoginFormWidget  */
  margin-top: 16px;
}
.x126 {
  /*bellRef in NotificationCenterWidget  */
  padding-bottom: 8px;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 8px;
}
.x127 {
  /*spacer2Ref in OrganizationSettingsPage  */
  margin-bottom: 16px;
}
.x13 {
  /*toolbarRowRef in PurchaseOrderListPage  */
  margin-bottom: 16px;
}
.x14 {
  /*badgeRef in NotificationCenterWidget  */
  color: var(--c1);
  font-size: 12px;
  font-weight: 700;
  margin-left: 8px;
}
.x149 {
  /*orgNavRef in OrganizationSettingsPage  */
  margin-top: 8px;
}
.x17 {
  /*spacer1Ref in OrganizationSettingsPage  */
  margin-bottom: 16px;
}
.x18 {
  /*kpiSpacer2Ref in DashboardPage  */
  margin-left: 12px;
  margin-right: 12px;
}
.x1a7 {
  /*iconChildWrapper in IconButton  */
  cursor: pointer;
}
.x1b {
  /*mainRef in PurchaseOrderFormPage  */
  flex-grow: 1;
}
.x1c {
  /*titleRef in IMSAppHeaderWidget  */
  color: var(--c4);
  font-size: 20px;
  font-weight: 700;
}
.x1cd {
  /*rightFormRef in ProfileSettingsPage  */
  flex-grow: 1;
  margin-left: 24px;
  padding: 32px;
}
.x1f {
  /*stockValueRef in DashboardPage  */
  color: var(--c5);
  font-size: 13px;
  margin-bottom: 24px;
}
.x21 {
  /*hintRef in NotificationPreferencesPage  */
  color: var(--c5);
  font-size: 13px;
  margin-bottom: 24px;
}
.x226 {
  /*leftNavRef in NotificationPreferencesPage  */
  width: 220px;
}
.x26 {
  /*orgRef in IMSAppHeaderWidget  */
  color: var(--c5);
  font-size: 13px;
}
.x278b {
  /*titleRef in LineItemEditorWidget  */
  color: var(--c4);
  font-size: 18px;
  font-weight: 600;
}
.x28 {
  /*f2DescRef in LandingPage  */
  color: var(--c5);
  font-size: 14px;
  margin-top: 8px;
}
.x295 {
  /*trendRef in KPICardWidget  */
  color: var(--c8);
  font-size: 12px;
  margin-top: 8px;
}
.x29b {
  /*spacer2Ref in ProfileSettingsPage  */
  margin-bottom: 16px;
}
.x2b {
  /*dialogRef in ConfirmDeleteDialogWidget  */
  width: 480px;
}
.x2b4 {
  /*settingsTitleRef in NotificationPreferencesPage  */
  color: var(--c4);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
}
.x2ca {
  /*saveRef in OrganizationSettingsPage  */
  margin-top: 24px;
}
.x2cc {
  /*f2TitleRef in LandingPage  */
  color: var(--c4);
  font-size: 18px;
  font-weight: 600;
}
.x2e {
  /*formTitleRef in ProfileSettingsPage  */
  color: var(--c4);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 24px;
}
.x2f {
  /*pickerRef in SupplierPickerWidget  */
  padding: 16px;
}
.x31 {
  /*toggleOtpRef in LoginPage  */
  margin-top: 16px;
}
.x33 {
  /*countRef in LowStockTableWidget  */
  color: var(--c5);
  font-size: 13px;
  margin-bottom: 16px;
  margin-top: 8px;
}
.x34 {
  /*listRef in ExpiryAlertWidget  */
  margin-top: 16px;
  padding: 16px;
}
.x36 {
  /*titleRef in ForgotPasswordPage  */
  color: var(--c4);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 24px;
}
.x36e {
  /*statusRef in StatusBadgeWidget  */
  color: var(--c4);
  font-size: 12px;
  font-weight: 600;
}
.x38 {
  /*profileRef in IMSAppHeaderWidget  */
  margin-right: 12px;
}
.x39 {
  /*featuresRef in LandingPage  */
  padding-bottom: 24px;
  padding-left: 32px;
  padding-right: 32px;
  padding-top: 24px;
}
.x3b {
  /*titleRef in EmptyStateWidget  */
  color: var(--c4);
  font-size: 18px;
  font-weight: 600;
}
.x3ba {
  /*titleRef in LoginFormWidget  */
  color: var(--c4);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}
.x3bf {
  /*contentRef in NotificationPreferencesPage  */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow-y: auto;
  padding: 24px;
}
.x3c {
  /*errorRef in IMSInputFieldWidget  */
  margin-top: 4px;
}
.x41 {
  /*actionRef in EmptyStateWidget  */
  margin-top: 24px;
}
.x42 {
  /*cardRef in ChangePasswordPage  */
  width: 480px;
}
.x460 {
  /*logoutRef in IMSidebarWidget  */
  margin-top: 12px;
}
.x467 {
  /*iconRef in KPICardWidget  */
  font-size: 24px;
  margin-bottom: 8px;
}
.x48 {
  /*countRef in ExpiryAlertWidget  */
  color: var(--c5);
  font-size: 13px;
}
.x4a {
  /*cardRef in EmptyStateWidget  */
  padding: 32px;
}
.x52 {
  /*brandRef in IMSidebarWidget  */
  padding-bottom: 20px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 20px;
}
.x53d {
  /*poRef in PurchaseOrderListPage  */
  color: var(--c4);
  font-size: 16px;
  font-weight: 600;
}
.x54 {
  /*pageRootRef in LoginPage  */
  align-items: center;
  justify-content: center;
}
.x55a {
  /*spacer3Ref in PurchaseOrderFormPage  */
  margin-bottom: 16px;
}
.x564 {
  /*spacerRef in OtpLoginWidget  */
  margin-bottom: 16px;
}
.x57 {
  /*feature3Ref in LandingPage  */
  margin-left: 8px;
  padding: 24px;
}
.x570 {
  /*formTitleRef in NotificationPreferencesPage  */
  color: var(--c4);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}
.x5ab {
  /*spacer3Ref in OrganizationSettingsPage  */
  margin-bottom: 16px;
}
.x5c {
  /*submitRef in LoginFormWidget  */
  margin-top: 24px;
}
.x5e {
  /*supplierRef in PurchaseOrderListPage  */
  color: var(--c5);
  font-size: 13px;
  margin-top: 4px;
}
.x5f {
  /*titleRef in OtpLoginWidget  */
  color: var(--c4);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 24px;
}
.x60 {
  /*footerRef in IMSidebarWidget  */
  padding: 16px;
}
.x61 {
  /*widgetsSpacerRef in DashboardPage  */
  margin-bottom: 24px;
}
.x61f {
  /*templateHint3Ref in NotificationPreferencesPage  */
  color: var(--c4);
  font-size: 14px;
}
.x65 {
  /*f1DescRef in LandingPage  */
  color: var(--c5);
  font-size: 14px;
  margin-top: 8px;
}
.x65c {
  /*spacer1Ref in PurchaseOrderFormPage  */
  margin-bottom: 16px;
}
.x67 {
  /*cancelRef in PurchaseOrderFormPage  */
  margin-right: 8px;
}
.x69 {
  /*saveRef in ChangePasswordPage  */
  margin-top: 24px;
}
.x692 {
  /*templateHint2Ref in NotificationPreferencesPage  */
  color: var(--c4);
  font-size: 14px;
  margin-bottom: 12px;
}
.x6a {
  /*titleRowRef in DashboardPage  */
  margin-bottom: 24px;
}
.x6c {
  /*templatesPanelRef in NotificationPreferencesPage  */
  padding: 16px;
}
.x6d {
  /*movementsSpacerRef in DashboardPage  */
  margin-top: 24px;
}
.x6de {
  /*spacer4Ref in OrganizationSettingsPage  */
  margin-bottom: 16px;
}
.x70 {
  /*countRef in PurchaseOrderListPage  */
  color: var(--c5);
  font-size: 14px;
}
.x76 {
  /*titleRef in ConfirmDeleteDialogWidget  */
  color: var(--c4);
  font-size: 18px;
  font-weight: 700;
}
.x76c {
  /*f3DescRef in LandingPage  */
  color: var(--c5);
  font-size: 14px;
  margin-top: 8px;
}
.x79 {
  /*mainRef in ChangePasswordPage  */
  flex-grow: 1;
  padding: 24px;
}
.x79b {
  /*notificationsNavRef in NotificationPreferencesPage  */
  margin-top: 8px;
}
.x7a {
  /*notificationsNavRef in ProfileSettingsPage  */
  margin-top: 8px;
}
.x7b {
  /*expiryColRef in DashboardPage  */
  flex-grow: 1;
}
.x7cb {
  /*editButtonRef in PurchaseOrderListPage  */
  margin-left: 8px;
  margin-right: 8px;
}
.x7e {
  /*messageRef in EmptyStateWidget  */
  color: var(--c5);
  font-size: 14px;
  margin-top: 12px;
}
.x83 {
  /*subtitleRef in IMSHeroWidget  */
  color: var(--c5);
  font-size: 16px;
  margin-bottom: 32px;
  margin-top: 16px;
}
.x84 {
  /*hintRef in LowStockTableWidget  */
  color: var(--c5);
  font-size: 14px;
}
.x868 {
  /*titleRef in IMSHeroWidget  */
  color: var(--c4);
  font-size: 36px;
  font-weight: 700;
}
.x89 {
  /*subtitleRef in LoginFormWidget  */
  color: var(--c5);
  font-size: 14px;
  margin-bottom: 24px;
}
.TextView.signupHintText {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 20px;
  margin-top: -12px;
}
.x8b {
  /*listCardRef in PurchaseOrderListPage  */
  margin-bottom: 12px;
  padding: 16px;
}
.x8d8 {
  /*verifyRef in OtpLoginWidget  */
  margin-top: 12px;
}
.x8e {
  /*saveRef in ProfileSettingsPage  */
  margin-top: 24px;
}
.x8f1 {
  /*selectRef in SupplierPickerWidget  */
  margin-top: 12px;
}
.x90 {
  /*tableRef in LowStockTableWidget  */
  padding: 16px;
}
.x94 {
  /*countRef in RecentMovementsWidget  */
  color: var(--c5);
  font-size: 13px;
}
.x96 {
  /*spacer2Ref in ChangePasswordPage  */
  margin-bottom: 16px;
}
.x963 {
  /*messageRef in ConfirmDeleteDialogWidget  */
  color: var(--c5);
  font-size: 14px;
  margin-bottom: 32px;
  margin-top: 24px;
}
.x97 {
  /*settingsTitleRef in ProfileSettingsPage  */
  color: var(--c4);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
}
.x98 {
  /*feature2Ref in LandingPage  */
  margin-left: 8px;
  margin-right: 8px;
  padding: 24px;
}
.x99 {
  /*spacer6Ref in OrganizationSettingsPage  */
  margin-bottom: 16px;
}
.x9c {
  /*spacerRef in LoginFormWidget  */
  margin-bottom: 16px;
}
.x9f {
  /*hintRef in LineItemEditorWidget  */
  color: var(--c5);
  font-size: 14px;
}
.x9f9 {
  /*orgNavRef in ProfileSettingsPage  */
  margin-top: 8px;
}
.xa0 {
  /*saveRef in NotificationPreferencesPage  */
  margin-top: 24px;
}
.xa1 {
  /*pageRootRef in ForgotPasswordPage  */
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.xa3 {
  /*iconRef in NotificationCenterWidget  */
  color: var(--c4);
  font-size: 22px;
}
.xa4 {
  /*spacer1Ref in ChangePasswordPage  */
  margin-bottom: 16px;
}
.xa6 {
  /*orgRef in ChangePasswordPage  */
  color: var(--c5);
  font-size: 13px;
  margin-bottom: 8px;
}
.xa7 {
  /*spacer1Ref in ProfileSettingsPage  */
  margin-bottom: 16px;
}
.Container.IMSAppHeaderWidget.glassPanel.xad {
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  overflow: hidden;
  padding: 10px 16px;
}
.xaf {
  /*f1TitleRef in LandingPage  */
  color: var(--c4);
  font-size: 18px;
  font-weight: 600;
}
.xaf5 {
  /*securityNavRef in NotificationPreferencesPage  */
  margin-top: 8px;
}
.xaff {
  /*linesRef in LineItemEditorWidget  */
  margin-top: 16px;
  padding: 16px;
}
.xb1 {
  /*mainRef in NotificationPreferencesPage  */
  flex-grow: 1;
}
.xb1e {
  /*hintRef in RecentMovementsWidget  */
  color: var(--c5);
  font-size: 14px;
}
.xb2 {
  /*cardRef in ForgotPasswordPage  */
  width: 480px;
}
.xb3 {
  /*listSpacerRef in PurchaseOrderListPage  */
  margin-top: 16px;
}
.xb5 {
  /*titleRef in ChangePasswordPage  */
  color: var(--c4);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 24px;
}
.xba {
  /*userNameRef in IMSidebarWidget  */
  color: var(--c4);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  width: 100%;
}
.xbb {
  /*titleRef in RecentMovementsWidget  */
  color: var(--c4);
  font-size: 18px;
  font-weight: 600;
}
.xbcc {
  /*mainRef in PurchaseOrderListPage  */
  flex-grow: 1;
}
.xbe {
  /*securityNavRef in ProfileSettingsPage  */
  margin-top: 8px;
}
.xc0 {
  /*cancelRef in ConfirmDeleteDialogWidget  */
  margin-right: 12px;
}
.xc1 {
  /*heroRef in IMSHeroWidget  */
  padding-bottom: 48px;
  padding-left: 32px;
  padding-right: 32px;
  padding-top: 48px;
}
.xc1c {
  /*contentRef in ProfileSettingsPage  */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow-y: auto;
  padding: 24px;
}
.xc2 {
  /*formTitleRef in OrganizationSettingsPage  */
  color: var(--c4);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 24px;
}
.xc6 {
  /*viewAllRef in NotificationCenterWidget  */
  margin-left: 12px;
}
.xc64 {
  /*notificationsNavRef in OrganizationSettingsPage  */
  margin-top: 8px;
}
.xd0 {
  /*leftNavRef in OrganizationSettingsPage  */
  width: 220px;
}
.xd2 {
  /*backRef in ForgotPasswordPage  */
  margin-top: 16px;
}
.xd4 {
  /*roleRef in ProfileSettingsPage  */
  color: var(--c5);
  font-size: 14px;
  margin-top: 16px;
}
.xd6 {
  /*submitRef in ForgotPasswordPage  */
  margin-top: 24px;
}
.xd68 {
  /*securityNavRef in OrganizationSettingsPage  */
  margin-top: 8px;
}
.xd8 {
  /*errorRef in LoginFormWidget  */
  color: var(--c7);
  font-size: 13px;
  margin-top: 16px;
}
.xd9 {
  /*contentRef in PurchaseOrderListPage  */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow-y: auto;
  padding: 24px;
}
.xd9d {
  /*pickerRef in WarehousePickerWidget  */
  padding: 16px;
}
.xde {
  /*kpiSpacer1Ref in DashboardPage  */
  margin-left: 12px;
  margin-right: 12px;
}
.xde6 {
  /*landingColumnRef in LandingPage  */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.xdf {
  /*variantRef in KPICardWidget  */
  color: var(--c8);
  font-size: 10px;
  margin-top: 4px;
}
.xe2 {
  /*settingsTitleRef in OrganizationSettingsPage  */
  color: var(--c4);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
}
.xe5b {
  /*mainRef in OrganizationSettingsPage  */
  flex-grow: 1;
}
.xe7 {
  /*f3TitleRef in LandingPage  */
  color: var(--c4);
  font-size: 18px;
  font-weight: 600;
}
.xe844 {
  /*badgeRef in StatusBadgeWidget  */
  padding-bottom: 4px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 4px;
}
.xea {
  /*templateHint1Ref in NotificationPreferencesPage  */
  color: var(--c4);
  font-size: 14px;
  margin-bottom: 12px;
}
.xeb {
  /*titleRef in LowStockTableWidget  */
  color: var(--c4);
  font-size: 18px;
  font-weight: 600;
}
.xec9 {
  /*textChildWrapper in TextButton  */
  cursor: pointer;
}
.xee7 {
  /*spacer2Ref in ForgotPasswordPage  */
  margin-bottom: 16px;
}
.xef5 {
  /*sendOtpRef in OtpLoginWidget  */
  margin-top: 24px;
}
.xef7 {
  /*navRef in IMSidebarWidget  */
  padding-bottom: 8px;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 8px;
}
.xf0 {
  /*orgNavRef in NotificationPreferencesPage  */
  margin-top: 8px;
}
.xf28 {
  /*contentRef in PurchaseOrderFormPage  */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow-y: auto;
  padding: 24px;
}
.xf2c {
  /*rightFormRef in OrganizationSettingsPage  */
  flex-grow: 1;
  margin-left: 24px;
  padding: 32px;
}
.xf41 {
  /*spacer5Ref in OrganizationSettingsPage  */
  margin-bottom: 16px;
}
.xf6a {
  /*spacer2Ref in PurchaseOrderFormPage  */
  margin-bottom: 16px;
}
.xf89 {
  /*feature1Ref in LandingPage  */
  margin-right: 8px;
  padding: 24px;
}
.xfa {
  /*lowStockColRef in DashboardPage  */
  flex-grow: 1;
  margin-right: 12px;
}
.xfb {
  /*contentRef in DashboardPage  */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow-y: auto;
  padding: 24px;
}
.xfb5 {
  /*spacer1Ref in ForgotPasswordPage  */
  margin-bottom: 16px;
}
.xfb9a {
  /*hintRef in WarehousePickerWidget  */
  color: var(--c5);
  font-size: 14px;
}
.Container.formField {
  /*Global Style  */
  margin-bottom: 16px;
}

.Container.formField .InputField {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background-color: #ffffff;
  color: #0f172a;
  font-size: 14px;
  padding: 8px 12px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.Container.formField .InputField:focus {
  border-color: #fbbf24;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.3);
}
.Container.formField .roleSelect {
  appearance: none;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-sizing: border-box;
  color: #0f172a;
  cursor: pointer;
  font-size: 14px;
  height: 38px;
  outline: none;
  padding: 8px 36px 8px 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.Container.formField .roleSelect:focus {
  border-color: #fbbf24;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.3);
}
.Container.formField .roleSelect:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.Container.formFieldInline {
  /*Global Style  */
  margin-bottom: 12px;
}
.Container.glassCard,
div.glassCard {
  /*Global Style  */
  background-color: #ffffff;
  border-color: #e2e8f0;
  border-radius: 12px;
  border-style: solid;
  border-width: 1px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 12px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  padding: 24px;
}

.Container.LoginFormWidget.glassCard {
  width: 400px;
}
.authInputWrap {
  position: relative;
  width: 100%;
}
.authInputWrap .authFieldIcon {
  align-items: center;
  color: #94a3b8;
  display: flex;
  font-size: 18px;
  height: 38px;
  justify-content: center;
  left: 0;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  z-index: 2;
}
.authInputWrap:focus-within .authFieldIcon {
  color: #f59e0b;
}
.Container.LoginFormWidget .authInputWrap .InputField,
.Container.SignupFormWidget .authInputWrap .InputField,
.Container.ForgotPasswordPage .authInputWrap .InputField {
  box-sizing: border-box;
  height: 38px;
  padding-left: 40px;
  width: 100%;
}
.TextButton.loginAuthLink ui-center,
.TextButton.loginAuthLink ui-center .TextView {
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
}
.TextButton.loginAuthLink:hover ui-center,
.TextButton.loginAuthLink:hover ui-center .TextView {
  color: #334155;
}
.Container.LoginPage.pageBackground,
.Container.SignupPage.pageBackground,
.Container.ForgotPasswordPage.pageBackground {
  background-color: #f4f7fb;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(34, 197, 94, 0.07), transparent 42%),
    radial-gradient(circle at 88% 82%, rgba(249, 115, 22, 0.07), transparent 42%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='%2364748b' opacity='0.05'%3E%3Ctext x='28' y='58' font-size='30'%3E%F0%9F%9B%92%3C/text%3E%3Ctext x='175' y='52' font-size='26'%3E%F0%9F%8D%8E%3C/text%3E%3Ctext x='95' y='145' font-size='28'%3E%F0%9F%A5%95%3C/text%3E%3Ctext x='210' y='155' font-size='24'%3E%F0%9F%8D%9E%3C/text%3E%3Ctext x='35' y='225' font-size='26'%3E%F0%9F%8F%AA%3C/text%3E%3Ctext x='185' y='235' font-size='28'%3E%F0%9F%A5%AC%3C/text%3E%3Ctext x='120' y='265' font-size='24'%3E%F0%9F%93%A6%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: 100% 100%, 100% 100%, 300px 300px;
}
.Container.LoginPage.loginSplitPage,
.Container.SignupPage.loginSplitPage {
  align-items: stretch;
  background: #ffffff;
  background-image: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: stretch;
  max-height: 100%;
  max-width: 100%;
  min-height: 0;
  overflow: hidden;
  overflow-x: hidden;
  padding: 0;
  width: 100%;
}
.loginSplit {
  align-items: stretch;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  height: 100%;
  max-width: 100%;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}
.loginSplit,
.loginSplit * {
  box-sizing: border-box;
}
.Container.SignupPage .loginPromoPane {
  display: flex;
  box-sizing: border-box;
  flex: 1 1 50%;
  flex-direction: column;
  height: 100%;
  max-width: 50%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
  background-color: #14532d;
  background-image: url("/images/loginpage.png");
  background-position: center;
  background-size: cover;
}
.loginHeroPane {
  display: flex;
  box-sizing: border-box;
  flex: 1 1 50%;
  flex-direction: column;
  height: 100%;
  max-width: 50%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
}
img.loginHeroImage,
video.loginHeroVideo {
  display: block;
  height: 100%;
  inset: 0;
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center center;
  position: absolute;
  width: 100%;
}
.loginHeroScrim {
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(255, 255, 255, 0.22) 42%,
      rgba(255, 255, 255, 0.04) 68%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.64) 0%,
      rgba(255, 255, 255, 0.26) 34%,
      rgba(255, 255, 255, 0.05) 58%,
      transparent 78%
    );
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
.loginPromo {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
  padding: 48px 40px 16px;
  position: relative;
  z-index: 2;
}
.loginPromoBadge {
  align-items: center;
  background: rgba(220, 252, 231, 0.92);
  border-radius: 999px;
  color: #166534;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
  padding: 6px 12px;
  width: fit-content;
}
.loginPromoBadgeIcon {
  color: #16a34a;
  display: inline-flex;
}
h2.loginPromoTitle,
.loginPromoTitle {
  color: #fc543c;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.18;
  margin: 0;
  max-width: none;
  text-align: left;
  text-shadow: none;
  width: auto;
}
.loginPromoTitleLine {
  color: inherit;
  display: inline;
  white-space: normal;
}
h2.loginPromoTitle .loginPromoBrand,
.loginPromoTitle .loginPromoBrand {
  color: #16a34a;
}
p.loginPromoText,
.loginPromoText {
  color: #1e293b;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
  margin: 0;
  max-width: 470px;
  text-align: left;
  width: 100%;
}
.loginPromoTiles {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 4px;
  width: 100%;
}
.loginPromoTile {
  align-items: center;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  font-size: 11px;
  font-weight: 700;
  gap: 8px;
  line-height: 1.25;
  padding: 12px 8px 10px;
  text-align: center;
}
.loginPromoTileIcon {
  align-items: center;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  color: #bbf7d0;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}
.loginStatsBar {
  background: rgba(15, 61, 32, 0.86);
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: auto;
  padding: 12px 16px 14px;
  position: relative;
  z-index: 2;
}
.loginStatItem {
  align-items: center;
  color: #ecfdf3;
  display: flex;
  font-size: 11px;
  font-weight: 700;
  gap: 8px;
  line-height: 1.3;
  min-width: 0;
}
.loginStatIcon {
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #86efac;
  display: inline-flex;
  flex-shrink: 0;
  height: 28px;
  justify-content: center;
  width: 28px;
}
.loginCard {
  align-items: stretch;
  align-self: center;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  max-width: 400px;
  min-height: 0;
  overflow: visible;
  padding: 4px 0 40px;
  position: relative;
  width: min(100%, 400px);
  z-index: 1;
}
.loginFormPane {
  align-items: center;
  background-color: #ffffff;
  background-image:
    radial-gradient(ellipse 280px 220px at 100% 0%, rgba(34, 197, 94, 0.16), transparent 70%),
    radial-gradient(ellipse 320px 260px at 100% 100%, rgba(22, 163, 74, 0.14), transparent 72%),
    radial-gradient(ellipse 240px 200px at 0% 100%, rgba(34, 197, 94, 0.1), transparent 70%),
    radial-gradient(ellipse 200px 160px at 0% 0%, rgba(74, 222, 128, 0.1), transparent 68%);
  box-sizing: border-box;
  display: flex;
  flex: 1 1 50%;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  max-width: 50%;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 32px 48px 56px;
  position: relative;
  width: 100%;
}
.loginFormPane::before {
  display: none;
}
.loginCornerShape {
  pointer-events: none;
  position: absolute;
  z-index: 0;
}
.loginCornerTL {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Ccircle cx='0' cy='0' r='180' fill='%2322c55e' opacity='0.14'/%3E%3Ccircle cx='0' cy='0' r='128' fill='none' stroke='%2386efac' stroke-width='12' opacity='0.55'/%3E%3Ccircle cx='0' cy='0' r='84' fill='none' stroke='%23bbf7d0' stroke-width='5' opacity='0.85'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  height: 260px;
  left: -72px;
  top: -72px;
  width: 260px;
}
.loginCornerTR {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='240' viewBox='0 0 280 240'%3E%3Cpath d='M280 0c-40 8-90 10-130 42-36 28-50 74-42 118 38-22 92-38 172-28V0z' fill='%2316a34a' opacity='0.12'/%3E%3Cpath d='M90 18c52 20 92 62 104 118' fill='none' stroke='%2386efac' stroke-width='10' opacity='0.55'/%3E%3Cpath d='M280 0c-86 12-148 70-158 158' fill='none' stroke='%23bbf7d0' stroke-width='4' opacity='0.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  height: 240px;
  right: -36px;
  top: -28px;
  width: 280px;
}
.loginCornerBL {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Ccircle cx='0' cy='240' r='168' fill='%2322c55e' opacity='0.12'/%3E%3Ccircle cx='20' cy='220' r='64' fill='none' stroke='%2386efac' stroke-width='8' opacity='0.5'/%3E%3Ccircle cx='20' cy='220' r='32' fill='%23dcfce7' opacity='0.75'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  bottom: -56px;
  height: 240px;
  left: -64px;
  width: 240px;
}
.loginCornerBR {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='280' viewBox='0 0 300 280'%3E%3Cpath d='M300 80c-12 88-78 176-210 200 62-22 128-86 148-158 12-40 24-58 62-42z' fill='%2316a34a' opacity='0.14'/%3E%3Cpath d='M180 280c54-34 96-98 108-168' fill='none' stroke='%2386efac' stroke-width='10' opacity='0.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  bottom: -64px;
  height: 280px;
  right: -56px;
  width: 300px;
}
.loginDecorDots {
  background-image: radial-gradient(#4ade80 1.35px, transparent 1.5px);
  background-size: 12px 12px;
  opacity: 0.7;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}
.loginDecorDotsTR {
  height: 118px;
  right: 36px;
  top: 28px;
  width: 118px;
}
.loginDecorDotsBR {
  bottom: 36px;
  height: 88px;
  right: 28px;
  width: 88px;
}
.loginDecorDotsBL {
  bottom: 32px;
  height: 72px;
  left: 28px;
  width: 72px;
}
.loginDecorIcon {
  color: #86efac;
  opacity: 0.72;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}
.loginDecorLeafTR {
  height: 72px;
  right: 46px;
  top: 132px;
  transform: rotate(18deg);
  width: 72px;
}
.loginDecorLeafML {
  height: 64px;
  left: 18px;
  opacity: 0.55;
  top: 46%;
  transform: rotate(-22deg);
  width: 64px;
}
.loginDecorCartBR {
  bottom: 118px;
  height: 56px;
  opacity: 0.5;
  right: 42px;
  transform: rotate(8deg);
  width: 56px;
}
.loginDecorLeafBR {
  bottom: 52px;
  height: 78px;
  opacity: 0.58;
  right: 128px;
  transform: rotate(-12deg);
  width: 78px;
}
.loginPanel {
  align-items: stretch;
  align-self: stretch;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  gap: 0;
  justify-content: flex-start;
  margin: 0;
  max-width: 100%;
  min-height: 0;
  overflow: visible;
  padding: 0;
  position: relative;
  width: 100%;
  z-index: 1;
}
.loginPanel h1,
.loginPanel h2,
.loginPanel p {
  font-family: inherit;
}
.loginHomeLink {
  align-items: center;
  align-self: flex-start;
  appearance: none;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #166534;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  gap: 6px;
  margin: 0 0 4px;
  padding: 8px 14px 8px 10px;
}
.loginHomeLink:hover {
  background: #f0fdf4;
  border-color: #86efac;
  color: #15803d;
}
.loginHomeLinkIcon {
  color: currentColor;
  display: inline-flex;
}
.loginPageLogoWrap,
button.loginPageLogoWrap {
  align-items: center;
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  margin: 0 auto 6px;
  max-width: 100%;
  overflow: visible;
  padding: 0;
  width: 100%;
}
img.loginPageLogo {
  clip-path: none;
  display: block;
  height: 80px;
  margin: 0 auto;
  max-width: 200px;
  object-fit: contain;
  width: auto;
}
.loginBrandHead {
  margin-bottom: 12px;
  text-align: center;
  width: 100%;
}
.loginBrandTag {
  color: #64748b;
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  margin: 6px 0 0;
}
.loginWelcome {
  color: #0f172a;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
  margin: 0 0 8px;
  text-align: center;
  width: 100%;
}
.loginWelcomeSub {
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.45;
  margin: 0 0 14px;
  text-align: center;
  width: 100%;
}
.loginWelcomeRule {
  background: #22c55e;
  border-radius: 99px;
  flex-shrink: 0;
  height: 3px;
  margin: 0 auto 20px;
  width: 46px;
}
.loginModeTabs {
  align-self: stretch;
  background: #f1f5f9;
  border-radius: 12px;
  box-sizing: border-box;
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 20px;
  max-width: 100%;
  padding: 4px;
  width: 100%;
}
.loginModeTab {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: #64748b;
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  height: 40px;
  justify-content: center;
  letter-spacing: 0.01em;
  line-height: 1.2;
  min-width: 0;
  padding: 0 8px;
  text-align: center;
  white-space: nowrap;
}
.loginModeTab:hover {
  color: #15803d;
}
.loginModeTabActive {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  color: #15803d;
}
.loginPanelForm {
  align-self: stretch;
  border: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 0;
  max-width: 100%;
  padding: 0;
  width: 100%;
}
.loginFieldGroup {
  display: flex;
  flex-direction: column;
  margin: 0 0 16px;
  width: 100%;
}
.loginFieldLabel {
  color: #334155;
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 8px;
  text-align: left;
  width: 100%;
}
.loginField {
  align-items: center;
  align-self: stretch;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-sizing: border-box;
  display: flex;
  gap: 12px;
  height: 50px;
  margin-bottom: 0;
  max-width: 100%;
  padding: 0 16px;
  position: relative;
  width: 100%;
}
.loginField:focus-within {
  border-color: #86efac;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
}
.loginFieldIcon {
  color: #94a3b8;
  display: inline-flex;
  flex-shrink: 0;
}
.loginFieldIcon svg {
  height: 24px;
  width: 24px;
}
.loginFieldInput {
  background: transparent;
  border: 0;
  color: #0f172a;
  flex: 1 1 auto;
  font-family: inherit;
  font-size: 16px;
  height: 100%;
  min-width: 0;
  outline: none;
  padding: 0;
  width: 100%;
}
.loginFieldInputPlain {
  padding-left: 0;
}
.loginFieldInputWithToggle {
  padding-right: 36px;
}
.loginOtpToggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  padding: 6px;
}
.loginOtpToggle:hover { color: #15803d; }
.loginOtpToggle:focus-visible { outline: 2px solid #86efac; outline-offset: 2px; }
.loginPasswordToggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  margin-right: -8px;
  padding: 6px;
}
.loginPasswordToggle:hover,
.loginPasswordToggle:focus-visible {
  color: #334155;
}
.loginPasswordToggle:focus-visible {
  outline: 2px solid #86efac;
  outline-offset: 2px;
}
.loginPrimaryBtn {
  align-self: stretch;
  appearance: none;
  background: #2f9e44;
  border: 0;
  border-radius: 12px;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  height: 50px;
  letter-spacing: 0.08em;
  margin-top: 4px;
  max-width: 100%;
  text-transform: uppercase;
  width: 100%;
}
.loginPrimaryBtn:hover {
  background: #22863a;
}
.loginPrimaryBtn:disabled {
  cursor: wait;
  opacity: 0.7;
}
.loginFieldInput:read-only {
  color: #334155;
}
.loginChangeLink:disabled,
.loginTextLink:disabled {
  cursor: wait;
  opacity: 0.6;
}
.loginDivider {
  align-items: center;
  color: #94a3b8;
  display: flex;
  font-size: 13px;
  font-weight: 700;
  gap: 16px;
  letter-spacing: 0.08em;
  margin: 22px 0;
  text-transform: uppercase;
}
.loginDivider::before,
.loginDivider::after {
  background: #e2e8f0;
  content: "";
  flex: 1 1 auto;
  height: 1px;
}
.loginWhatsAppBtn {
  align-items: center;
  appearance: none;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  color: #334155;
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  gap: 10px;
  height: 58px;
  justify-content: center;
  width: 100%;
}
.loginWhatsAppBtn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}
.loginWhatsAppBtn svg {
  color: #25d366;
  height: 22px;
  width: 22px;
}
.loginSecureNote {
  align-items: flex-start;
  align-self: stretch;
  color: #94a3b8;
  display: flex;
  font-size: 12px;
  gap: 8px;
  justify-content: center;
  line-height: 1.45;
  margin: 18px auto 0;
  max-width: 100%;
  text-align: center;
  width: 100%;
}
.loginSecureIcon {
  color: #94a3b8;
  display: inline-flex;
  flex-shrink: 0;
  margin-top: 1px;
}
.loginChangeLink,
.loginResendLink {
  appearance: none;
  align-self: center;
  background: none;
  border: 0;
  color: #15803d;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  margin: 0;
  padding: 0;
  text-align: right;
  width: auto;
}
.loginOtpDestination {
  align-self: stretch;
  color: #15803d;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 6px;
  text-align: left;
  width: 100%;
}
.loginDemoOtp {
  align-self: stretch;
  color: #166534;
  font-size: 12px;
  font-weight: 700;
  margin: 2px 0 8px;
  text-align: left;
}
.loginOtpDestination + .loginChangeLink {
  margin: 0 0 14px;
}
.loginResendLink {
  margin: 0;
  text-align: center;
}
.loginOtpActions {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 0 8px;
  width: 100%;
}
.loginResendLinkDisabled,
.loginResendLink:disabled {
  color: #16a34a;
  cursor: default;
  opacity: 0.9;
}
.loginChangeLink:hover,
.loginResendLink:hover:not(:disabled) {
  color: #166534;
}
.loginModeSwitch,
.loginTextLink {
  appearance: none;
  background: none;
  border: 0;
  color: #64748b;
  cursor: pointer;
  display: block;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  width: 100%;
}
.loginFooterLinks {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-top: 24px;
  margin-bottom: 8px;
  padding-bottom: 16px;
  width: 100%;
}
.loginFooterPrompt {
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.loginFooterLinks .loginModeSwitch,
.loginFooterLinks .loginTextLink {
  display: inline;
  margin-top: 0;
  width: auto;
}
.loginFooterLinks .loginTextLink.loginFooterAction {
  font-size: 13px;
  font-weight: 700;
}
.loginTextLink {
  color: #15803d;
}
.loginAdminLink {
  margin-top: 8px;
}
.loginStoreLink {
  align-items: center;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  display: inline-flex;
  justify-content: center;
  margin: 10px auto 0;
  padding: 9px 16px;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
  width: auto;
}
.loginStoreLink:hover { background: #dcfce7; border-color: #86efac; transform: translateY(-1px); }
.loginForgotPassword {
  margin: 12px 0 8px;
  color: #15803d;
  font-weight: 700;
}
.loginModeSwitch:hover,
.loginTextLink:hover {
  color: #15803d;
}
.loginFeatureStrip {
  background: transparent;
  border: 0;
  box-shadow: none;
  display: grid;
  flex: 0 0 auto;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  overflow: visible;
  padding: 0;
  position: relative;
  width: 100%;
  z-index: 2;
}
.loginFeatureItem {
  align-items: center;
  background: #ffffff;
  border: 1px solid #e4eee7;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 118px;
  min-width: 0;
  padding: 14px 10px 16px;
  text-align: center;
}
.loginFeatureIcon {
  align-items: center;
  background: #f0fdf4;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  color: #15803d;
  display: inline-flex;
  flex-shrink: 0;
  height: 38px;
  justify-content: center;
  width: 38px;
}
.loginFeatureCopy {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.loginFeatureCopy strong {
  color: #14532d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.25;
}
.loginFeatureCopy span {
  color: #64748b;
  font-size: 11px;
  line-height: 1.35;
}
.loginHelpCard {
  align-items: center;
  background: #eaf8ee;
  border: 1px solid #d8f3dc;
  border-radius: 14px;
  display: flex;
  flex: 0 0 auto;
  gap: 12px;
  justify-content: space-between;
  margin: 0;
  padding: 12px 16px;
  position: relative;
  width: 100%;
  z-index: 2;
}
.loginHelpCopy {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}
.loginHelpIcon {
  align-items: center;
  background: #ffffff;
  border-radius: 999px;
  color: #15803d;
  display: inline-flex;
  flex-shrink: 0;
  height: 36px;
  justify-content: center;
  width: 36px;
}
.loginHelpCopy strong {
  color: #14532d;
  display: block;
  font-size: 13px;
  font-weight: 800;
}
.loginHelpCopy span {
  color: #64748b;
  display: block;
  font-size: 12px;
}
.loginHelpLink {
  align-items: center;
  color: #15803d;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  gap: 4px;
  text-decoration: none;
}
.loginHelpLink:hover {
  color: #166534;
}
.loginHelpArrow {
  display: inline-flex;
}
.signupPanel .loginPageLogoWrap {
  width: 100%;
}
.signupPanel img.loginPageLogo {
  height: 88px;
  max-width: 220px;
}
.signupPanel .loginWelcome {
  font-size: 26px;
}
.signupPanel .loginField {
  height: 48px;
  margin-bottom: 12px;
}
.signupPanel .loginPrimaryBtn {
  height: 50px;
}
.loginError {
  align-self: stretch;
  color: #e11d48;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  margin: -2px 0 12px;
  text-align: left;
  width: 100%;
}
.loginInfo {
  align-self: stretch;
  color: #15803d;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  margin: -2px 0 12px;
  text-align: left;
  width: 100%;
}
.loginDemoOtp {
  align-self: stretch;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  color: #9a3412;
  font-size: 13px;
  line-height: 1.4;
  margin: 0 0 14px;
  padding: 9px 12px;
  text-align: left;
  width: 100%;
}
.loginDemoOtp strong {
  color: #7c2d12;
  font-size: 15px;
  letter-spacing: 1px;
}
.loginDemoOtp span {
  color: #c2410c;
}
@media (max-width: 1100px) {
  .loginFormPane {
    padding: 28px 32px;
  }
  .loginCard {
    max-width: 380px;
    width: min(100%, 380px);
  }
  .loginWelcome {
    font-size: 26px;
  }
}
@media (max-width: 1024px) and (orientation: landscape) {
  .Container.LoginPage.loginSplitPage,
  .Container.SignupPage.loginSplitPage {
    height: 100%;
    max-height: none;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .loginSplit {
    flex-direction: column;
    height: auto;
    min-height: 100%;
    overflow: visible;
  }
  .loginHeroPane,
  .loginFormPane {
    max-width: 100%;
    width: 100%;
  }
  .loginHeroPane {
    flex: 0 0 auto;
    height: 180px;
    max-height: 28vh;
    min-height: 140px;
  }
  .Container.SignupPage .loginPromoPane {
    flex: 0 0 auto;
    height: 180px;
    max-height: 28vh;
    max-width: 100%;
    min-height: 140px;
    width: 100%;
  }
  .loginPromoText,
  .loginStatsBar {
    display: none;
  }
  .loginFormPane {
    height: auto;
    justify-content: flex-start;
    overflow: visible;
    padding: 20px 24px 28px;
  }
}
@media (orientation: portrait) {
  .Container.LoginPage.loginSplitPage,
  .Container.SignupPage.loginSplitPage {
    background-color: #14532d;
    background-image: url("/images/auth-bg-portrait.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .loginSplit {
    flex-direction: column;
    height: auto;
    min-height: 100%;
    overflow: visible;
    position: relative;
  }
  .loginSplit::before {
    background: rgba(15, 23, 42, 0.4);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 0;
  }
  .loginHeroPane {
    display: none;
  }
  .Container.SignupPage .loginPromoPane {
    display: none;
  }
  .loginCornerShape,
  .loginDecorDots,
  .loginDecorIcon {
    display: none;
  }
  .loginFormPane {
    align-items: center;
    background: transparent;
    background-image: none;
    flex: 1 1 auto;
    height: auto;
    justify-content: center;
    max-width: 100%;
    min-height: 100%;
    overflow: visible;
    padding: 24px 16px 28px;
    position: relative;
    width: 100%;
    z-index: 1;
  }
  .loginCard {
    align-self: center;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.32);
    max-width: 560px;
    padding: 32px 32px 28px;
    width: min(92vw, 560px);
  }
  .loginPanel {
    margin: 0;
    max-width: 100%;
    padding: 0;
    width: 100%;
  }
  .loginHomeLink {
    margin-bottom: 8px;
  }
  .loginPageLogoWrap {
    width: 100%;
  }
  img.loginPageLogo {
    height: 64px;
    margin: 0 auto;
    max-width: 168px;
  }
  .loginWelcome {
    font-size: 26px;
    margin-bottom: 6px;
  }
  .loginWelcomeSub {
    font-size: 13px;
    margin-bottom: 8px;
  }
  .loginWelcomeRule {
    margin-bottom: 14px;
  }
  .loginModeTabs {
    margin-bottom: 14px;
  }
  .signupPanel .loginField {
    height: 44px;
    margin-bottom: 8px;
  }
}
@media (orientation: portrait) and (max-width: 600px) {
  .loginFormPane {
    padding: 16px 12px 20px;
  }
  .loginCard {
    max-width: none;
    padding: 24px 20px 22px;
    width: min(94vw, 520px);
  }
  .loginModeTab {
    font-size: 12px;
    height: 40px;
    padding: 0 6px;
  }
  .loginWelcome {
    font-size: 22px;
  }
  img.loginPageLogo {
    height: 56px;
    max-width: 148px;
  }
}
@media (max-height: 760px) and (min-width: 1025px) {
  .loginFormPane {
    padding: 20px 32px;
  }
  .loginCard {
    padding: 0;
  }
  .loginPageLogoWrap {
    width: 100%;
  }
  img.loginPageLogo {
    height: 68px;
    margin: 0 auto;
    max-width: 170px;
  }
  .loginWelcome {
    font-size: 24px;
  }
  .loginWelcomeSub {
    margin-bottom: 10px;
  }
  .loginWelcomeRule {
    margin-bottom: 14px;
  }
  .loginModeTabs {
    margin-bottom: 14px;
  }
  .loginField {
    height: 44px;
    margin-bottom: 12px;
  }
  .loginPrimaryBtn {
    height: 46px;
  }
  .loginSecureNote {
    margin-top: 12px;
  }
}
@media (max-height: 640px) {
  .loginFeatureStrip {
    display: none;
  }
}
.Container.loginBrandSlot {
  align-items: center;
  display: flex;
  justify-content: center;
  line-height: 0;
  margin-bottom: 8px;
  width: 100%;
}
img.loginBrandLogo {
  display: block;
  height: 100px;
  margin: 0 auto -16px;
  max-width: 300px;
  object-fit: contain;
  object-position: center top;
  width: auto;
}
.Container.LoginFormWidget .x3ba,
.Container.SignupFormWidget .x3ba {
  margin-top: 0;
}
.Container.ForgotPasswordPage .loginBrandSlot + .x36 {
  margin-top: 0;
}

.Container.SignupFormWidget.glassCard {
  width: 400px;
}
.Container.glassCardFlat {
  /*Global Style  */
  background-color: var(--c25);
  border-color: var(--c6);
  border-radius: 16px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  padding: 24px;
}
.Container.glassPanel {
  /*Global Style  */
  background-color: #ffffff;
  border-color: #e2e8f0;
  border-radius: 0;
  border-style: solid;
  border-width: 0 0 1px 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
.Container.glassSidebar {
  /*Global Style  */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: rgba(var(--c10-rgb), 0.92);
  border-color: var(--c6);
  border-radius: 0px;
  border-style: solid;
  border-width: 1px;
  padding-bottom: 16px;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 16px;
  width: 260px;
}
.Container.pageBackground {
  /*Global Style  */
  background: #f5f7fa;
  border-radius: 0px;
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  width: 100%;
}
.Container.DashboardPage {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.Container.pageBackground > ui-row {
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
  min-width: 0;
}
.Container.pageContent {
  /*Global Style  */
  padding-bottom: 24px;
  padding-left: 4px;
  padding-right: 12px;
  padding-top: 8px;
}
ui-scroll-view.pageContent {
  overflow-y: scroll;
  padding: 8px 12px 24px 4px;
  scrollbar-gutter: stable;
}
ui-page-router > * {
  animation: none !important;
  transition: none !important;
}
.Container.dashboardKpiSkeleton {
  background: linear-gradient(
    90deg,
    #f5f5f4 0%,
    #fafaf9 50%,
    #f5f5f4 100%
  );
  background-size: 200% 100%;
  border-radius: 16px;
  margin-bottom: 14px;
  min-height: 88px;
}
.Container.dashboardBodySkeleton {
  background: linear-gradient(
    90deg,
    #f5f5f4 0%,
    #fafaf9 50%,
    #f5f5f4 100%
  );
  background-size: 200% 100%;
  border-radius: 16px;
  min-height: 420px;
}
.Container.dashboardContentPending,
.Container.dashboardContentReady {
  min-height: 560px;
  padding: 4px 4px 8px;
}
.Container.DashboardPage.pageBackground {
  contain: none;
}
.Container.sidebarSolid {
  /*Global Style  */
  background: #ffffff;
  border-color: #e2e8f0;
  border-radius: 0;
  border-style: solid;
  border-width: 0 1px 0 0;
  box-shadow: none;
  display: flex;
  flex: 0 0 264px;
  flex-direction: column;
  flex-shrink: 0;
  height: 100%;
  max-height: none;
  max-width: 264px;
  min-height: 0;
  min-width: 264px;
  overflow: hidden;
  padding: 0;
  transition: width 0.2s ease, min-width 0.2s ease, max-width 0.2s ease, flex-basis 0.2s ease;
  width: 264px;
}
.Container.IMSidebarWidget.sidebarSolid {
  margin-right: 0;
}
.Container.IMSidebarWidget.sidebarSolid > ui-column {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
}
.Container.IMSidebarWidget .x52 {
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
  min-height: auto;
  padding: 16px 14px 14px;
}
.Container.sidebarBrandBlock {
  padding: 16px 14px 14px;
}
.sidebarBrandRow {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
}
img.sidebarBrandLogo {
  display: block;
  flex: 1 1 auto;
  height: 66px;
  max-height: 66px;
  margin-bottom: 0;
  max-width: 190px;
  min-width: 0;
  object-fit: contain;
  object-position: left center;
  width: auto;
}
button.sidebarCollapseBtn {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  height: 32px;
  justify-content: center;
  padding: 0;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  width: 32px;
}
button.sidebarCollapseBtn:hover {
  background: #fff7ed;
  border-color: #fdba74;
  color: #c2410c;
}
button.sidebarNavBtn {
  appearance: none;
  background: transparent;
  border: none;
  box-sizing: border-box;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
}
.sidebarNavIcon {
  display: inline-flex;
  flex-shrink: 0;
  font-size: 16px;
  justify-content: center;
  line-height: 1;
  width: 22px;
}
.sidebarNavLabel {
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.Container.sidebarSolid.sidebarCollapsed {
  flex-basis: 76px;
  max-width: 76px;
  min-width: 76px;
  width: 76px;
}
.Container.sidebarCollapsed .sidebarBrandRow {
  flex-direction: column;
  gap: 10px;
}
.Container.sidebarCollapsed .sidebarCollapseBtn {
  margin: 0 auto;
}
.Container.sidebarCollapsed img.sidebarBrandLogo {
  flex: 0 0 auto;
  height: 32px;
  margin: 0 auto;
  max-width: 44px;
  object-position: center;
}
.Container.sidebarCollapsed .x52,
.Container.sidebarCollapsed .sidebarBrandBlock {
  padding: 14px 8px 12px;
}
.Container.sidebarCollapsed .xef7 {
  padding: 8px 8px 12px;
}
.Container.sidebarCollapsed .sidebarSectionToggle {
  display: none;
}
.Container.sidebarCollapsed .sidebarNavGroup {
  margin-top: 0;
}
.Container.sidebarCollapsed .sidebarNavLabel,
.Container.sidebarCollapsed .x60 {
  display: none;
}
.Container.sidebarCollapsed .TextButton.navItem,
.Container.sidebarCollapsed .TextButton.navActive {
  justify-content: center;
  min-height: 40px;
  padding: 8px 0;
}
.Container.sidebarCollapsed .TextButton.navActive {
  border-left-width: 0;
}
.Container.sidebarCollapsed .sidebarNavIcon {
  width: auto;
}
.Container.IMSidebarWidget .xef7 {
  flex: 1 1 auto;
  min-height: 280px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 12px 16px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.Container.IMSidebarWidget .xef7::-webkit-scrollbar {
  display: none;
}
.Container.IMSidebarWidget .x60 {
  border-top: 1px solid #e2e8f0;
  flex-shrink: 0;
  margin-top: auto;
  padding: 14px 18px 16px;
}
.Container.IMSidebarWidget .xef7 > ui-column {
  min-height: 260px;
  width: 100%;
}
.TextButton.navItem,
.TextButton.navActive {
  align-items: center;
  align-self: stretch;
  box-sizing: border-box;
  display: flex;
  gap: 10px;
  text-align: left;
  width: 100%;
}
.TextButton.navItem ui-center,
.TextButton.navActive ui-center {
  align-items: center;
  flex: 1 1 auto;
  justify-content: flex-start;
  width: 100%;
}
.Container.IMSidebarWidget .x460 {
  width: 100%;
}
.Container.IMSidebarWidget .x460 ui-center {
  justify-content: flex-start;
  width: 100%;
}
.Container.IMSidebarWidget .x460 .TextButton {
  width: 100%;
}
.Container.statCard,
.Container.statCardA,
.Container.statCardB,
.Container.statCardC,
.Container.statCardD,
.Container.statCardE,
.Container.statCardF,
.Container.statCardG,
.Container.statCardH {
  /*Global Style  */
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.03),
    0 8px 24px rgba(15, 23, 42, 0.04);
  box-sizing: border-box;
  overflow: hidden;
  padding: 18px 20px;
  position: relative;
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.Container.statCard:hover,
.Container.statCardA:hover,
.Container.statCardB:hover,
.Container.statCardC:hover,
.Container.statCardD:hover,
.Container.statCardE:hover,
.Container.statCardF:hover,
.Container.statCardG:hover,
.Container.statCardH:hover {
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.05),
    0 14px 28px rgba(15, 23, 42, 0.07);
  transform: translateY(-2px);
}
.Container.statCardA::before,
.Container.statCardB::before,
.Container.statCardC::before,
.Container.statCardD::before,
.Container.statCardE::before,
.Container.statCardF::before,
.Container.statCardG::before,
.Container.statCardH::before {
  display: none;
}
ui-row.statCardBody {
  align-items: flex-start;
  width: 100%;
}
ui-column.statCardCopy {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 10px;
}
.TextButton.destructive {
  /*Global Style  */
  align-items: center;
  background-color: #f43f5e;
  border: none;
  border-radius: 10px;
  box-sizing: border-box;
  color: var(--c25);
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  height: 32px;
  justify-content: center;
  line-height: 1;
  max-height: 32px;
  min-height: 32px;
  padding: 0 14px;
}
.TextButton.destructive ui-center {
  align-items: center;
  height: 100%;
  justify-content: center;
  width: 100%;
}
.TextButton.navActive {
  /*Global Style  */
  background-color: #fff7ed;
  border-left: 3px solid var(--c2);
  border-radius: 8px;
  color: #c2410c;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  height: auto;
  line-height: 1.4;
  margin-bottom: 2px;
  min-height: 38px;
  padding-bottom: 8px;
  padding-left: 9px;
  padding-right: 12px;
  padding-top: 8px;
}
.TextButton.navItem {
  /*Global Style  */
  border-radius: 8px;
  color: #475569;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  height: auto;
  line-height: 1.4;
  margin-bottom: 2px;
  min-height: 38px;
  padding-bottom: 8px;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 8px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.TextButton.navItem:hover {
  background-color: #f8fafc;
  color: #0f172a;
}
.TextButton.primary {
  /*Global Style — matches header Add Product */
  align-items: center;
  background: linear-gradient(to right, var(--c1) 0%, var(--c2) 100%);
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 4px -1px rgba(245, 158, 11, 0.2);
  box-sizing: border-box;
  color: var(--c25);
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  height: 32px;
  justify-content: center;
  line-height: 1;
  max-height: 32px;
  min-height: 32px;
  padding: 0 14px;
}
.TextButton.primary ui-center {
  align-items: center;
  height: 100%;
  justify-content: center;
  width: 100%;
}
.TextButton.primary ui-center .TextView {
  color: var(--c25);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
.TextButton.primary:hover {
  box-shadow: 0 4px 8px -1px rgba(245, 158, 11, 0.3);
}
.TextButton.primary[data-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}
.TextButton.secondary {
  /*Global Style — same size as primary, outlined */
  align-items: center;
  background-color: var(--c25);
  border-color: var(--c6);
  border-radius: 10px;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  color: var(--c4);
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 500;
  height: 32px;
  justify-content: center;
  line-height: 1;
  max-height: 32px;
  min-height: 32px;
  padding: 0 14px;
}
.TextButton.secondary ui-center {
  align-items: center;
  height: 100%;
  justify-content: center;
  width: 100%;
}
.TextButton.secondary ui-center .TextView {
  color: var(--c4);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}
.TextButton.secondary:hover {
  background-color: #f8fafc;
}
/* Full-width form submit buttons (Sign In, Sign Up, etc.) */
.Container.x5c > .TextButton.primary,
.Container.xd6 > .TextButton.primary,
.Container.x69 > .TextButton.primary,
.Container.xa0 > .TextButton.primary,
.Container.x2ca > .TextButton.primary,
.Container.x8e > .TextButton.primary,
.Container.x8d8 > .TextButton.primary,
.Container.xef5 > .TextButton.primary,
.Container.x41 > .TextButton.primary {
  width: 100%;
}
.TextView.fieldError {
  /*Global Style  */
  color: #e11d48;
  font-size: 12px;
  margin-top: 4px;
}
.TextView.fieldLabel {
  /*Global Style  */
  color: var(--c4);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}
.TextView.fieldLabelInline {
  /*Global Style  */
  color: var(--c5);
  font-size: 14px;
  font-weight: 500;
}
.TextView.sidebarBrandSubtitle {
  /*Global Style  */
  color: #64748b;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.3;
  margin-top: 0;
  min-height: 14px;
  text-transform: uppercase;
}
.TextView.sidebarBrandTitle {
  /*Global Style  */
  color: #0f172a;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.TextView.sidebarSectionLabel,
span.sidebarSectionLabel {
  color: #334155;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}
.sidebarNavGroup {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
}
.sidebarNavGroup:first-child {
  margin-top: 0;
}
button.sidebarSectionToggle {
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #334155;
  cursor: pointer;
  display: flex;
  font-family: inherit;
  gap: 8px;
  justify-content: space-between;
  margin: 0 0 4px;
  padding: 8px 10px 6px;
  text-align: left;
  width: 100%;
}
button.sidebarSectionToggle:hover {
  background: #f8fafc;
}
.sidebarSectionChevron {
  color: #94a3b8;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
button.sidebarSectionToggle.isOpen .sidebarSectionChevron {
  transform: rotate(0deg);
}
button.sidebarSectionToggle:not(.isOpen) .sidebarSectionChevron {
  transform: rotate(-90deg);
}
.TextView.sidebarSectionLabel:first-child {
  margin-top: 0;
}
.TextView.statLabel {
  /*Global Style  */
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  margin-top: 0;
  text-transform: none;
}
.TextView.statValue {
  /*Global Style  */
  color: #0f172a;
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.15;
  margin-top: 8px;
}
.TextView.statCardIcon {
  align-items: center;
  background: linear-gradient(145deg, #ccfbf1 0%, #99f6e4 100%);
  border-radius: 14px;
  color: #0f766e;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 700;
  height: 46px;
  justify-content: center;
  margin-left: auto;
  margin-right: 0;
  width: 46px;
}
.TextView.statCardIcon ui-center {
  align-items: center;
  height: 100%;
  justify-content: center;
  width: 100%;
}
.Container.statCardA .TextView.statCardIcon {
  background: linear-gradient(145deg, #fef3c7 0%, #fde68a 100%);
  color: #d97706;
}
.Container.statCardB .TextView.statCardIcon {
  background: linear-gradient(145deg, #ffedd5 0%, #fed7aa 100%);
  color: #ea580c;
}
.Container.statCardC .TextView.statCardIcon {
  background: linear-gradient(145deg, #fb7185 0%, #f43f5e 100%);
  color: #ffffff;
}
.Container.statCardD .TextView.statCardIcon {
  background: linear-gradient(145deg, #34d399 0%, #10b981 100%);
  color: #ffffff;
}
.Container.statCardE .TextView.statCardIcon {
  background: linear-gradient(145deg, #1e3a5f 0%, #0f2744 100%);
  color: #ffffff;
}
.Container.statCardF .TextView.statCardIcon {
  background: linear-gradient(145deg, #f87171 0%, #ef4444 100%);
  color: #ffffff;
}
.Container.statCardG .TextView.statCardIcon {
  background: linear-gradient(145deg, #c4b5fd 0%, #a78bfa 100%);
  color: #5b21b6;
}
.Container.statCardH .TextView.statCardIcon {
  background: linear-gradient(145deg, #2dd4bf 0%, #14b8a6 100%);
  color: #ffffff;
}
.TextView.statCardTrend {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #0d9488;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  margin-top: 8px;
  padding: 0;
}
.Container.statCardA .TextView.statCardTrend,
.Container.statCardB .TextView.statCardTrend,
.Container.statCardD .TextView.statCardTrend,
.Container.statCardE .TextView.statCardTrend,
.Container.statCardH .TextView.statCardTrend {
  background: transparent;
  border: 0;
  color: #0d9488;
}
.Container.statCardC .TextView.statCardTrend,
.Container.statCardF .TextView.statCardTrend {
  background: transparent;
  border: 0;
  color: #e11d48;
}
@keyframes headerLivePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    transform: scale(1);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(16, 185, 129, 0);
    transform: scale(1.05);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    transform: scale(1);
  }
}
@keyframes headerMenuSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.Container.appHeaderToolbar {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02), 0 4px 20px -4px rgba(15, 23, 42, 0.04);
  flex-shrink: 0;
  margin: 0;
  min-height: 64px;
  overflow: visible;
  padding: 10px 24px;
  position: sticky;
  top: 0;
  z-index: 45;
}
.Container.appHeaderToolbar > ui-row {
  align-items: center;
  gap: 16px;
  width: 100%;
}
.Container.appHeaderToolbar > ui-row > ui-row:first-child {
  align-items: center;
  gap: 14px;
}
.Container.appHeaderToolbar > ui-row > ui-row:last-child {
  align-items: center;
  gap: 10px;
}
.appHeaderInner {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  min-width: 0;
  width: 100%;
}
.headerSearchForm {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.02);
  display: flex;
  flex: 1 1 auto;
  gap: 10px;
  height: 40px;
  max-width: 440px;
  min-width: 200px;
  padding: 0 12px 0 14px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.headerSearchForm:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.headerSearchForm:focus-within {
  background: #ffffff;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3.5px rgba(59, 130, 246, 0.14), 0 4px 12px rgba(59, 130, 246, 0.08);
}
.headerSearchGlyph {
  align-items: center;
  color: #94a3b8;
  display: inline-flex;
  flex-shrink: 0;
  transition: color 0.2s ease, transform 0.2s ease;
}
.headerSearchForm:focus-within .headerSearchGlyph {
  color: #3b82f6;
  transform: scale(1.06);
}
.headerSearchInput {
  background: transparent;
  border: none;
  color: #0f172a;
  flex: 1 1 auto;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  height: 100%;
  min-width: 0;
  outline: none;
  width: 100%;
}
.headerSearchInput::placeholder {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 400;
}
.headerSearchKbd {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  color: #64748b;
  display: inline-flex;
  flex-shrink: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 7px;
}
.headerSearchWrap {
  flex: 1 1 auto;
  max-width: 440px;
  min-width: 200px;
  position: relative;
  z-index: 45;
}
.headerSearchWrap .headerSearchForm {
  max-width: none;
  min-width: 0;
  width: 100%;
}
.headerSearchWrap.isOpen .headerSearchForm {
  background: #ffffff;
  border-color: #86efac;
  box-shadow: 0 0 0 3.5px rgba(16, 185, 129, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
}
.headerSearchWrap.isOpen .headerSearchGlyph {
  color: #059669;
}
.headerSearchSpinner {
  animation: headerSearchSpin 0.8s linear infinite;
  border: 2px solid #d1fae5;
  border-radius: 999px;
  border-top-color: #059669;
  flex-shrink: 0;
  height: 14px;
  width: 14px;
}
@keyframes headerSearchSpin {
  to {
    transform: rotate(360deg);
  }
}
.headerSearchPanel {
  animation: headerStoreMenuIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 250, 252, 0.98) 100%);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  gap: 8px;
  left: 0;
  max-height: min(420px, 70vh);
  overflow: auto;
  padding: 10px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 90;
}
.headerSearchEmpty {
  color: #64748b;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  padding: 14px 10px;
  text-align: center;
}
.headerSearchGroup {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.headerSearchGroupTitle {
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 4px 8px 6px;
  text-transform: uppercase;
}
.headerSearchResult {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #0f172a;
  cursor: pointer;
  display: flex;
  font-family: inherit;
  gap: 10px;
  padding: 9px 10px;
  text-align: left;
  transition: all 0.16s ease;
  width: 100%;
}
.headerSearchResult:hover {
  background: rgba(236, 253, 245, 0.8);
  border-color: rgba(167, 243, 208, 0.7);
}
.headerSearchResultIcon {
  align-items: center;
  background: #f1f5f9;
  border-radius: 10px;
  color: #475569;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 12px;
  height: 30px;
  justify-content: center;
  width: 30px;
}
.headerSearchResultIcon.isProduct {
  background: #ecfdf5;
  color: #059669;
}
.headerSearchResultIcon.isPage {
  background: #eff6ff;
  color: #2563eb;
}
.headerSearchResultCopy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.headerSearchResultName {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.headerSearchResultHint {
  color: #64748b;
  font-size: 11px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.headerSearchFooterAction {
  appearance: none;
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.95) 0%, rgba(240, 253, 250, 0.9) 100%);
  border: 1px solid rgba(167, 243, 208, 0.9);
  border-radius: 12px;
  color: #047857;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  margin-top: 2px;
  padding: 10px 12px;
  text-align: left;
  transition: all 0.16s ease;
  width: 100%;
}
.headerSearchFooterAction:hover {
  background: #d1fae5;
  border-color: #6ee7b7;
}
.headerActions {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  margin-left: auto;
}
.headerStatusGroup {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}
button.headerLiveBadge {
  align-items: center;
  appearance: none;
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.95) 0%, rgba(209, 250, 229, 0.75) 100%);
  border: 1px solid rgba(167, 243, 208, 0.9);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.12);
  color: #065f46;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  gap: 7px;
  height: 38px;
  padding: 0 13px 0 10px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
button.headerLiveBadge:hover,
button.headerLiveBadge.isLive:hover {
  background: #d1fae5;
  border-color: #6ee7b7;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.2);
  color: #047857;
  transform: translateY(-1px);
}
button.headerLiveBadge:not(.isLive) {
  background: #f8fafc;
  border-color: #e2e8f0;
  box-shadow: none;
  color: #64748b;
}
button.headerLiveBadge:not(.isLive) .headerLiveDot {
  animation: none;
  background: #cbd5e1;
  box-shadow: none;
}
.headerLiveIcon {
  align-items: center;
  color: #10b981;
  display: inline-flex;
  flex-shrink: 0;
}
button.headerLiveBadge:not(.isLive) .headerLiveIcon {
  color: #94a3b8;
}
.headerLiveDot {
  animation: headerLivePulse 2s infinite;
  background: #10b981;
  border-radius: 999px;
  flex-shrink: 0;
  height: 7.5px;
  width: 7.5px;
}
.headerLiveLabel {
  letter-spacing: 0.02em;
  line-height: 1;
}
.headerDateFilter {
  align-items: center;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  gap: 8px;
  height: 38px;
  padding: 0 12px 0 11px;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.headerDateFilter:hover,
.headerDateFilter:focus-within {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}
.headerDateCalIcon {
  align-items: center;
  color: #4f46e5;
  display: inline-flex;
  flex-shrink: 0;
}
.headerDateCalIconRight {
  color: #94a3b8;
}
.headerDateValue {
  color: #0f172a;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}
.headerDateNative {
  border: 0;
  cursor: pointer;
  font-size: 16px;
  height: 100%;
  left: 0;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}
.headerStoreFilter {
  flex-shrink: 0;
  position: relative;
  z-index: 40;
}
.headerStoreTrigger {
  align-items: center;
  appearance: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.96) 100%);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  color: #0f172a;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  gap: 10px;
  height: 42px;
  max-width: 248px;
  min-width: 176px;
  padding: 0 12px 0 8px;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.headerStoreFilter.hasStore .headerStoreTrigger {
  background:
    linear-gradient(135deg, rgba(236, 253, 245, 0.95) 0%, rgba(240, 253, 250, 0.9) 45%, rgba(255, 255, 255, 0.98) 100%);
  border-color: rgba(167, 243, 208, 0.85);
  box-shadow:
    0 1px 3px rgba(16, 185, 129, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.headerStoreTrigger:hover,
.headerStoreFilter.isOpen .headerStoreTrigger {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
.headerStoreFilter.hasStore .headerStoreTrigger:hover,
.headerStoreFilter.hasStore.isOpen .headerStoreTrigger {
  border-color: #6ee7b7;
  box-shadow: 0 8px 22px rgba(16, 185, 129, 0.14);
}
.headerStoreIconWrap {
  align-items: center;
  background: linear-gradient(160deg, #0f766e 0%, #059669 55%, #10b981 100%);
  border-radius: 11px;
  box-shadow:
    0 6px 14px rgba(5, 150, 105, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #ffffff;
  display: inline-flex;
  flex-shrink: 0;
  height: 28px;
  justify-content: center;
  width: 28px;
}
.headerStoreFilter:not(.hasStore) .headerStoreIconWrap {
  background: linear-gradient(160deg, #334155 0%, #475569 100%);
  box-shadow:
    0 6px 14px rgba(51, 65, 85, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.headerStoreIconWrap svg {
  height: 15px;
  width: 15px;
}
.headerStoreCopy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
}
.headerStoreEyebrow {
  color: #64748b;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}
.headerStoreFilter.hasStore .headerStoreEyebrow {
  color: #047857;
}
.headerStoreValue {
  color: #0f172a;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.headerStoreChevron {
  color: #94a3b8;
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.2s ease;
}
.headerStoreChevron.isOpen {
  color: #0f766e;
  transform: rotate(180deg);
}
.headerStoreMenu {
  animation: headerStoreMenuIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 16px;
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.14),
    0 2px 6px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
  left: 0;
  max-height: min(340px, 70vh);
  min-width: 280px;
  overflow: auto;
  padding: 10px;
  position: absolute;
  right: auto;
  top: calc(100% + 8px);
  z-index: 80;
}
@keyframes headerStoreMenuIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.headerStoreMenuHead {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  padding: 4px 8px 8px;
}
.headerStoreMenuTitle {
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.headerStoreMenuMeta {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
}
.headerStoreOption {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #0f172a;
  cursor: pointer;
  display: flex;
  font-family: inherit;
  gap: 10px;
  padding: 9px 10px;
  text-align: left;
  transition: all 0.16s ease;
  width: 100%;
}
.headerStoreOption:hover {
  background: rgba(241, 245, 249, 0.95);
  border-color: rgba(226, 232, 240, 0.9);
}
.headerStoreOption.isSelected {
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.95) 0%, rgba(240, 253, 250, 0.9) 100%);
  border-color: rgba(167, 243, 208, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.headerStoreOptionIcon {
  align-items: center;
  background: #ecfdf5;
  border-radius: 10px;
  color: #059669;
  display: inline-flex;
  flex-shrink: 0;
  height: 32px;
  justify-content: center;
  width: 32px;
}
.headerStoreOptionIcon.isAll {
  background: #f1f5f9;
  color: #475569;
}
.headerStoreOptionIcon svg {
  height: 15px;
  width: 15px;
}
.headerStoreOptionCopy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.headerStoreOptionName {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.headerStoreOptionHint {
  color: #64748b;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
}
.headerStoreOptionCheck {
  align-items: center;
  color: #059669;
  display: inline-flex;
  flex-shrink: 0;
}
.headerActionDivider {
  background: #e2e8f0;
  flex-shrink: 0;
  height: 24px;
  margin: 0 3px;
  width: 1px;
}
button.headerIconBtn {
  align-items: center;
  appearance: none;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  height: 38px;
  justify-content: center;
  min-height: 38px;
  min-width: 38px;
  padding: 0;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  width: 38px;
}
button.headerIconBtn:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
  color: #0f172a;
  transform: translateY(-1px);
}
.headerSettingsWrap {
  position: relative;
}
.headerSettingsMenu {
  animation: headerMenuSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 14px;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(15, 23, 42, 0.05);
  min-width: 230px;
  padding: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 50;
}
.headerSettingsMenuTitle {
  border-bottom: 1px solid #f1f5f9;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  padding: 6px 12px 8px;
  text-transform: uppercase;
}
button.headerSettingsItem {
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 9px;
  color: #334155;
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  gap: 10px;
  padding: 9px 12px;
  text-align: left;
  transition: all 0.15s ease;
  width: 100%;
}
button.headerSettingsItem:hover {
  background: #f8fafc;
  color: #0f172a;
  transform: translateX(3px);
}
.headerSettingsItemIcon {
  color: #64748b;
  flex-shrink: 0;
  font-size: 15px;
  width: 20px;
}
button.headerNotifyBtn {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-color: #e2e8f0;
  color: #475569;
  position: relative;
}
button.headerNotifyBtn:hover {
  background: #fff7ed;
  border-color: #fdba74;
  box-shadow: 0 3px 10px rgba(234, 88, 12, 0.15);
  color: #ea580c;
  transform: translateY(-1px);
}
button.headerSettingsBtn {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-color: #e2e8f0;
  color: #475569;
}
button.headerSettingsBtn svg {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
button.headerSettingsBtn:hover {
  background: #f0fdf4;
  border-color: #86efac;
  box-shadow: 0 3px 10px rgba(22, 163, 74, 0.15);
  color: #16a34a;
  transform: translateY(-1px);
}
button.headerSettingsBtn:hover svg {
  transform: rotate(45deg);
}
button.headerSettingsBtn.isOpen {
  background: #ecfdf5;
  border-color: #6ee7b7;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
  color: #059669;
}
button.headerSettingsBtn.isOpen svg {
  transform: rotate(90deg);
}
.headerNotifyBadge {
  align-items: center;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border: 2px solid #ffffff;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
  color: #ffffff;
  display: inline-flex;
  font-size: 9.5px;
  font-weight: 800;
  height: 18px;
  justify-content: center;
  line-height: 1;
  min-width: 18px;
  padding: 0 4px;
  position: absolute;
  right: -4px;
  top: -4px;
}
button.headerProfileBtn {
  align-items: center;
  appearance: none;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  font-family: inherit;
  gap: 9px;
  height: 38px;
  padding: 3px 11px 3px 4px;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
button.headerProfileBtn:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
.headerProfileChevron {
  color: #94a3b8;
  flex-shrink: 0;
  margin-left: 2px;
  transition: transform 0.2s ease, color 0.2s ease;
}
button.headerProfileBtn:hover .headerProfileChevron {
  color: #475569;
  transform: translateY(1px);
}
.TextButton.headerLogoutBtn {
  margin-left: 0;
}
.TextButton.headerLogoutIconBtn {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  height: 38px;
  min-height: 38px;
  min-width: 38px;
  padding: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  width: 38px;
}
.TextButton.headerLogoutIconBtn:hover {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.15);
  transform: translateY(-1px);
}
.TextButton.headerLogoutIconBtn ui-center .TextView {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  color: transparent;
  font-size: 0;
  height: 16px;
  line-height: 0;
  min-height: 16px;
  min-width: 16px;
  width: 16px;
}
.TextButton.headerLogoutIconBtn:hover ui-center .TextView {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}
.Container.headerUserAvatar {
  align-items: center;
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
  border: 1.5px solid #ffffff;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
  display: flex;
  flex-shrink: 0;
  height: 30px;
  justify-content: center;
  min-height: 30px;
  min-width: 30px;
  overflow: hidden;
  padding: 0;
  width: 30px;
}
img.headerUserAvatarImage {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.Container.headerUserAvatarHasImage {
  background: #ffffff;
}
.TextView.headerUserAvatarInitial {
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
}
.TextView.headerUserName {
  color: #0f172a;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.TextView.headerRoleLabel {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border: 1px solid #c7d2fe;
  border-radius: 5px;
  color: #4338ca;
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-top: 1px;
  padding: 2px 6px;
  text-transform: uppercase;
  width: fit-content;
}
.TextView.sidebarLoadingLabel {
  color: var(--c8);
  font-size: 13px;
  padding: 8px 16px;
}
.TextView.headerRoleBadgePlaceholder {
  margin-left: 12px;
  min-height: 20px;
  min-width: 56px;
  visibility: hidden;
}
.TextView.headerPageTitle {
  align-self: center;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  margin-left: 4px;
  margin-right: 4px;
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .headerSearchForm,
  .headerSearchWrap {
    max-width: 320px;
  }
}
@media (max-width: 900px) {
  .headerSearchForm,
  .headerSearchWrap {
    max-width: none;
  }
  .headerLiveLabel {
    display: none;
  }
  button.headerLiveBadge {
    gap: 6px;
    padding: 0 10px;
  }
}
@media (max-width: 720px) {
  .headerSearchForm,
  .headerSearchWrap {
    max-width: 160px;
  }
  .headerStatusGroup {
    display: none;
  }
  button.headerProfileBtn .headerUserName,
  button.headerProfileBtn .headerRoleLabel {
    display: none;
  }
}
.TextView.sidebarFooterText {
  color: #94a3b8;
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-align: left;
  width: 100%;
}
.TextView.dashboardPageTitle {
  color: #0f172a;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.2;
  margin-bottom: 0;
}
.dashboardPageTitleRow {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  width: 100%;
}
.dashboardTitleGroup {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dashboardPageTitle {
  color: #0f172a;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0;
}
.dashboardPageSubtitle {
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
}
.dashboardTitleBadge {
  align-items: center;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 999px;
  color: #059669;
  display: inline-flex;
  font-size: 11.5px;
  font-weight: 600;
  gap: 6px;
  padding: 4px 10px;
}
.dashboardLivePulse {
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  display: inline-block;
  height: 7px;
  width: 7px;
  animation: pulseGreen 2.2s infinite;
}
@keyframes pulseGreen {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}
.dashboardAddProductBtn {
  align-items: center;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  border: none;
  border-radius: 12px;
  box-shadow:
    0 2px 6px rgba(249, 115, 22, 0.25),
    0 6px 16px -2px rgba(249, 115, 22, 0.35);
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-size: 13.5px;
  font-weight: 700;
  gap: 8px;
  letter-spacing: -0.01em;
  padding: 10px 18px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.dashboardAddProductBtn:hover {
  filter: brightness(1.06);
  box-shadow:
    0 4px 12px rgba(249, 115, 22, 0.35),
    0 10px 24px -2px rgba(249, 115, 22, 0.45);
  transform: translateY(-1.5px);
}
.dashboardAddProductBtn:active {
  transform: translateY(0);
}
.Container.dashboardRoutePlaceholder {
  margin-top: 0;
}
ui-row.dashboardKpiRow,
ui-row.dashboardKpiRowCompact {
  align-content: start;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 0;
  width: 100%;
}
ui-row.dashboardKpiRow > *,
ui-row.dashboardKpiRowCompact > * {
  max-width: 100%;
  min-width: 0;
  width: 100%;
}
.Container.statCard,
.statCard {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: 14px;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.03),
    0 4px 12px -2px rgba(15, 23, 42, 0.03);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  overflow: hidden;
  padding: 13px 15px 12px;
  position: relative;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.Container.statCard:hover,
.statCard:hover {
  border-color: #cbd5e1;
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.04),
    0 8px 24px -4px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}
.statCardInner {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  width: 100%;
}
.statCardTopRow {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.statLabel {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.3;
  margin: 0;
  text-transform: uppercase;
}
.statCardIcon {
  align-items: center;
  border-radius: 9px;
  display: inline-flex;
  flex-shrink: 0;
  height: 32px;
  justify-content: center;
  transition: transform 0.2s ease;
  width: 32px;
}
.statCard:hover .statCardIcon {
  transform: scale(1.08);
}
.statCardH .statCardIcon {
  background: #ecfdf5;
  border: 1px solid #d1fae5;
  color: #059669;
}
.statCardE .statCardIcon {
  background: #eef2ff;
  border: 1px solid #e0e7ff;
  color: #4f46e5;
}
.statCardD .statCardIcon {
  background: #f0fdfa;
  border: 1px solid #ccfbf1;
  color: #0d9488;
}
.statCardC .statCardIcon {
  background: #fffbeb;
  border: 1px solid #fef3c7;
  color: #d97706;
}
.statCardF .statCardIcon {
  background: #fef2f2;
  border: 1px solid #fee2e2;
  color: #dc2626;
}
.statCardA .statCardIcon {
  background: #f0f9ff;
  border: 1px solid #e0f2fe;
  color: #0284c7;
}
.statCardB .statCardIcon {
  background: #f5f3ff;
  border: 1px solid #ede9fe;
  color: #7c3aed;
}
.statCardG .statCardIcon {
  background: #faf5ff;
  border: 1px solid #f3e8ff;
  color: #9333ea;
}
.statCardMiddleRow {
  margin: 5px 0 5px;
}
.statValue {
  color: #0f172a;
  font-size: 23px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
}
.statCardBottomRow {
  align-items: center;
  display: flex;
  margin-top: auto;
}
.statCardTrendBadge {
  align-items: center;
  border-radius: 6px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 600;
  gap: 5px;
  line-height: 1.3;
  padding: 2px 7px;
}
.statTrendDot {
  border-radius: 50%;
  flex-shrink: 0;
  height: 5px;
  width: 5px;
}
.statTrendPositive {
  background: #ecfdf5;
  border: 1px solid #d1fae5;
  color: #059669;
}
.statTrendPositive .statTrendDot {
  background: #10b981;
}
.statTrendWarning {
  background: #fffbeb;
  border: 1px solid #fef3c7;
  color: #d97706;
}
.statTrendWarning .statTrendDot {
  background: #f59e0b;
}
.statTrendDanger {
  background: #fef2f2;
  border: 1px solid #fee2e2;
  color: #dc2626;
}
.statTrendDanger .statTrendDot {
  background: #ef4444;
}
.statTrendInfo {
  background: #f0f9ff;
  border: 1px solid #e0f2fe;
  color: #0284c7;
}
.statTrendInfo .statTrendDot {
  background: #0ea5e9;
}
.statTrendMuted {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
}
.statTrendMuted .statTrendDot {
  background: #94a3b8;
}
.statCardCustomGlyph {
  font-size: 13px;
  font-weight: 700;
}
@media (max-width: 1200px) {
  ui-row.dashboardKpiRow,
  ui-row.dashboardKpiRowCompact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  ui-row.dashboardKpiRow,
  ui-row.dashboardKpiRowCompact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.dashboardTopSplit {
  align-items: stretch;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) 280px;
  margin: 0 0 18px;
  width: 100%;
}
.dashboardTopKpis {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.dashboardTopOrders {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  width: 100%;
}
.dashboardTopOrders .dashOrdersBanner,
.dashboardTopOrders .dashChartCard.dashOrdersCard {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: 14px;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.03),
    0 4px 12px -2px rgba(15, 23, 42, 0.03);
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  margin-bottom: 0;
  min-height: 0;
  padding: 13px 15px 12px;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.dashboardTopOrders .dashOrdersBanner:hover,
.dashboardTopOrders .dashChartCard.dashOrdersCard:hover {
  border-color: #cbd5e1;
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.04),
    0 8px 24px -4px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}
.dashboardChartsStack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 18px;
  width: 100%;
}
.dashboardChartsStack:has(.dashboardOpsGrid:only-child) {
  margin-bottom: 18px;
}
.dashboardChartsRow,
.dashboardOpsGrid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr) minmax(260px, 0.95fr);
  margin: 0;
  width: 100%;
}
.dashSideCol {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.dashChartCard {
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.03),
    0 8px 24px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  padding: 18px 20px 16px;
}
.dashChartHead {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.dashChartTitleGroup {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dashChartHead h3 {
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.dashChartSubtitle {
  color: #64748b;
  font-size: 11px;
  font-weight: 500;
}
.dashChartSkuBadge {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
}
.dashChartDonutWrap {
  align-items: center;
  display: flex;
  gap: 16px;
}
.dashChartDonutValue {
  fill: #0f172a;
  font-size: 22px;
  font-weight: 800;
}
.dashChartDonutCaption {
  fill: #64748b;
  font-size: 11px;
  font-weight: 600;
}
.dashChartLegend {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  min-width: 0;
  padding: 0;
}
.dashChartLegend li {
  align-items: center;
  color: #334155;
  display: flex;
  font-size: 12px;
  font-weight: 600;
  gap: 8px;
}
.dashChartLegend strong {
  margin-left: auto;
}
.dashChartSwatch {
  border-radius: 999px;
  display: inline-block;
  flex-shrink: 0;
  height: 8px;
  width: 8px;
}
.dashChartAxis {
  fill: #94a3b8;
  font-size: 10px;
  font-weight: 600;
}
.dashChartLegendInline {
  align-items: center;
  display: flex;
  gap: 14px;
}
.dashLegendItem {
  align-items: center;
  color: #64748b;
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  gap: 6px;
}
.dashSwatchNavy,
.dashSwatchTeal {
  border-radius: 3px;
  display: inline-block;
  height: 8px;
  width: 12px;
}
.dashSwatchNavy {
  background: #1e3a5f;
}
.dashSwatchTeal {
  background: #14b8a6;
}
.dashGroupBars {
  display: block;
  margin-top: 4px;
  width: 100%;
}
.dashTrendCard {
  min-height: 360px;
}
.dashTrendChartWrap {
  display: block;
  flex: 1 1 auto;
  margin-top: 8px;
  min-height: 240px;
  width: 100%;
}
.dashTrendSvg {
  display: block;
  height: auto;
  max-width: 100%;
  min-height: 240px;
  width: 100%;
}
.dashTrendChart {
  align-items: stretch;
  display: flex;
  flex: 1 1 auto;
  gap: 10px;
  min-height: 240px;
  width: 100%;
}
.dashTrendYAxis {
  color: #94a3b8;
  display: flex;
  flex: 0 0 28px;
  flex-direction: column;
  font-size: 11px;
  font-weight: 600;
  justify-content: space-between;
  padding: 4px 0 26px;
  text-align: right;
}
.dashTrendPlot {
  align-items: stretch;
  background-image: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent calc(25% - 1px),
    #eef2f6 calc(25% - 1px),
    #eef2f6 25%
  );
  background-position: 0 4px;
  background-repeat: no-repeat;
  background-size: 100% calc(100% - 26px);
  border-bottom: 1px solid #e8edf3;
  display: grid;
  flex: 1 1 auto;
  gap: 8px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-width: 0;
  padding: 4px 4px 0;
  width: 100%;
}
.dashTrendCol {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.dashTrendBars {
  align-items: flex-end;
  display: flex;
  flex: 1 1 auto;
  gap: 5px;
  justify-content: center;
  min-height: 180px;
  width: 100%;
}
.dashTrendBar {
  background: #cbd5e1;
  border-radius: 6px 6px 2px 2px;
  display: block;
  min-height: 0;
  width: 42%;
}
.dashTrendBar.isReceipt {
  background: linear-gradient(180deg, #274769 0%, #1e3a5f 100%);
}
.dashTrendBar.isIssue {
  background: linear-gradient(180deg, #2dd4bf 0%, #14b8a6 100%);
}
.dashTrendCol em {
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}
.dashTrendFoot {
  color: #94a3b8;
  display: flex;
  font-size: 12px;
  font-weight: 600;
  gap: 16px;
  margin-top: 10px;
}
.dashStaffAvatars {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  min-height: 96px;
  padding: 8px 0 4px;
}
.dashStaffAvatar {
  align-items: center;
  border: 3px solid #ffffff;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
  color: #ffffff;
  display: flex;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  height: 44px;
  justify-content: center;
  margin-left: 0;
  overflow: hidden;
  position: relative;
  width: 44px;
}
.dashStaffAvatar:first-child {
  margin-left: 0;
}
.dashStaffAvatar.isFeatured {
  height: 56px;
  width: 56px;
  z-index: 2;
}
.dashStaffAvatar img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.dashStaffBadge {
  background: #ffffff;
  border-radius: 999px;
  bottom: -2px;
  font-size: 12px;
  font-style: normal;
  line-height: 1;
  padding: 2px;
  position: absolute;
  right: -2px;
}
.dashStaffFeatured {
  color: #64748b;
  font-size: 12px;
  margin: 0 0 12px;
  text-align: center;
}
.dashStaffFeatured strong {
  color: #0f172a;
}
.dashStaffStats {
  border-top: 1px solid #eef2f6;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
  padding-top: 12px;
  text-align: center;
}
.dashStaffStats strong {
  color: #0f172a;
  display: block;
  font-size: 16px;
  font-weight: 800;
}
.dashStaffStats span {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
}
.dashSupplierHero {
  align-items: baseline;
  display: flex;
  gap: 10px;
  margin: 4px 0 12px;
}
.dashSupplierHero strong {
  color: #0f172a;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.dashSupplierCard {
  background:
    radial-gradient(circle at 100% 0%, rgba(251, 207, 232, 0.45) 0%, transparent 42%),
    #ffffff;
  overflow: hidden;
}
.dashDonutCard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 360px;
}
.dashDonutWrap {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  min-height: 0;
  padding: 8px 0 4px;
  width: 100%;
}
.dashDonutChart {
  align-items: center;
  display: grid;
  flex: 0 0 auto;
  justify-items: center;
  place-items: center;
  position: relative;
  width: 140px;
}
.dashDonutSvg {
  display: block;
  filter: drop-shadow(0 4px 12px rgba(15, 23, 42, 0.06));
  height: auto;
  width: 100%;
}
.dashDonutCenter {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1px;
  justify-content: center;
  left: 50%;
  pointer-events: none;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
}
.dashDonutCenter strong {
  color: #0f172a;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.dashDonutCenter span {
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dashDonutLegend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  min-width: 0;
  padding: 0;
  width: 100%;
}
.dashDonutLegendItem {
  align-items: center;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  transition: all 0.15s ease;
}
.dashDonutLegendItem:hover {
  background: #f8fafc;
  border-color: #e2e8f0;
}
.dashDonutLegendLabelGroup {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
}
.dashDonutLegendDot {
  border-radius: 999px;
  display: block;
  flex-shrink: 0;
  height: 8px;
  width: 8px;
}
.dashDonutLegendName {
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.dashDonutLegendPill {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #0f172a;
  display: inline-flex;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  gap: 6px;
  padding: 2px 8px;
  white-space: nowrap;
}
.dashDonutLegendPct {
  background: #e2e8f0;
  border-radius: 4px;
  color: #475569;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 4px;
}
.dashTrendCard {
  min-height: 360px;
}
.dashTrendCard .dashTrendChartWrap {
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.9) 0%, rgba(255, 255, 255, 0) 100%);
  border: 1px solid #eef2f6;
  border-radius: 14px;
  flex: 1 1 auto;
  padding: 8px 6px 2px;
  width: 100%;
}
.dashSupplierDelta {
  background: #ecfdf5;
  border-radius: 999px;
  color: #0d9488;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
}
.dashOrdersCard {
  background: #ffffff;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.dashOrdersBanner {
  margin-bottom: 0;
  padding: 13px 15px 12px;
}
.dashOrdersBanner .dashOrdersTrack {
  flex: 1 1 auto;
  width: 100%;
}
.dashOrdersBanner .dashOrdersSlide {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  grid-template-columns: none;
  height: auto;
  justify-content: space-between;
}
.dashOrdersBanner .dashOrdersBreakdown {
  margin-top: 0;
}
.dashOrdersBanner .dashOrdersDots {
  display: none;
}
.dashboardTopOrders .dashOrdersTrack {
  display: block;
  flex: 1 1 auto;
  width: 100%;
}
.dashboardTopOrders .dashOrdersTrackInner {
  display: flex;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  transition: transform 0.28s ease;
}
.dashboardTopOrders .dashOrdersSlide {
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  min-height: 0;
  min-width: 100%;
}
.dashboardTopOrders .dashOrdersTop {
  align-items: center;
  display: flex;
  gap: 10px;
}
.dashboardTopOrders .dashOrdersIcon {
  align-items: center;
  background: #eef2ff;
  border: 1px solid #e0e7ff;
  border-radius: 9px;
  color: #4f46e5;
  display: inline-flex;
  flex-shrink: 0;
  height: 34px;
  justify-content: center;
  width: 34px;
}
.dashboardTopOrders .dashOrdersCopy {
  flex: 1 1 auto;
  min-width: 0;
}
.dashboardTopOrders .dashOrdersLabel {
  color: #64748b;
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.dashboardTopOrders .dashOrdersHero {
  align-items: baseline;
  display: flex;
  gap: 8px;
  margin-top: 3px;
}
.dashboardTopOrders .dashOrdersHero strong {
  color: #0f172a;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}
.dashOrdersGrowth {
  align-items: center;
  background: #ecfdf5;
  border: 1px solid #d1fae5;
  border-radius: 6px;
  color: #059669;
  display: inline-flex;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  gap: 3px;
  padding: 2px 6px;
}
.dashOrdersGrowth.isNeutral {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
}
.dashboardTopOrders .dashOrdersBreakdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.dashBreakdownRow {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dashBreakdownMeta {
  align-items: center;
  display: flex;
  font-size: 11px;
  justify-content: space-between;
  line-height: 1.2;
}
.dashBreakdownLabel {
  align-items: center;
  color: #64748b;
  display: inline-flex;
  font-size: 11px;
  font-weight: 600;
  gap: 6px;
}
.dashStatusDot {
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  height: 6px;
  width: 6px;
}
.dashStatusDot.isCompleted {
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
}
.dashStatusDot.isPending {
  background: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15);
}
.dashStatusDot.isCancelled {
  background: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
}
.dashStatusDot.isInfo {
  background: #0284c7;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
}
.dashStatusDot.isViolet {
  background: #7c3aed;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}
.dashStatusDot.isMuted {
  background: #64748b;
  box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.15);
}
.dashBreakdownValue {
  color: #0f172a;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.dashOrdersMeter {
  background: #f1f5f9;
  border-radius: 999px;
  height: 5px;
  overflow: hidden;
  width: 100%;
}
.dashOrdersMeter > i {
  border-radius: 999px;
  display: block;
  height: 100%;
  min-width: 0;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.dashOrdersMeter.isCompleted > i {
  background: linear-gradient(90deg, #34d399 0%, #059669 100%);
}
.dashOrdersMeter.isPending > i {
  background: linear-gradient(90deg, #fbbf24 0%, #d97706 100%);
}
.dashOrdersMeter.isCancelled > i {
  background: linear-gradient(90deg, #fb7185 0%, #dc2626 100%);
}
.dashOrdersTrack {
  overflow: hidden;
  touch-action: pan-y;
  width: 100%;
}
.dashOrdersTrackInner {
  display: flex;
  transition: transform 0.28s ease;
  width: 100%;
}
.dashOrdersSlide {
  flex: 0 0 100%;
  min-width: 100%;
}
.dashOrdersTop {
  align-items: center;
  display: flex;
  gap: 12px;
}
.dashOrdersIcon {
  align-items: center;
  background: #eef2ff;
  border: 1px solid #e0e7ff;
  border-radius: 10px;
  color: #4f46e5;
  display: inline-flex;
  flex-shrink: 0;
  height: 40px;
  justify-content: center;
  width: 40px;
}
.dashOrdersCopy {
  min-width: 0;
}
.dashOrdersLabel {
  color: #64748b;
  display: block;
  font-size: 13px;
  font-weight: 600;
}
.dashOrdersHero {
  align-items: baseline;
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.dashOrdersHero strong {
  color: #0f172a;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.dashOrdersFooter {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  width: 100%;
}
.dashOrdersDots {
  align-items: center;
  display: flex;
  gap: 5px;
  margin: 0;
}
.dashOrdersDots button,
.dashOrdersDots i {
  appearance: none;
  background: #e2e8f0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  display: inline-block;
  height: 5px;
  padding: 0;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  width: 5px;
}
.dashOrdersDots button:hover {
  background: #94a3b8;
}
.dashOrdersDots button.isActive,
.dashOrdersDots i.isActive {
  background: #4f46e5;
  width: 14px;
}
.dashOrdersArrows {
  align-items: center;
  display: inline-flex;
  gap: 4px;
}
.dashOrdersArrowBtn {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  height: 20px;
  justify-content: center;
  padding: 0;
  transition: all 0.15s ease;
  width: 20px;
}
.dashOrdersArrowBtn:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #4f46e5;
  transform: scale(1.05);
}
.dashMixHero {
  margin: 2px 0 12px;
}
.dashMixHero strong {
  color: #0f172a;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.dashMixBadge {
  background: #f1f5f9;
  border-radius: 999px;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px;
}
.dashMixList .dashMixFill {
  background: #99f6e4 !important;
}
.dashRecentOrdersCard {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 12px -2px rgba(15, 23, 42, 0.02);
  margin-bottom: 16px;
  overflow: hidden;
  padding: 18px 20px;
}
.dashRecentOrdersHead {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}
.dashSectionTitleGroup {
  align-items: center;
  display: flex;
  gap: 12px;
}
.dashSectionIcon {
  align-items: center;
  background: #eef2ff;
  border: 1px solid #e0e7ff;
  border-radius: 10px;
  color: #4f46e5;
  display: inline-flex;
  flex-shrink: 0;
  height: 38px;
  justify-content: center;
  width: 38px;
}
.dashSectionTitleText {
  display: flex;
  flex-direction: column;
}
.dashSectionHeadingRow {
  align-items: center;
  display: flex;
  gap: 8px;
}
.dashSectionTitle {
  color: #0f172a;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}
.dashOrdersTotalBadge {
  background: #eef2ff;
  border: 1px solid #e0e7ff;
  border-radius: 999px;
  color: #4f46e5;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
}
.dashSectionSubtitle {
  color: #64748b;
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-top: 1px;
}
.dashViewAllBtnModern {
  align-items: center;
  appearance: none;
  background: #f0fdfa;
  border: 1px solid #ccfbf1;
  border-radius: 9px;
  color: #0f766e;
  cursor: pointer;
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 700;
  gap: 6px;
  padding: 6px 12px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.dashViewAllBtnModern:hover {
  background: #ccfbf1;
  border-color: #99f6e4;
  color: #0d9488;
  transform: translateX(2px);
}
.dashOrdersTableWrap {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  margin-top: 4px;
  overflow-x: auto;
  width: 100%;
}
.dashOrdersTable {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 1080px;
  table-layout: fixed;
  width: 100%;
}
.dashOrdersTable th {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 12px 14px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.dashOrdersTable td {
  border-bottom: 1px solid #f8fafc;
  color: #334155;
  font-size: 13px;
  max-width: 0;
  overflow: hidden;
  padding: 12px 14px;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}
.dashOrdersTableNeat {
  min-width: 1080px;
}
.dashOrdersTableNeat th:nth-child(1),
.dashOrdersTableNeat td:nth-child(1) {
  width: 175px;
}
.dashOrdersTableNeat th:nth-child(2),
.dashOrdersTableNeat td:nth-child(2) {
  width: 110px;
}
.dashOrdersTableNeat th:nth-child(3),
.dashOrdersTableNeat td:nth-child(3) {
  width: 220px;
}
.dashOrdersTableNeat th:nth-child(4),
.dashOrdersTableNeat td:nth-child(4) {
  width: 150px;
}
.dashOrdersTableNeat th:nth-child(5),
.dashOrdersTableNeat td:nth-child(5) {
  text-align: center;
  width: 65px;
}
.dashOrdersTableNeat th:nth-child(6),
.dashOrdersTableNeat td:nth-child(6) {
  text-align: left;
  width: 95px;
}
.dashOrdersTableNeat th:nth-child(7),
.dashOrdersTableNeat td:nth-child(7) {
  width: 105px;
}
.dashOrdersTableNeat th:nth-child(8),
.dashOrdersTableNeat td:nth-child(8) {
  text-align: center;
  width: 65px;
}
.dashOrdersTableNeat th:nth-child(9),
.dashOrdersTableNeat td:nth-child(9) {
  width: 115px;
}
.dashOrdersTableNeat th:nth-child(10),
.dashOrdersTableNeat td:nth-child(10) {
  text-align: right;
  width: 80px;
}
.dashOrderRow.isClickable {
  cursor: pointer;
}
.dashOrderRow.isClickable:hover td {
  background: #f8fafc;
}
.dashOrderIdBtn {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-block;
  padding: 0;
}
.dashOrderIdPill {
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: 6px;
  color: #2563eb;
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 3px 8px;
  transition: all 0.15s ease;
}
.dashOrderIdBtn:hover .dashOrderIdPill {
  background: #dbeafe;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.dashDateCell {
  color: #64748b;
  font-size: 12.5px;
  font-weight: 500;
}
.dashNumHead,
.dashNumCell {
  color: #475569;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: center;
}
.dashMoneyCell {
  color: #0f172a;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.dashActionHead,
.dashActionCell {
  text-align: right;
}
.dashOrderActionBtn {
  align-items: center;
  appearance: none;
  background: #f0fdfa;
  border: 1px solid #ccfbf1;
  border-radius: 7px;
  color: #0d9488;
  cursor: pointer;
  display: inline-flex;
  font-size: 11.5px;
  font-weight: 700;
  gap: 4px;
  height: 28px;
  justify-content: center;
  padding: 0 10px;
  transition: all 0.15s ease;
}
.dashOrderActionBtn:hover {
  background: #0d9488;
  border-color: #0d9488;
  color: #ffffff;
  transform: scale(1.03);
}
img.dashOrderThumb {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  flex-shrink: 0;
  height: 38px;
  object-fit: cover;
  width: 38px;
}
.dashOrderSwatch {
  border-radius: 8px;
  display: inline-block;
  flex-shrink: 0;
  height: 38px;
  width: 38px;
}
.dashOrdersFullPage {
  margin-top: 4px;
  min-height: 420px;
}
.dashOrdersCountHint {
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
}
.dashOrderDetailOverlay {
  align-items: center;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  padding: 24px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1200;
}
.dashOrderDetailModal {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.24);
  max-height: min(86vh, 760px);
  max-width: 640px;
  overflow: auto;
  padding: 22px 24px 24px;
  width: 100%;
}
.dashOrderDetailHead {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}
.dashOrderDetailHead h3 {
  color: #0f172a;
  font-size: 18px;
  font-weight: 800;
  margin: 0;
}
.dashOrderDetailHead span {
  color: #2563eb;
  display: block;
  font-family: ui-monospace, monospace;
  font-size: 12.5px;
  font-weight: 700;
  margin-top: 4px;
}
.dashOrderDetailClose {
  appearance: none;
  background: #f1f5f9;
  border: 0;
  border-radius: 999px;
  color: #475569;
  cursor: pointer;
  font-size: 14px;
  height: 32px;
  transition: all 0.15s ease;
  width: 32px;
}
.dashOrderDetailClose:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.dashOrderDetailMeta {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 18px;
}
.dashOrderDetailMeta div {
  background: #f8fafc;
  border: 1px solid #eef2f6;
  border-radius: 12px;
  padding: 10px 12px;
}
.dashOrderDetailMeta span {
  color: #94a3b8;
  display: block;
  font-size: 11px;
  font-weight: 600;
}
.dashOrderDetailMeta strong,
.dashOrderDetailMeta .dashPayBadge,
.dashOrderDetailMeta .dashOrderBadge {
  display: inline-flex;
  margin-top: 6px;
}
.dashOrderDetailMeta strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
}
.dashOrderDetailLines h4 {
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
  margin: 0 0 10px;
}
.dashOrderDetailLine {
  align-items: center;
  border-top: 1px solid #f1f5f9;
  display: flex;
  gap: 12px;
  padding: 12px 0;
}
.dashOrderDetailLineCopy {
  flex: 1 1 auto;
  min-width: 0;
}
.dashOrderDetailLineCopy strong {
  color: #0f172a;
  display: block;
  font-size: 13px;
  font-weight: 700;
}
.dashOrderDetailLineCopy em {
  color: #94a3b8;
  display: block;
  font-size: 12px;
  font-style: normal;
  margin-top: 2px;
}
.dashOrderDetailLinePrice {
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .dashOrderDetailMeta {
    grid-template-columns: 1fr 1fr;
  }
}
.dashOrderId {
  color: #2563eb;
  display: block;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashOrderProduct,
.dashOrderCustomer {
  align-items: center;
  display: flex;
  gap: 10px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.dashOrderProductCopy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
.dashOrderProductCopy strong,
.dashOrderProductCopy em,
.dashOrderCustomer > :not(.dashOrderAvatar) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashOrderProductCopy strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}
.dashOrderProductCopy em {
  color: #94a3b8;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
}
.dashOrderSwatch.tone0 {
  background: #fce7f3;
}
.dashOrderSwatch.tone1 {
  background: #dbeafe;
}
.dashOrderSwatch.tone2 {
  background: #dcfce7;
}
.dashOrderSwatch.tone3 {
  background: #ffedd5;
}
.dashOrderAvatar {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  height: 30px;
  justify-content: center;
  width: 30px;
}
.dashOrderAvatar.isIndigo {
  background: #e0e7ff;
  border: 1px solid #c7d2fe;
  color: #4338ca;
}
.dashOrderAvatar.isEmerald {
  background: #d1fae5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}
.dashOrderAvatar.isSky {
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  color: #0369a1;
}
.dashOrderAvatar.isAmber {
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #92400e;
}
.dashOrderAvatar.isRose {
  background: #ffe4e6;
  border: 1px solid #fecdd3;
  color: #9f1239;
}
.dashOrderAvatar.isPurple {
  background: #f3e8ff;
  border: 1px solid #e9d5ff;
  color: #7e22ce;
}
.dashOrderCustomerName {
  color: #1e293b;
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashPayBadge,
.dashOrderBadge {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  gap: 5px;
  padding: 3px 9px;
}
.dashStatusPillDot {
  border-radius: 999px;
  display: inline-block;
  flex-shrink: 0;
  height: 6px;
  width: 6px;
}
.dashPayBadge.isPaid {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #059669;
}
.dashPayBadge.isPaid .dashStatusPillDot,
.dashStatusPillDot.isPayPaid {
  background: #10b981;
}
.dashPayBadge.isPending {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #b45309;
}
.dashPayBadge.isPending .dashStatusPillDot,
.dashStatusPillDot.isPayPending {
  background: #f59e0b;
}
.dashPayBadge.isFailed {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}
.dashPayBadge.isFailed .dashStatusPillDot,
.dashStatusPillDot.isPayFailed {
  background: #ef4444;
}
.dashOrderBadge.isPaid {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
}
.dashOrderBadge.isPaid .dashStatusPillDot,
.dashStatusPillDot.isOrderPaid {
  background: #10b981;
}
.dashOrderBadge.isPending {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  color: #0369a1;
}
.dashOrderBadge.isPending .dashStatusPillDot,
.dashStatusPillDot.isOrderPending {
  background: #0284c7;
}
.dashOrderBadge.isFailed {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: #be123c;
}
.dashOrderBadge.isFailed .dashStatusPillDot,
.dashStatusPillDot.isOrderFailed {
  background: #e11d48;
}
.dashOrdersTableFooter {
  align-items: center;
  color: #64748b;
  display: flex;
  font-size: 12.5px;
  justify-content: space-between;
  margin-top: 14px;
  padding: 0 2px;
}
.dashTableSummary strong {
  color: #0f172a;
  font-weight: 700;
}
.dashOrdersTablePager {
  align-items: center;
  display: inline-flex;
  gap: 5px;
}
.dashTablePageBtn {
  align-items: center;
  appearance: none;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #334155;
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  height: 32px;
  justify-content: center;
  min-width: 32px;
  padding: 0 8px;
  transition: all 0.15s ease;
}
.dashTablePageBtn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.dashTablePageBtn.isActive {
  background: #0d9488;
  border-color: #0d9488;
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.25);
  color: #ffffff;
}
.dashTableNavBtn {
  align-items: center;
  appearance: none;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  gap: 5px;
  height: 32px;
  padding: 0 12px;
  transition: all 0.15s ease;
}
.dashTableNavBtn:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}
.dashTableNavBtn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.dashMiniStats {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
}
.dashMiniStats div {
  background: #f8fafc;
  border-radius: 10px;
  padding: 8px 6px;
  text-align: center;
}
.dashMiniStats em {
  color: #0f172a;
  display: block;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}
.dashMiniStats span {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 600;
}
.dashMixList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dashMixList li {
  min-width: 0;
}
.dashMixMeta {
  align-items: center;
  color: #64748b;
  display: flex;
  font-size: 12px;
  font-weight: 600;
  justify-content: space-between;
  margin-bottom: 4px;
}
.dashMixMeta strong {
  color: #0f172a;
}
.dashMixTrack {
  background: #f1f5f9;
  border-radius: 999px;
  height: 7px;
  overflow: hidden;
}
.dashMixFill {
  border-radius: 999px;
  display: block;
  height: 100%;
  min-width: 8px;
}
.dashEmptyCompact {
  min-height: 88px;
}
@media (max-width: 1180px) {
  .dashboardOpsGrid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
  .dashMixCard {
    grid-column: 1 / -1;
  }
  .dashboardTopSplit {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 24%);
  }
}
@media (max-width: 980px) {
  .dashboardChartsRow,
  .dashboardOpsGrid {
    grid-template-columns: 1fr;
  }
  .dashDonutWrap {
    flex-direction: column;
  }
  .dashMixCard {
    grid-column: auto;
  }
  .dashboardTopSplit {
    grid-template-columns: 1fr;
  }
  .dashboardTopOrders {
    max-width: none;
  }
  .dashboardTopOrders .dashOrdersBreakdown {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 720px) {
  ui-row.dashboardKpiRow,
  ui-row.dashboardKpiRowCompact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
ui-row.dashboardSplitRow {
  align-items: stretch;
  display: flex;
  gap: 16px;
  width: 100%;
}
ui-row.dashboardSplitRow > * {
  flex: 1 1 0;
  min-width: 0;
}
.Container.dashPanel.glassCardFlat {
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.03),
    0 8px 24px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 280px;
  overflow: visible;
  padding: 18px 20px 14px;
}
.dashRecentMovementsCard {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 12px -2px rgba(15, 23, 42, 0.02);
  margin-bottom: 16px;
  overflow: hidden;
  padding: 18px 20px;
}
.dashRecentMovementsHead {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}
.dashSectionIcon.isViolet {
  background: #f5f3ff;
  border: 1px solid #ede9fe;
  color: #7c3aed;
}
.dashMovementsTotalBadge {
  background: #f5f3ff;
  border: 1px solid #ede9fe;
  border-radius: 999px;
  color: #7c3aed;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
}
.dashMovementsTableWrap {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  margin-top: 4px;
  overflow-x: auto;
  width: 100%;
}
.dashMovementsTable {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 760px;
  table-layout: fixed;
  width: 100%;
}
.dashMovementsTable th {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 12px 14px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.dashMovementsTable th:nth-child(1) {
  width: 260px;
}
.dashMovementsTable th:nth-child(2) {
  width: 180px;
}
.dashMovementsTable th:nth-child(3) {
  width: 160px;
}
.dashMovementsTable th:nth-child(4) {
  width: 140px;
}
.dashMovementsTable td {
  border-bottom: 1px solid #f8fafc;
  color: #334155;
  font-size: 13px;
  padding: 12px 14px;
  vertical-align: middle;
  white-space: nowrap;
}
.dashMovementRow:hover td {
  background: #f8fafc;
}
.dashMovementCodePill {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #334155;
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
}
.dashMoveTypeBadge {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  gap: 5px;
  padding: 3px 10px;
}
.dashMoveTypeBadge.isInbound {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #059669;
}
.dashMoveTypeBadge.isOutbound {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
}
.dashMoveTypeBadge.isTransfer {
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  color: #6d28d9;
}
.dashMoveTypeBadge.isAdjust {
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  color: #0f766e;
}
.dashMoveStatusBadge {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #475569;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  gap: 6px;
  padding: 3px 9px;
}
.dashMoveStatusBadge.isCompleted {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}
.dashEmptyState {
  align-items: center;
  background: #f8fafc;
  border: 1px dashed #e2e8f0;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  min-height: 140px;
  padding: 24px 18px;
  text-align: center;
}
.dashEmptyState strong {
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}
.dashEmptyState span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}

/* Low Stock & Expiry Section Cards */
.dashboardSplitRow {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 16px;
  width: 100%;
}
@media (max-width: 1024px) {
  .dashboardSplitRow {
    grid-template-columns: 1fr;
  }
}
.dashLowStockCard,
.dashExpiryCard {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 12px -2px rgba(15, 23, 42, 0.02);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 280px;
  overflow: hidden;
  padding: 18px 20px;
}
.dashLowStockHead,
.dashExpiryHead {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}
.dashSectionIcon.isAmber {
  background: #fffbeb;
  border: 1px solid #fef3c7;
  color: #d97706;
}
.dashSectionIcon.isRose {
  background: #fff1f2;
  border: 1px solid #ffe4e6;
  color: #e11d48;
}
.dashLowStockTotalBadge {
  background: #fffbeb;
  border: 1px solid #fef3c7;
  border-radius: 999px;
  color: #b45309;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
}
.dashExpiryTotalBadge {
  background: #fff1f2;
  border: 1px solid #ffe4e6;
  border-radius: 999px;
  color: #be123c;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
}
.dashCreatePoBtn {
  align-items: center;
  background: #0f172a;
  border: 1px solid #0f172a;
  border-radius: 8px;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  gap: 6px;
  padding: 6px 12px;
  transition: all 0.2s ease;
}
.dashCreatePoBtn:hover {
  background: #1e293b;
  border-color: #1e293b;
  transform: translateY(-1px);
}
.dashLowStockList,
.dashExpiryList {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
}
.dashLowStockRow,
.dashExpiryRow {
  align-items: center;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  transition: all 0.15s ease;
}
.dashLowStockRow:hover,
.dashExpiryRow:hover {
  background: #f8fafc;
  border-color: #e2e8f0;
}
.dashLowStockItemInfo,
.dashExpiryItemInfo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.dashLowStockTitle {
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashLowStockMeta {
  align-items: center;
  display: flex;
  gap: 8px;
}
.dashSkuTag {
  background: #f1f5f9;
  border-radius: 4px;
  color: #475569;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 5px;
}
.dashWarehouseTag {
  color: #64748b;
  font-size: 11px;
}
.dashStockLevelPill {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  gap: 5px;
  padding: 3px 9px;
  white-space: nowrap;
}
.dashStockLevelPill.isCritical {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}
.dashStockLevelPill.isLow {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #b45309;
}
.dashBatchCodePill {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #0f172a;
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 7px;
  width: fit-content;
}
.dashExpiryDateText {
  color: #64748b;
  font-size: 11px;
}
.dashExpiryCountdownPill {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  gap: 5px;
  padding: 3px 9px;
  white-space: nowrap;
}
.dashExpiryCountdownPill.isUrgent {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: #e11d48;
}
.dashExpiryCountdownPill.isNormal {
  background: #fffbeb;
  border: 1px solid #fef3c7;
  color: #d97706;
}


/* Store list page */
.Container.storeMainContent {
  position: relative;
  flex: 1;
  min-width: 0;
}
.storeModalOverlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
}
.storeModalPanel {
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  border-radius: 16px;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background-color: rgba(var(--c10-rgb), 0.95);
  border: 1px solid var(--c6);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}
.storeModalHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.storeModalTitle {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #0f172a;
}
.storeModalClose {
  border: none;
  background: transparent;
  font-size: 18px;
  color: #64748b;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}
.storeModalClose:hover {
  background: #f1f5f9;
}
.storeModalBody {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.storeModalFooter {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}
.storeFormField {
  margin-bottom: 12px;
}
label.warehouseDefaultCheck {
  align-items: center;
  color: #334155;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  gap: 8px;
}
label.warehouseDefaultCheck input {
  accent-color: #16a34a;
  height: 16px;
  width: 16px;
}
.storeFormError {
  color: #dc2626;
  font-size: 13px;
  margin-top: 8px;
}
.storeSaveNotice {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 8px;
  color: #047857;
  font-size: 13px;
  margin-bottom: 10px;
  padding: 10px 12px;
}
.storePageTitle {
  font-size: 20px;
  font-weight: 600;
  color: #0f172a;
}
.storeToolbarRow {
  margin-bottom: 16px;
}
.storeFilterRow {
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.storeSearchField {
  flex: 1;
  min-width: 200px;
}
.storeStatusFilter {
  min-width: 160px;
}
.storeStatusFilter .fieldLabel {
  display: none;
}
.storeCountLabel {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 12px;
}
.storeTable {
  padding: 0;
  overflow: hidden;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background-color: rgba(var(--c10-rgb), 0.9);
  border: 1px solid var(--c6);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.storeTableHeader {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(248, 250, 252, 0.6);
}
.storeTableRow {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}
.storeTableRow:last-child {
  border-bottom: none;
}
ui-row.storeTableGrid {
  display: grid !important;
  grid-template-columns:
    minmax(140px, 2fr)
    minmax(72px, 0.9fr)
    minmax(100px, 1.1fr)
    minmax(110px, 1.1fr)
    minmax(88px, 0.8fr)
    72px;
  gap: 16px;
  align-items: center;
  width: 100%;
}
ui-row.storeTableGrid > * {
  min-width: 0;
  flex: none !important;
}
.storeHeaderCell,
.storeCell {
  min-width: 0;
  font-size: 13px;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.storeHeaderCell {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #64748b;
  text-transform: uppercase;
}
.storeCellName {
  font-weight: 600;
  color: #0f172a;
}
.storeColStatus {
  display: flex;
  align-items: center;
}
.storeColActions,
.storeActionsCell {
  justify-content: flex-end;
  justify-self: end;
  text-align: right;
}
.storeActionsCell ui-row,
.storeActionsCell .Container {
  gap: 2px;
}
.Container.storeActionIcon {
  align-items: center;
  border-radius: 8px;
  display: inline-flex;
  height: 32px;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
  width: 32px;
}
.Container.storeActionIcon ui-icon {
  color: #64748b;
  font-size: 18px !important;
}
.Container.storeActionIcon:hover {
  background-color: #f1f5f9;
}
.Container.storeActionIcon:hover ui-icon {
  color: #334155;
}
.Container.storeActionDelete:hover {
  background-color: #fef2f2;
}
.Container.storeActionDelete:hover ui-icon {
  color: #ef4444;
}
.productModalPanel {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
  padding: 0;
}
.productModalPanel .storeModalHeader {
  flex-shrink: 0;
  margin-bottom: 0;
  padding: 24px 24px 16px;
}
.productModalPanel .storeModalBody,
.productModalBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 24px;
  -webkit-overflow-scrolling: touch;
}
.productModalPanel .storeModalFooter {
  flex-shrink: 0;
  margin-top: 0;
  padding: 16px 24px 24px;
  border-top: 1px solid #e2e8f0;
}
.productFormGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  padding-bottom: 8px;
}
.productFormGrid .storeFormField,
.productFormGrid .FormFieldStyle {
  margin-bottom: 0;
}
.productFormFullWidth {
  grid-column: 1 / -1;
}
.supplierProductPicker {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
}
.supplierProductOption {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  font-size: 14px;
  color: #0f172a;
  cursor: pointer;
}
.supplierProductOption input {
  margin: 0;
}
.entityTableRowClickable {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.entityTableRowClickable:hover {
  background: rgba(249, 115, 22, 0.08);
}
.storeToolbarRow {
  margin-bottom: 16px;
}
.pageToolbarRow {
  align-items: center;
}
.pageToolbarHint {
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
  max-width: 520px;
}
.entityDetailModal {
  max-width: 820px;
}
.entityDetailHeader {
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}
.entityDetailHeaderMain {
  flex: 1;
  min-width: 0;
}
.entityDetailTitleRow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.entityDetailTitle {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
}
.entityDetailStatusWrap {
  display: inline-flex;
}
.entityDetailMeta {
  margin: 0;
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
}
.entityDetailBody {
  padding-top: 18px;
}
.entityDetailNotes {
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.entityDetailNotesText {
  margin: 6px 0 0;
  font-size: 14px;
  color: #334155;
  line-height: 1.5;
}
.entityDetailSectionHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.entityDetailSectionTitle {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
}
.entityDetailSectionCount {
  font-size: 13px;
  color: #64748b;
}
.entityDetailTableWrap {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}
.entityDetailTableHeader {
  background: #fff7ed;
}
.entityDetailSubtotalRow {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  padding: 12px 16px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}
.detailGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  margin-bottom: 20px;
}
.detailFieldFull {
  grid-column: 1 / -1;
}
.detailField {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
}
.detailFieldLabel {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.detailFieldValue {
  font-size: 14px;
  color: #0f172a;
  word-break: break-word;
}
.detailSection {
  margin-top: 4px;
}
.detailList {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}
.detailListItem {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  font-size: 14px;
  color: #0f172a;
  border-bottom: 1px solid #f1f5f9;
}
.detailListItem:last-child {
  border-bottom: none;
}
.detailListItemSku {
  font-weight: 600;
  color: #ea580c;
  font-size: 13px;
}
.detailListItemName {
  color: #334155;
}
.poDetailLineGrid {
  grid-template-columns: 48px 2fr 1fr 1fr 1fr;
}
.productFormGrid .TextView.fieldLabel,
.productFormGrid span.fieldLabel {
  display: block;
  text-align: left;
  width: 100%;
}
.productFormGrid .roleSelect,
.productFormGrid .InputField {
  width: 100%;
}
.stockFormModalPanel {
  max-width: 640px;
}
.stockFormHint {
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
  margin: 4px 0 0;
  text-align: left;
}
p.stockFormError,
.stockFormError {
  margin: 0;
  text-align: left;
}
.productFormGrid .stockFormQuantityField {
  justify-self: start;
  max-width: 280px;
  width: 100%;
}
.categoryImageUploadField {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
img.categoryImagePreview,
.categoryImagePreview {
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  height: 96px;
  object-fit: cover;
  width: 96px;
}
input.categoryImageFileInput,
.categoryImageFileInput {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  max-width: 100%;
  padding: 10px 12px;
}
p.categoryImageHint,
.categoryImageHint {
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}
.productImagesUploadField {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.productImagesPreviewGrid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.productImagePreviewCard {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
img.productImagePreviewThumb,
.productImagePreviewThumb {
  display: block;
  height: 96px;
  object-fit: cover;
  width: 100%;
}
button.productImageRemoveBtn {
  background: rgba(15, 23, 42, 0.72);
  border: none;
  border-radius: 999px;
  color: #ffffff;
  cursor: pointer;
  font-size: 11px;
  height: 22px;
  position: absolute;
  right: 6px;
  top: 6px;
  width: 22px;
}
.productImagesEmptyState {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  color: #64748b;
  font-size: 13px;
  padding: 16px;
}
ui-row.storeTableGrid.categoryTableGrid {
  grid-template-columns: minmax(140px, 2fr) minmax(72px, 1fr) minmax(88px, 0.8fr) 72px;
}

/* Entity CRUD table — preview style */
.entityFilterRow {
  align-items: center;
}
.entityFilterCount {
  font-size: 14px;
  color: #64748b;
  margin-left: auto;
  white-space: nowrap;
}
.entityTableWrap {
  padding: 0;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e7e5e4;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.entityTableHeader {
  padding: 10px 16px;
  border-bottom: 1px solid #f1f5f9;
  background: rgba(255, 251, 235, 0.55);
}
.entityTableRow {
  padding: 14px 16px;
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.15s ease;
}
.entityTableRow:nth-child(even) {
  background: rgba(255, 251, 235, 0.18);
}
.entityTableRow:hover {
  background: rgba(255, 251, 235, 0.42);
}
.entityTableRow:last-child {
  border-bottom: none;
}
ui-row.entityTableGrid {
  display: grid !important;
  gap: 16px;
  align-items: center;
  width: 100%;
}
ui-row.entityTableGrid > * {
  min-width: 0;
  flex: none !important;
}
ui-row.entityTableGrid.categoryTableGrid {
  grid-template-columns:
    minmax(120px, 1.3fr)
    minmax(72px, 0.75fr)
    minmax(160px, 2fr)
    minmax(88px, 0.85fr)
    72px;
}
ui-row.entityTableGrid.uomTableGrid {
  grid-template-columns:
    minmax(120px, 1.4fr)
    minmax(72px, 0.7fr)
    minmax(88px, 0.85fr)
    minmax(88px, 0.75fr)
    minmax(88px, 0.85fr)
    72px;
}
ui-row.entityTableGrid.heroSlideTableGrid {
  grid-template-columns:
    40px
    72px
    minmax(100px, 0.9fr)
    minmax(160px, 1.6fr)
    minmax(90px, 0.8fr)
    minmax(80px, 0.7fr)
    120px;
}
.heroSlideThumbWrap {
  width: 64px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.heroSlideThumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.heroSlideThumbEmpty {
  font-size: 10px;
  color: #64748b;
}
.HeroSliderSettingsPage.heroSlideEditorOpen .storeMainContent {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.HeroSliderSettingsPage.heroSlideEditorOpen .storeMainContent > ui-column {
  flex: 1;
  height: 100%;
  min-height: 0;
}
.heroSlideEditorPage {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 16px 24px 24px;
}
.heroSlideEditorToolbar {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 16px;
}
.heroSlideEditorTitle {
  margin: 0;
}
.heroSlideEditorActions {
  display: flex;
  gap: 10px;
}
.heroSlideEditorSplit {
  align-items: stretch;
  display: grid;
  flex: 1;
  gap: 20px;
  grid-template-columns: minmax(340px, 0.95fr) minmax(380px, 1.15fr);
  min-height: 0;
}
.heroSlideEditorForm {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  min-height: 0;
  overflow: auto;
  padding: 20px;
}
.heroSlideEditorPreviewPane {
  min-height: 0;
  overflow: auto;
  padding-top: 2px;
}
.heroSlideEditorPreviewLabel {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.heroSlideEditorPreviewBanner.landingHeroBanner {
  min-height: 360px;
}
.heroSlideEditorPreviewBanner .landingHeroSlideStack {
  min-height: 360px;
}
.heroSlideEditorPreviewBanner .landingHeroCopy {
  min-height: 360px;
  padding: 28px 18px 32px 28px;
}
.heroSlideEditorPreviewBanner h2.landingHeroTitle {
  font-size: 28px;
}
.heroSlidePreviewMuted {
  opacity: 0.45;
}
.heroSlidePreviewEmptyImage {
  align-items: center;
  background: linear-gradient(180deg, #ecfdf3 0%, #dcfce7 100%);
  color: #166534;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  height: 100%;
  justify-content: center;
  min-height: 360px;
  padding: 24px;
  text-align: center;
}
@media (max-width: 1180px) {
  .heroSlideEditorSplit,
  .productEditorSplit {
    grid-template-columns: 1fr;
    overflow: auto;
  }
  .heroSlideEditorForm,
  .heroSlideEditorPreviewPane,
  .productEditorForm,
  .productEditorPreviewPane {
    overflow: visible;
  }
}
.DashboardPage.productEditorOpen .storeMainContent,
.ProductListPage.productEditorOpen .storeMainContent {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.DashboardPage.productEditorOpen .storeMainContent > ui-column,
.ProductListPage.productEditorOpen .storeMainContent > ui-column {
  flex: 1;
  height: 100%;
  min-height: 0;
}
.productEditorPage {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 16px 24px 24px;
}
.productEditorToolbar {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 16px;
}
.productEditorTitle {
  margin: 0;
}
.productEditorActions {
  display: flex;
  gap: 10px;
}
.productEditorSplit {
  align-items: stretch;
  display: grid;
  flex: 1;
  gap: 20px;
  grid-template-columns: minmax(340px, 0.95fr) minmax(360px, 1.05fr);
  min-height: 0;
}
.productEditorForm {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  min-height: 0;
  overflow: auto;
  padding: 20px;
}
.productEditorPreviewPane {
  min-height: 0;
  overflow: auto;
  padding-top: 2px;
}
.productEditorPreviewLabel {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.productEditorPreviewCard {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}
.productEditorPreviewMedia {
  background: #f8fafc;
  min-height: 220px;
  position: relative;
}
.productEditorPreviewMedia.isUploadable {
  cursor: pointer;
}
.productEditorPreviewPhoto {
  display: block;
  height: 240px;
  object-fit: cover;
  width: 100%;
}
.productEditorPreviewEmptyImage {
  align-items: center;
  color: #64748b;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-weight: 600;
  gap: 6px;
  height: 220px;
  justify-content: center;
}
.productEditorPreviewMedia.isUploadable .productEditorPreviewEmptyImage {
  border: 2px dashed #cbd5e1;
  border-radius: 16px;
  height: 188px;
  margin: 16px;
  pointer-events: none;
}
.productEditorPreviewUploadHint {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 500;
}
.productEditorPreviewChangeHint {
  background: linear-gradient(transparent, rgba(15, 23, 42, 0.72));
  bottom: 0;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  left: 0;
  padding: 28px 16px 14px;
  pointer-events: none;
  position: absolute;
  right: 0;
  text-align: center;
}
.productEditorPreviewUploadInput {
  cursor: pointer;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.productEditorPreviewBody {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 22px 22px;
}
.productEditorPreviewMeta {
  align-items: center;
  display: flex;
  gap: 8px;
}
.productEditorPreviewSku {
  color: #ea580c;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.productEditorPreviewStatus {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
}
.productEditorPreviewStatus.isActive {
  background: #ecfdf5;
  color: #047857;
}
.productEditorPreviewStatus.isInactive {
  background: #f1f5f9;
  color: #475569;
}
.productEditorPreviewStatus.isDiscontinued {
  background: #fef2f2;
  color: #b91c1c;
}
.productEditorPreviewName {
  color: #0f172a;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.25;
  margin: 0;
}
.productEditorPreviewCategory {
  color: #16a34a;
  font-size: 13px;
  font-weight: 600;
}
.productEditorPreviewDesc {
  color: #64748b;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}
.productEditorPreviewPrices {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}
.productEditorPreviewPrice {
  background: #f8fafc;
  border-radius: 12px;
  padding: 12px;
}
.productEditorPreviewPriceLabel {
  color: #94a3b8;
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.productEditorPreviewPrice strong {
  color: #0f172a;
  font-size: 18px;
}
.productEditorPreviewFacts {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}
.productEditorPreviewFact span {
  color: #94a3b8;
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.productEditorPreviewFact strong {
  color: #334155;
  font-size: 14px;
}
.productEditorPreviewCard .isMuted {
  opacity: 0.45;
}
ui-row.entityTableGrid.storeEntityTableGrid {
  grid-template-columns:
    minmax(120px, 1.3fr)
    minmax(72px, 0.75fr)
    minmax(100px, 1fr)
    minmax(110px, 1.1fr)
    minmax(120px, 1.1fr)
    minmax(88px, 0.85fr)
    72px;
}
.storeFormHint {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #64748b;
}
ui-row.entityTableGrid.warehouseEntityTableGrid {
  grid-template-columns:
    minmax(120px, 1.3fr)
    minmax(72px, 0.75fr)
    minmax(100px, 1fr)
    minmax(160px, 2fr)
    minmax(88px, 0.85fr)
    72px;
}
ui-row.entityTableGrid.productEntityTableGrid {
  grid-template-columns:
    56px
    minmax(90px, 0.9fr)
    minmax(140px, 1.4fr)
    minmax(100px, 1fr)
    minmax(80px, 0.7fr)
    minmax(88px, 0.85fr)
    72px;
}
.Container.productListThumbCell {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  padding: 0;
}
img.productListThumb {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: block;
  height: 40px;
  object-fit: cover;
  width: 40px;
}
.productListThumbPlaceholder {
  align-items: center;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  color: #cbd5e1;
  display: inline-flex;
  font-size: 12px;
  height: 40px;
  justify-content: center;
  width: 40px;
}
ui-row.entityTableGrid.stockEntityTableGrid {
  grid-template-columns:
    minmax(140px, 1.6fr)
    minmax(90px, 0.9fr)
    minmax(120px, 1.2fr)
    minmax(80px, 0.7fr)
    minmax(80px, 0.7fr);
}
ui-row.entityTableGrid.poEntityTableGrid {
  grid-template-columns:
    minmax(110px, 1fr)
    minmax(140px, 1.4fr)
    minmax(100px, 0.9fr)
    minmax(110px, 1fr)
    minmax(100px, 0.95fr)
    72px;
}
.poPageHeader {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.poPageTitle {
  line-height: 1.25;
  margin: 0;
}
.poPageSubtitle {
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
  max-width: 720px;
}
.poFormCard {
  padding: 22px 24px 24px;
  margin-bottom: 16px;
  border: 1px solid #e8dfd2;
}
.poFormSectionTitle {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.3;
  margin: 0 0 20px;
}
.poSectionHeaderRow {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
}
.poSectionHeaderRow .poFormSectionTitle {
  margin-bottom: 0;
}
.poDetailsGrid {
  gap: 20px 22px;
  margin-top: 4px;
}
.poDetailsGrid .storeFormField,
.poDetailsGrid .FormFieldStyle {
  margin-bottom: 0;
}
.poDetailsGrid .TextView.fieldLabel,
.poDetailsGrid span.fieldLabel {
  display: block;
  margin-bottom: 10px;
}
.poDetailsGrid .storeFormField > ui-column,
.poDetailsGrid .FormFieldStyle > ui-column {
  gap: 10px;
}
.poDetailsGrid .roleSelect,
.poDetailsGrid .InputField {
  margin-top: 0;
  min-height: 40px;
}
.poLineTableWrap {
  border: 1px solid #e8dfd2;
  border-radius: 12px;
  margin-top: 0;
  overflow: hidden;
}
.poLineTableWrap .entityTableRow {
  align-items: center;
  border-bottom: 1px solid #f1f5f9;
  padding: 12px 18px;
}
.poLineTableWrap .entityTableRow:last-of-type {
  border-bottom: none;
}
.poLineTableWrap .entityTableHeader {
  background: #fafaf9;
  border-bottom: 1px solid #e7e5e4;
  padding: 12px 18px;
}
ui-row.entityTableGrid.poLineTableGrid {
  align-items: center;
  grid-template-columns:
    minmax(220px, 2.5fr)
    minmax(80px, 0.55fr)
    minmax(104px, 0.75fr)
    minmax(96px, 0.7fr)
    48px;
  gap: 14px;
}
.poLineTableWrap .entityHeaderCell {
  padding-bottom: 0;
}
.poLineActionsCell {
  align-items: center;
  display: flex;
  justify-content: center;
  justify-self: center;
}
.poLineFieldCell {
  min-width: 0;
  width: 100%;
}
.poLineSelect,
.poLineTableWrap .roleSelect {
  width: 100%;
  min-height: 38px;
  border: 1px solid #d6d3d1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-size: 14px;
  padding: 8px 10px;
}
.poLineInput,
.poLineTableWrap .InputField {
  width: 100%;
  min-height: 38px;
}
.poLineTotalCell {
  font-weight: 600;
  color: #0f172a;
  text-align: right;
  padding-right: 4px;
}
.poSubtotalBar {
  align-items: center;
  background: #fafaf9;
  border-top: 1px solid #e7e5e4;
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  padding: 14px 18px;
}
.poSubtotalLabel {
  color: #64748b;
  font-size: 13px;
}
.poSubtotalValue {
  color: #0f172a;
  font-size: 15px;
  font-weight: 600;
}
.poFormActions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 4px;
  padding-top: 8px;
}
.entityHeaderCell {
  min-width: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #92400e;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entityHeaderActions {
  text-align: right;
  justify-self: end;
}
.entityCell {
  min-width: 0;
  font-size: 14px;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entityCellName {
  font-weight: 600;
  color: #0f172a;
}
.entityCellDescription {
  color: #475569;
}
.entityStatusActive {
  color: #047857;
  font-weight: 500;
}
.entityStatusInactive {
  color: #64748b;
  font-weight: 500;
}
.entityStatusArchived {
  color: #94a3b8;
  font-weight: 500;
}
.entityStatusPill {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  gap: 6px;
  line-height: 1;
  padding: 6px 10px;
  width: fit-content;
}
.entityStatusPill .entityStatusDot {
  background: currentColor;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
  height: 7px;
  width: 7px;
}
.entityStatusPill .entityStatusLabel {
  line-height: 1;
}
.entityStatusPill.entityStatusActive {
  background: #ecfdf5;
  color: #047857;
}
.entityStatusPill.entityStatusInactive {
  background: #f1f5f9;
  color: #64748b;
}
.entityStatusPill.entityStatusArchived {
  background: #f8fafc;
  color: #94a3b8;
}
.entityCellMeta {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 500;
  margin-top: 2px;
}
.productNameCell {
  min-width: 0;
}
.entityActionsCell {
  justify-content: flex-end;
  justify-self: end;
  text-align: right;
}
.entityActionsCell ui-row,
.entityActionsCell .Container {
  gap: 2px;
}
.Container.entityActionIcon {
  align-items: center;
  border-radius: 8px;
  display: inline-flex;
  height: 32px;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
  width: 32px;
}
.Container.entityActionIcon ui-icon {
  font-size: 18px !important;
}
.Container.entityActionEdit ui-icon {
  color: #d97706;
}
.Container.entityActionEdit:hover {
  background-color: #fffbeb;
}
.Container.entityActionEdit:hover ui-icon {
  color: #b45309;
}
.Container.entityActionDelete ui-icon {
  color: #94a3b8;
}
.Container.entityActionDelete:hover {
  background-color: #fef2f2;
}
.Container.entityActionDelete:hover ui-icon {
  color: #ef4444;
}
.Container.entityActionIcon[data-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.38;
  pointer-events: none;
}
.Container.entityActionIcon[data-disabled="true"]:hover {
  background-color: transparent;
}
.Container.entityActionIcon[data-disabled="true"] ui-icon {
  color: #cbd5e1 !important;
}

@media (max-width: 900px) {
  ui-row.entityTableGrid.poLineTableGrid {
    gap: 10px;
    grid-template-columns: 1fr 0.7fr 0.9fr 0.8fr 40px;
  }
}

@media (max-width: 640px) {
  .productFormGrid {
    grid-template-columns: 1fr;
  }
  .productFormFullWidth {
    grid-column: auto;
  }
  .poLineTableWrap {
    overflow-x: auto;
  }
  ui-row.entityTableGrid.poLineTableGrid {
    min-width: 640px;
  }
}

/* FreshMart grocery landing page */
.Container.landingPageRoot {
  background: #f8fafc;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  padding: 0;
  width: 100%;
}
.landingPageShell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100vh;
  width: 100%;
}
.landingSiteHeader {
  flex-shrink: 0;
  width: 100%;
}
ui-scroll-view.landingScroll,
div.landingScroll {
  animation: none !important;
  flex: 1;
  height: auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  transition: none !important;
}
.Container.landingPageRoot,
.landingPageRoot {
  animation: none !important;
  transition: none !important;
}
.landingPageShell {
  animation: none !important;
  transition: none !important;
}
.landingAdOverlay {
  align-items: center;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  padding: 20px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 4000;
}
.landingAdPanel {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
  max-height: 72vh;
  max-width: 380px;
  overflow: hidden;
  position: relative;
  width: min(380px, 88vw);
}
button.landingAdCloseBtn {
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
  color: #334155;
  cursor: pointer;
  display: inline-flex;
  font-size: 18px;
  font-weight: 700;
  height: 30px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: 8px;
  top: 8px;
  width: 30px;
  z-index: 2;
}
button.landingAdCloseBtn:hover {
  background: #ffffff;
  color: #0f172a;
}
img.landingAdImage {
  display: block;
  height: auto;
  max-height: 68vh;
  object-fit: contain;
  width: 100%;
}
.landingMain {
  contain: layout style;
}
.landingContainer {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 1280px;
  padding: 0 24px;
  width: 100%;
}
.Container.landingTopBar,
.landingTopBar {
  background: #0f3d24;
  padding: 8px 0;
}
.landingTopBarInner {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.landingTopBarOffer {
  align-items: center;
  display: flex;
  flex: 1;
  gap: 8px;
  min-width: 0;
}
.landingTopBarHello {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 14px;
  height: 18px;
  line-height: 18px;
  transform-origin: 70% 70%;
  animation: landingTopBarWave 1.6s ease-in-out infinite;
}
@keyframes landingTopBarWave {
  0%,
  60%,
  100% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(16deg);
  }
  30% {
    transform: rotate(-8deg);
  }
  45% {
    transform: rotate(12deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .landingTopBarHello {
    animation: none;
  }
}
.landingTopBarTicker {
  flex: 1;
  height: 18px;
  min-width: 0;
  overflow: hidden;
}
.landingTopBarTickerTrack {
  display: flex;
  flex-direction: column;
}
span.landingTopBarText,
.TextView.landingTopBarText {
  color: #dcfce7;
  display: block;
  font-size: 12px;
  font-weight: 500;
  height: 18px;
  letter-spacing: 0.01em;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.landingTopBarLinks {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 24px;
}
span.landingTopBarLink,
.TextView.landingTopBarLink {
  align-items: center;
  color: #ecfdf5;
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 500;
  gap: 6px;
}
.landingTopBarLinkIcon {
  display: block;
  flex-shrink: 0;
}
span.landingTopBarLink:hover,
.TextView.landingTopBarLink:hover {
  color: #ffffff;
}
.Container.landingHeader,
.landingHeader {
  background: #ffffff;
  border-bottom: 1px solid #eef0f2;
  box-shadow: none;
  padding: 14px 0 0;
  position: relative;
  z-index: 20;
}
.landingHeaderInner {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.landingNavBar {
  background: transparent;
  box-shadow: none;
  padding: 10px 0 0;
  width: 100%;
}
.landingNavBarBox {
  background: #14532d;
  border-radius: 8px 8px 0 0;
  box-shadow: none;
  overflow: hidden;
}
.landingHeaderMain {
  --hdr-control-h: 48px;
  align-items: center;
  display: grid;
  gap: 24px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  width: 100%;
}
a.landingBrandLink {
  display: inline-flex;
  line-height: 0;
  text-decoration: none;
}
img.landingBrandLogo {
  height: 58px;
  object-fit: contain;
  width: auto;
}

.landingSearchArea {
  align-items: center;
  display: flex;
  flex: 1;
  gap: 12px;
  justify-content: center;
  min-width: 0;
}

.landingLocationWrap {
  flex-shrink: 0;
  position: relative;
  z-index: 20;
}
.landingLocationWrapOpen {
  z-index: 140;
}
button.landingLocationBox,
.landingLocationBox {
  align-items: center;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  font-family: inherit;
  gap: 8px;
  height: var(--hdr-control-h);
  justify-content: flex-start;
  max-height: var(--hdr-control-h);
  min-height: var(--hdr-control-h);
  min-width: 188px;
  overflow: hidden;
  padding: 4px 10px 4px 8px;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
button.landingLocationBox:hover,
button.landingLocationBox.landingLocationBoxOpen {
  border-color: #86efac;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.12);
}
button.landingLocationBox:disabled,
.landingLocationBoxLoading {
  cursor: wait;
  opacity: 0.88;
}
.landingLocationIcon {
  align-items: center;
  background: #ecfdf5;
  border-radius: 9px;
  display: inline-flex;
  flex-shrink: 0;
  height: 30px;
  justify-content: center;
  width: 30px;
}
.landingLocationPin {
  display: block;
  height: 18px;
  width: 18px;
}
.landingLocationCopy {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

span.landingLocationLabel,
.landingLocationLabel {
  color: #64748b;
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0 0 2px;
}
span.landingLocationValue,
.landingLocationValue {
  color: #0f172a;
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.landingLocationChevron {
  align-items: center;
  color: #64748b;
  display: inline-flex;
  flex-shrink: 0;
}
.landingLocationBoxOpen .landingHeaderChevron,
.landingCustomerChipOpen .landingHeaderChevron {
  transform: rotate(180deg);
}
svg.landingHeaderChevron,
.landingHeaderChevron {
  display: block;
  transition: transform 0.18s ease;
}
.landingDropdownMenu {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
  display: flex;
  flex-direction: column;
  min-width: 268px;
  overflow: hidden;
  padding: 8px;
  position: absolute;
  top: calc(100% + 8px);
  z-index: 130;
}
.landingLocationMenu {
  left: 0;
  max-width: 320px;
}
.landingProfileMenu {
  min-width: 248px;
  right: 0;
}
.landingDropdownMenuHead {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 10px 10px;
  text-transform: uppercase;
}
.landingProfileMenuHead {
  align-items: center;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  gap: 10px;
  letter-spacing: 0;
  margin: 0 0 6px;
  padding: 8px 8px 12px;
  text-transform: none;
}
.landingProfileMenuAvatar {
  height: 38px;
  width: 38px;
}
button.landingDropdownItem {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: #0f172a;
  cursor: pointer;
  display: flex;
  font-family: inherit;
  gap: 10px;
  padding: 9px 10px;
  text-align: left;
  transition: background 0.15s ease;
  width: 100%;
}
button.landingDropdownItem:hover {
  background: #f8fafc;
}
button.landingDropdownItem.landingDropdownItemActive {
  background: #f0fdf4;
}
.landingDropdownItemIcon {
  align-items: center;
  background: #f1f5f9;
  border-radius: 9px;
  color: #16a34a;
  display: inline-flex;
  flex-shrink: 0;
  height: 32px;
  justify-content: center;
  width: 32px;
}
.landingDropdownItemActive .landingDropdownItemIcon {
  background: #dcfce7;
}
.landingDropdownItemCopy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.landingDropdownItemCopy strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}
.landingDropdownItemCopy small {
  color: #64748b;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
svg.landingMenuCheck,
.landingMenuCheck {
  color: #16a34a;
  flex-shrink: 0;
}
p.landingLocationHint,
.landingLocationHint {
  background: #fef3c7;
  border-radius: 8px;
  color: #92400e;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 8px 8px;
  padding: 8px 10px;
}
.landingSearchWrap {
  align-items: stretch;
  background: #f8fafc;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  box-sizing: border-box;
  display: flex;
  flex: 0 1 520px;
  height: var(--hdr-control-h);
  max-height: var(--hdr-control-h);
  max-width: 520px;
  min-height: var(--hdr-control-h);
  min-width: 280px;
  overflow: visible;
  width: 100%;
}
.landingSearchField {
  flex: 1;
  height: 100%;
  min-height: 0;
  min-width: 0;
  position: relative;
}
.landingSearchAnimatedPlaceholder {
  align-items: center;
  animation: landingSearchPlaceholderIn 0.38s ease;
  color: #94a3b8;
  display: inline-flex;
  font-size: 14px;
  gap: 8px;
  left: 12px;
  max-width: calc(100% - 24px);
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
}
.landingSearchPlaceholderIcon {
  align-items: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  display: inline-flex;
  flex-shrink: 0;
  height: 22px;
  justify-content: center;
  width: 22px;
}
.landingSearchPlaceholderGlyph {
  display: block;
  height: 16px;
  width: 16px;
}
.landingSearchPlaceholderText {
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes landingSearchPlaceholderIn {
  from {
    opacity: 0;
    transform: translateY(calc(-50% + 10px));
  }
  to {
    opacity: 1;
    transform: translateY(-50%);
  }
}
.landingSearchInput {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  display: block;
  font-size: 14px;
  height: 100%;
  line-height: normal;
  margin: 0;
  max-height: none;
  min-height: 0;
  outline: none;
  padding: 0 16px;
  width: 100%;
}
.landingSearchInput:focus {
  background: #ffffff;
  border: none;
  box-shadow: none;
}
.landingSearchBtn {
  -webkit-appearance: none;
  align-items: center;
  appearance: none;
  background: #16a34a;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  gap: 6px;
  height: 100%;
  justify-content: center;
  line-height: 1;
  margin: 0;
  max-height: none;
  min-height: 0;
  min-width: 96px;
  padding: 0 18px;
  transition: background-color 0.15s ease;
}
.landingSearchBtn { border-radius: 0 11px 11px 0; }
.landingSearchBtn svg {
  display: block;
  flex-shrink: 0;
}
.landingSearchBtn:hover {
  background: #15803d;
}
.landingSearchDropdown {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
  left: 0;
  max-height: 320px;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
}
.landingSearchEmpty {
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  padding: 14px 16px;
}
button.landingSearchSuggestion {
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  gap: 12px;
  padding: 10px 14px;
  text-align: left;
  transition: background-color 0.15s ease;
  width: 100%;
}
button.landingSearchSuggestion:hover,
button.landingSearchSuggestion:focus {
  background: #f8fafc;
}
img.landingSearchSuggestionImage {
  border-radius: 8px;
  flex-shrink: 0;
  height: 44px;
  object-fit: cover;
  width: 44px;
}
.landingSearchSuggestionBody {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
span.landingSearchSuggestionName {
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
span.landingSearchSuggestionCategory {
  color: #64748b;
  font-size: 11px;
  line-height: 1.3;
}
span.landingSearchSuggestionPrice {
  color: #15803d;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
}
.landingHeaderActions {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
.landingHeaderActionsLoggedIn {
  gap: 10px;
}
.landingCustomerChip {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  display: flex;
  gap: 10px;
  max-width: 200px;
  padding: 6px 12px 6px 6px;
}
.landingCustomerAvatar {
  align-items: center;
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  border-radius: 10px;
  color: #ffffff;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  height: 36px;
  justify-content: center;
  width: 36px;
}
.landingCustomerMeta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
span.landingCustomerGreeting,
.TextView.landingCustomerGreeting {
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}
span.landingCustomerName,
.TextView.landingCustomerName {
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.landingProfileWrap {
  position: relative;
  z-index: 20;
}
button.landingCustomerChip {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  max-width: 220px;
  padding: 6px 10px 6px 6px;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
button.landingCustomerChip:hover,
button.landingCustomerChip.landingCustomerChipOpen {
  border-color: #86efac;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.12);
}
span.landingProfileChevron {
  align-items: center;
  color: #64748b;
  display: inline-flex;
  flex-shrink: 0;
  margin-left: auto;
}
.landingProfileWrap {
  position: relative;
  z-index: 20;
}
button.landingHeaderBtnPlain {
  align-items: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  color: #334155;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  height: var(--hdr-control-h, 48px);
  justify-content: center;
  min-width: 84px;
  padding: 0 16px;
}
button.landingHeaderBtnPlain svg {
  flex-shrink: 0;
}
button.landingHeaderBtnPlain.landingLoginBtn {
  color: #0f172a;
  font-weight: 700;
}
button.landingHeaderBtnPlain.landingHeaderBtnPrimary {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  border-color: transparent;
  color: #ffffff;
  min-width: 96px;
}
button.landingHeaderBtnPlain.landingHeaderBtnPrimary:hover {
  background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
}
button.landingHeaderBtnPlain.landingLogoutBtn {
  background: transparent;
  border-color: #e5e7eb;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
  padding: 0 14px;
}
button.landingHeaderBtnPlain.landingLogoutBtn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}
.landingCartBtn {
  align-items: center;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: 12px;
  color: #9a3412;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  gap: 8px;
  height: var(--hdr-control-h, 48px);
  padding: 0 14px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.landingCartBtn:hover {
  background: #ffedd5;
  border-color: #fb923c;
}
.landingCartIcon {
  font-size: 16px;
  line-height: 1;
}
.landingCartCount {
  align-items: center;
  background: #ea580c;
  border-radius: 999px;
  color: #ffffff;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  height: 20px;
  justify-content: center;
  min-width: 20px;
  padding: 0 6px;
}
.TextButton.landingLogoutBtn {
  min-width: 76px;
}
.TextButton.landingHeaderBtn {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  height: 44px;
  max-height: 44px;
  min-height: 44px;
  min-width: 84px;
  padding: 0 16px;
}
.TextButton.landingHeaderBtn {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  line-height: 1;
}
.TextButton.landingHeaderBtn ui-center {
  align-items: center;
  height: 100%;
  justify-content: center;
  width: 100%;
}
.TextButton.landingHeaderBtn ui-center,
.TextButton.landingHeaderBtn ui-center .TextView {
  color: #334155;
  font-size: 14px;
  font-weight: 600;
}
.TextButton.landingHeaderBtnPrimary {
  border-radius: 10px;
  height: 44px;
  max-height: 44px;
  min-height: 44px;
  min-width: 96px;
  padding: 0 18px;
}
.TextButton.landingHeaderBtnPrimary ui-center {
  align-items: center;
  height: 100%;
  justify-content: center;
  width: 100%;
}
.TextButton.landingHeaderBtnPrimary ui-center,
.TextButton.landingHeaderBtnPrimary ui-center .TextView {
  font-size: 14px;
  font-weight: 600;
}
nav.landingNavRow {
  align-items: stretch;
  display: flex;
  gap: 4px;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  width: 100%;
}
.landingNavItemWrap {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  padding: 11px 20px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.landingNavItemWrap:hover {
  background: rgba(255, 255, 255, 0.08);
}
.landingNavItemWrap.landingNavItemActive {
  background: rgba(255, 255, 255, 0.1);
  border-bottom-color: #facc15;
}
span.landingNavLabel,
.TextView.landingNavLabel {
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.landingNavItemActive span.landingNavLabel,
.landingNavItemActive .TextView.landingNavLabel {
  color: #ffffff;
  font-weight: 700;
}
.landingMain {
  padding-bottom: 0;
  padding-top: 6px;
  width: 100%;
}
.Container.landingHeroSection,
section.landingHeroSection {
  margin-bottom: 4px;
  margin-top: 0;
  width: 100%;
}
.Container.landingHeroSection > ui-row {
  align-items: stretch;
  gap: 24px;
  width: 100%;
}
.Container.landingCategoryPanel {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  flex: 0 0 280px;
  padding: 8px 0 12px;
}
.TextView.landingCategoryTitle {
  border-bottom: 1px solid #f1f5f9;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  padding: 14px 18px 12px;
}
.landingCatItem {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 12px;
  padding: 11px 18px;
  transition: background-color 0.15s ease;
}
.landingCatItem:hover {
  background: #f8fafc;
}
img.landingCatThumb {
  border-radius: 8px;
  flex-shrink: 0;
  height: 36px;
  object-fit: cover;
  width: 36px;
}
.TextView.landingCatLabel {
  color: #334155;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}
.landingHeroBanner {
  background: #f7f4ee;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
  isolation: isolate;
  min-height: 380px;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}
.landingHeroSlideStack {
  background: transparent;
  min-height: 400px;
  position: relative;
  width: 100%;
}
.landingHeroSlide {
  display: block;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.55s ease;
  width: 100%;
  z-index: 0;
}
.landingHeroSlide.landingHeroSlideActive {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}
.landingHeroNav {
  align-items: center;
  background: #ffffff;
  border: none;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14);
  color: #14532d;
  cursor: pointer;
  display: inline-flex;
  font-size: 28px;
  height: 44px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: background-color 0.15s ease, transform 0.15s ease;
  width: 44px;
  z-index: 3;
}
.landingHeroNav:hover {
  background: #ffffff;
  transform: translateY(-50%) scale(1.05);
}
.landingHeroNavPrev {
  left: 14px;
  right: auto;
}
.landingHeroNavNext {
  right: 14px;
}
.landingHeroDots {
  bottom: 20px;
  display: flex;
  gap: 8px;
  left: auto;
  position: absolute;
  right: 48px;
  z-index: 3;
}
.landingHeroDot {
  background: #cbd5e1;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  height: 8px;
  padding: 0;
  transition: width 0.2s ease, background-color 0.2s ease;
  width: 8px;
}
.landingHeroDot.landingHeroDotActive {
  background: #16a34a;
  width: 24px;
}
.landingHeroCopy {
  align-self: stretch;
  background: transparent;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  max-width: 58%;
  min-height: 400px;
  min-width: 0;
  padding: 42px 28px 48px 48px;
  position: relative;
  width: 58%;
  z-index: 2;
}
.landingHeroCopy.landingHeroCopyTeal .landingHeroBadge {
  background: #ecfeff;
  color: #0e7490;
}
.landingHeroCopy.landingHeroCopyTeal .landingHeroTitleAccent {
  color: #0e7490;
}
.landingHeroCopy.landingHeroCopyTeal .landingHeroHighlightIcon {
  background: #ecfeff;
  color: #0e7490;
}
.landingHeroCopy.landingHeroCopyAmber .landingHeroBadge {
  background: #fff7ed;
  color: #c2410c;
}
.landingHeroCopy.landingHeroCopyAmber .landingHeroTitleAccent {
  color: #ea580c;
}
.landingHeroCopy.landingHeroCopyAmber .landingHeroHighlightIcon {
  background: #fff7ed;
  color: #ea580c;
}
.landingHeroCopy.landingHeroCopyYellow .landingHeroBadge {
  background: #fefce8;
  color: #a16207;
}
.landingHeroCopy.landingHeroCopyYellow .landingHeroTitleAccent {
  color: #ca8a04;
}
.landingHeroCopy.landingHeroCopyYellow .landingHeroHighlightIcon {
  background: #fefce8;
  color: #ca8a04;
}
.landingHeroBadge {
  align-items: center;
  background: #e8f8ee;
  border: none;
  border-radius: 999px;
  color: #15803d;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
  letter-spacing: 0.06em;
  line-height: 1.4;
  margin: 0;
  padding: 7px 14px;
  text-transform: uppercase;
  width: fit-content;
}
.landingHeroBadge svg {
  flex-shrink: 0;
}
h2.landingHeroTitle,
.TextView.landingHeroTitle {
  color: #1e293b;
  display: block;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.18;
  margin: 0;
  max-width: 560px;
}
.landingHeroTitleAccent {
  color: #16a34a;
  display: block;
}
p.landingHeroSubtitle,
.TextView.landingHeroSubtitle {
  color: #64748b;
  display: block;
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
  max-width: 500px;
}
button.landingHeroCtaBtn {
  align-items: center;
  align-self: flex-start;
  background: #f97316;
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(234, 88, 12, 0.28);
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  gap: 8px;
  line-height: 1.5;
  margin-top: 8px;
  padding: 13px 22px;
  transition: background-color 0.15s ease, transform 0.15s ease;
  width: auto;
}
button.landingHeroCtaBtn svg {
  flex-shrink: 0;
}
button.landingHeroCtaBtn:hover {
  background: #ea580c;
  transform: translateY(-1px);
}
.landingHeroHighlights {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 2px;
}
.landingHeroHighlight {
  align-items: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #334155;
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  gap: 8px;
  letter-spacing: 0;
  line-height: 1.4;
  padding: 7px 12px 7px 7px;
}
.landingHeroHighlightIcon {
  align-items: center;
  background: #e8f8ee;
  border-radius: 999px;
  color: #16a34a;
  display: inline-flex;
  flex-shrink: 0;
  height: 26px;
  justify-content: center;
  width: 26px;
}
.TextButton.landingHeroCta {
  margin-top: 28px;
  min-width: 168px;
}
.TextButton.landingHeroCta ui-center,
.TextButton.landingHeroCta ui-center .TextView {
  font-size: 15px;
  font-weight: 700;
}
.landingHeroMedia {
  height: 100%;
  inset: 0;
  overflow: hidden;
  position: absolute;
  width: 100%;
  z-index: 0;
}
.landingHeroMedia::before {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.22) 34%,
    rgba(255, 255, 255, 0.06) 52%,
    rgba(255, 255, 255, 0) 68%
  );
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
.landingHeroMedia::after {
  display: none;
}
img.landingHeroPhoto {
  display: block;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: left center;
  width: 100%;
}
.landingHeroMediaShade {
  display: none;
}
.landingHeroCaption {
  display: none;
}
.landingHeroCaptionIcon {
  align-items: center;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: #bbf7d0;
  display: inline-flex;
  flex-shrink: 0;
  height: 28px;
  justify-content: center;
  width: 28px;
}
.landingHeroCaptionCopy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.landingHeroCaptionTitle {
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}
.landingHeroCaptionSubtitle {
  color: #bbf7d0;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}
.landingTrustBar {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 20px;
  padding: 18px 20px;
}
.landingTrustItem {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
  padding: 4px 8px;
}
.landingTrustIconBox {
  align-items: center;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  color: #15803d;
  display: inline-flex;
  flex-shrink: 0;
  height: 44px;
  justify-content: center;
  width: 44px;
}
.landingTrustIconBox svg {
  display: block;
}
.landingTrustCopy {
  min-width: 0;
}
span.landingTrustTitle,
.TextView.landingTrustTitle {
  color: #0f172a;
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}
span.landingTrustDesc,
.TextView.landingTrustDesc {
  color: #64748b;
  display: block;
  font-size: 11px;
  line-height: 1.35;
  margin-top: 2px;
}
.landingSection,
section.landingSection {
  margin-top: 32px;
}
.landingSectionHead {
  margin-bottom: 18px;
}
h2.landingSectionTitle,
.TextView.landingSectionTitle {
  color: #0f172a;
  display: block;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
}
.landingSectionTitleRow {
  align-items: center;
  display: flex;
  gap: 10px;
}
.landingSectionTitleIcon {
  align-items: center;
  background: #ecfdf5;
  border-radius: 10px;
  color: #16a34a;
  display: inline-flex;
  flex-shrink: 0;
  height: 32px;
  justify-content: center;
  width: 32px;
}
.landingSectionTitleIcon svg {
  display: block;
}
p.landingSectionSubtitle,
.TextView.landingSectionSubtitle {
  color: #64748b;
  display: block;
  font-size: 12px;
  line-height: 1.4;
  margin: 4px 0 0;
}
.landingPromoRow {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
}
.landingPromoCard {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.landingPromoCard:hover {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}
img.landingPromoImage {
  aspect-ratio: 4 / 3;
  background: #f1f5f9;
  display: block;
  height: 140px;
  min-height: 140px;
  object-fit: cover;
  width: 100%;
}
.landingPromoContent {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px 18px 18px;
}
span.landingPromoOffer,
.TextView.landingPromoOffer {
  color: #ea580c;
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
span.landingPromoTitle,
.TextView.landingPromoTitle {
  color: #0f172a;
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 8px;
}
span.landingPromoLink,
.TextView.landingPromoLink {
  color: #16a34a;
  cursor: pointer;
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-top: auto;
  padding-top: 12px;
}
.landingProductRow {
  align-items: stretch;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
}
.landingProductCard {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.landingProductCard:hover {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}
.landingProductCardClickable {
  cursor: pointer;
}
.landingProductsHead {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}
.landingProductsHeadText {
  min-width: 0;
}
.landingProductCarouselHeadActions {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 12px;
}
.landingProductCarouselNav {
  display: inline-flex;
  gap: 8px;
}
button.landingProductCarouselNavBtn {
  align-items: center;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  color: #0f7a3a;
  cursor: pointer;
  display: inline-flex;
  height: 38px;
  justify-content: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  width: 38px;
}
button.landingProductCarouselNavBtn svg {
  height: 18px;
  width: 18px;
}
button.landingProductCarouselNavBtn:hover {
  border-color: #0f7a3a;
  box-shadow: 0 4px 12px rgba(15, 122, 58, 0.14);
  transform: translateY(-1px);
}
.landingBestSellersSection {
  margin-top: 28px;
}
.landingProductCarouselViewport {
  overflow: hidden;
  position: relative;
}
.landingProductCarouselTrack {
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.landingProductCarouselTrack::-webkit-scrollbar {
  display: none;
}
.landingProductCarouselTrack .landingProductCarouselRow {
  display: flex;
  gap: 18px;
  width: max-content;
}
article.landingProductCarouselCard {
  flex: 0 0 232px;
  max-width: 232px;
  scroll-snap-align: start;
}
button.landingClearFilterBtn {
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  color: #334155;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
}
button.landingClearFilterBtn:hover {
  border-color: #16a34a;
  color: #16a34a;
}
.landingRoundCatItem {
  cursor: pointer;
  transition: transform 0.2s ease;
}
.landingRoundCatItem:hover {
  transform: translateY(-2px);
}
.landingRoundCatItemActive .landingRoundCatCircle {
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}
.landingRoundCatItemActive .landingRoundCatLabel {
  color: #15803d;
  font-weight: 700;
}
.productDetailPageRoot {
  background: #f3f6f4;
}
.productDetailPageScroll {
  padding: 24px 0 0;
}
.productDetailPageMain {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 32px;
}
.productDetailRatingStrip {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 8px;
}
span.productDetailRatingStripScore {
  background: #15803d;
  border-radius: 8px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 8px;
}
.productDetailInlineStars,
.productDetailStars {
  display: inline-flex;
  gap: 2px;
}
span.productDetailInlineStar,
span.productDetailStar {
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1;
}
span.productDetailInlineStarFilled,
span.productDetailStarFilled {
  color: #f59e0b;
}
button.productDetailRatingStripLink {
  background: transparent;
  border: none;
  color: #2563eb;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 0;
}
button.productDetailRatingStripLink:hover {
  text-decoration: underline;
}
.productDetailReviewsSection,
.productDetailRelatedSection {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  margin-top: 0;
  padding: 24px;
}
.productDetailReviewsHead {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 18px;
}
.productDetailReviewsSummary {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
span.productDetailReviewsScore {
  color: #0f172a;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}
span.productDetailReviewsCount {
  color: #64748b;
  font-size: 13px;
}
.productDetailReviewList {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}
article.productDetailReviewCard {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px;
}
.productDetailReviewCardHead {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 10px;
}
.productDetailReviewAuthorBlock {
  align-items: center;
  display: flex;
  gap: 10px;
}
span.productDetailReviewAvatar {
  align-items: center;
  background: #dcfce7;
  border-radius: 999px;
  color: #15803d;
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  height: 36px;
  justify-content: center;
  width: 36px;
}
strong.productDetailReviewAuthor {
  color: #0f172a;
  display: block;
  font-size: 14px;
}
span.productDetailReviewDate {
  color: #94a3b8;
  display: block;
  font-size: 12px;
  margin-top: 2px;
}
p.productDetailReviewText {
  color: #475569;
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
}
.productDetailReviewForm {
  border-top: 1px solid #eef2f7;
  padding-top: 18px;
}
h3.productDetailReviewFormTitle {
  color: #0f172a;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 12px;
}
p.productDetailReviewFormHint {
  color: #64748b;
  font-size: 13px;
  margin: 0 0 12px;
}
.productDetailReviewFormRating {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
span.productDetailReviewFormLabel {
  color: #334155;
  font-size: 13px;
  font-weight: 600;
}
.productDetailReviewRatingPick {
  display: inline-flex;
  gap: 4px;
}
button.productDetailReviewRatingBtn {
  background: transparent;
  border: none;
  color: #cbd5e1;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 0;
}
button.productDetailReviewRatingBtnActive {
  color: #f59e0b;
}
textarea.productDetailReviewTextarea {
  border: 1px solid #d1d5db;
  border-radius: 12px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 14px;
  margin-bottom: 10px;
  min-height: 110px;
  padding: 12px 14px;
  resize: vertical;
  width: 100%;
}
textarea.productDetailReviewTextarea:focus {
  border-color: #16a34a;
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}
p.productDetailReviewFormError {
  color: #dc2626;
  font-size: 13px;
  margin: 0 0 10px;
}
p.productDetailReviewFormSuccess {
  color: #15803d;
  font-size: 13px;
  margin: 0 0 10px;
}
button.productDetailReviewSubmitBtn {
  background: #16a34a;
  border: none;
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  min-height: 42px;
  padding: 0 18px;
}
button.productDetailReviewSubmitBtn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.productDetailRelatedHead {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 16px;
}
.productDetailRelatedNav {
  display: inline-flex;
  gap: 8px;
}
button.productDetailRelatedNavBtn {
  align-items: center;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  color: #14532d;
  cursor: pointer;
  display: inline-flex;
  font-size: 24px;
  height: 36px;
  justify-content: center;
  line-height: 1;
  width: 36px;
}
button.productDetailRelatedNavBtn:hover {
  border-color: #16a34a;
  color: #15803d;
}
.productDetailRelatedTrack {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-behavior: smooth;
  scrollbar-color: #cbd5e1 transparent;
  scrollbar-width: thin;
}
.productDetailRelatedTrack::-webkit-scrollbar {
  height: 8px;
}
.productDetailRelatedTrack::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}
article.productDetailRelatedCard {
  flex: 0 0 240px;
  max-width: 240px;
  min-height: 100%;
}
p.productDetailRelatedStatus {
  color: #64748b;
  font-size: 14px;
  margin: 0;
}
.productDetailProLayout {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
nav.productDetailBreadcrumb {
  align-items: center;
  color: #64748b;
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 8px;
}
button.productDetailCrumbLink {
  background: none;
  border: none;
  color: #15803d;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 0;
}
span.productDetailCrumbSep {
  color: #cbd5e1;
}
span.productDetailCrumbCurrent {
  color: #0f172a;
  font-weight: 600;
}
.productDetailProGrid {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.06);
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  overflow: hidden;
}
.productDetailGallery {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-right: 1px solid #eef2f7;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
}
.productDetailDescription {
  margin-top: 2px;
}
.productDetailGalleryMain {
  align-items: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  min-height: 380px;
  overflow: hidden;
  position: relative;
}
span.productDetailDiscountBadge {
  background: #ef4444;
  border-radius: 999px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  left: 16px;
  padding: 6px 10px;
  position: absolute;
  top: 16px;
  z-index: 1;
}
img.productDetailGalleryImage {
  display: block;
  max-height: 420px;
  max-width: 100%;
  object-fit: contain;
  padding: 24px;
  width: 100%;
}
.productDetailThumbRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
button.productDetailThumbBtn {
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  height: 72px;
  overflow: hidden;
  padding: 0;
  width: 72px;
}
button.productDetailThumbBtnActive {
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14);
}
img.productDetailThumbImage {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.productDetailPurchasePanel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 32px 36px;
}
span.productDetailCategoryPill {
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  color: #15803d;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  width: fit-content;
}
h1.productDetailProTitle {
  color: #0f172a;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0;
}
p.productDetailProSku {
  color: #64748b;
  font-size: 13px;
  margin: -6px 0 0;
}
.productDetailPriceCard {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px 18px;
}
.productDetailPriceMainRow {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
span.productDetailProPrice {
  color: #0f172a;
  font-size: 34px;
  font-weight: 800;
}
span.productDetailProMrp {
  color: #94a3b8;
  font-size: 16px;
  text-decoration: line-through;
}
p.productDetailTaxNote {
  color: #64748b;
  font-size: 12px;
  margin: 6px 0 0;
}
.productDetailDeliveryCard {
  align-items: flex-start;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  display: flex;
  gap: 12px;
  padding: 14px 16px;
}
span.productDetailDeliveryIcon {
  font-size: 20px;
  line-height: 1;
}
.productDetailDeliveryCopy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.productDetailDeliveryCopy strong {
  color: #14532d;
  font-size: 14px;
}
.productDetailDeliveryCopy span {
  color: #166534;
  font-size: 13px;
}
.productDetailActionRow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.productDetailStockRow {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.productDetailStockBadge {
  background: #ecfdf5;
  border-radius: 999px;
  color: #15803d;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
}
.productDetailStockBadgeOut {
  background: #fef2f2;
  color: #b91c1c;
}
.productDetailInCartNote {
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
}
p.productDetailCartMessage {
  color: #15803d;
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}
.productDetailQtyStepper {
  align-items: center;
  background: #ffffff;
  border: 2px solid #16a34a;
  border-radius: 12px;
  display: inline-flex;
  gap: 8px;
  min-height: 48px;
  padding: 0 8px;
}
button.productDetailQtyBtn {
  background: #f0fdf4;
  border: none;
  border-radius: 8px;
  color: #15803d;
  cursor: pointer;
  font-size: 20px;
  font-weight: 700;
  height: 32px;
  line-height: 1;
  min-width: 32px;
  padding: 0;
}
button.productDetailQtyBtn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
span.productDetailQtyValue {
  color: #0f172a;
  font-size: 16px;
  font-weight: 700;
  min-width: 24px;
  text-align: center;
}
button.productDetailBtnPrimary:disabled,
button.productDetailBtnSecondary:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
button.productDetailBtnPrimary {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  border: none;
  border-radius: 12px;
  color: #ffffff;
  cursor: pointer;
  flex: 1 1 160px;
  font-size: 15px;
  font-weight: 700;
  min-height: 48px;
  padding: 0 20px;
}
button.productDetailBtnSecondary {
  background: #ffffff;
  border: 2px solid #16a34a;
  border-radius: 12px;
  color: #15803d;
  cursor: pointer;
  flex: 1 1 160px;
  font-size: 15px;
  font-weight: 700;
  min-height: 48px;
  padding: 0 20px;
}
.productDetailSection {
  border-top: 1px solid #eef2f7;
  padding-top: 18px;
}
h2.productDetailSectionTitle {
  color: #0f172a;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 10px;
}
p.productDetailSectionText {
  color: #475569;
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}
.productDetailSpecTable {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.productDetailSpecRow {
  display: grid;
  gap: 12px;
  grid-template-columns: 120px 1fr;
}
span.productDetailSpecLabel {
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
}
span.productDetailSpecValue {
  color: #0f172a;
  font-size: 13px;
}
button.productDetailBackBtn {
  align-self: flex-start;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  color: #334155;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
}
button.productDetailBackBtn:hover {
  border-color: #16a34a;
  color: #15803d;
}
button.productDetailBackBtnInline {
  margin-top: 8px;
}
p.productDetailPageStatus {
  color: #64748b;
  font-size: 15px;
  margin: 0;
}
.productDetailPageStatusBlock {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 28px;
}
.productDetailPageCard {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  overflow: hidden;
}
.productDetailPageCopy {
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  min-width: 0;
  padding: 36px 32px;
}
h1.productDetailPageTitle {
  color: #0f172a;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0;
}
.productDetailPageAside {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.productDetailPageMedia {
  background: #f8fafc;
  flex: 1;
  min-height: 280px;
}
img.productDetailPageImage {
  display: block;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  width: 100%;
}
.productDetailPageFacts {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 28px 32px;
}
.landingProductDetailOverlay {
  align-items: center;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 1200;
}
.landingProductDetailPanel {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  max-height: 90vh;
  max-width: 920px;
  overflow: hidden;
  position: relative;
  width: 100%;
}
button.landingProductDetailClose {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #334155;
  cursor: pointer;
  font-size: 18px;
  height: 36px;
  position: absolute;
  right: 14px;
  top: 14px;
  width: 36px;
  z-index: 2;
}
.landingProductDetailCopy {
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  min-width: 0;
  overflow: auto;
  padding: 32px 28px;
}
span.landingProductDetailBadge {
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  color: #15803d;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  width: fit-content;
}
h2.landingProductDetailTitle {
  color: #0f172a;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0;
}
p.landingProductDetailDescription {
  color: #475569;
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}
p.landingProductDetailHint {
  color: #64748b;
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}
.landingProductDetailAside {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.landingProductDetailFacts {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 24px 28px;
}
.landingProductDetailMeta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.landingProductDetailMetaRow {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}
span.landingProductDetailLabel {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.landingProductDetailPriceRow {
  align-items: center;
  display: flex;
  gap: 10px;
}
span.landingProductDetailPrice {
  color: #0f172a;
  font-size: 28px;
  font-weight: 800;
}
span.landingProductDetailOldPrice {
  color: #94a3b8;
  font-size: 16px;
  text-decoration: line-through;
}
button.landingProductDetailCta {
  align-self: flex-start;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  border: none;
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  margin-top: 4px;
  padding: 12px 22px;
}
button.landingProductDetailCta:hover {
  background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
}
.landingProductDetailMedia {
  background: #f8fafc;
  flex: 1;
  min-height: 240px;
  overflow: hidden;
}
img.landingProductDetailImage {
  display: block;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  width: 100%;
}
.landingProductImageWrap {
  background: #f8fafc;
  flex-shrink: 0;
  height: 168px;
  overflow: hidden;
  position: relative;
}
img.landingProductImage {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}
button.landingWishlistBtn {
  align-items: center;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  font-size: 18px;
  height: 34px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 34px;
  z-index: 2;
}
button.landingWishlistBtn:hover {
  border-color: #fca5a5;
  color: #ef4444;
}
button.landingWishlistBtnActive {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #e11d48;
}
.landingProductBadge {
  background: rgba(15, 23, 42, 0.78);
  border-radius: 999px;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  left: 10px;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  position: absolute;
  text-transform: uppercase;
  top: 10px;
}
.landingProductBody {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 14px 16px 16px;
}
span.landingProductName,
.TextView.landingProductName {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: #0f172a;
  display: -webkit-box;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  margin-top: 10px;
  min-height: 38px;
  overflow: hidden;
}
span.landingProductSize,
.TextView.landingProductSize {
  color: #64748b;
  display: block;
  font-size: 12px;
  margin-top: 4px;
  min-height: 16px;
}
.landingProductPriceRow {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}
span.landingProductPrice,
.TextView.landingProductPrice {
  color: #166534;
  font-size: 16px;
  font-weight: 700;
}
span.landingProductOldPrice,
.TextView.landingProductOldPrice {
  color: #94a3b8;
  font-size: 12px;
  text-decoration: line-through;
}
button.landingAddBtn,
.TextButton.landingAddBtn {
  background: #ffffff;
  border: 1px solid #16a34a;
  border-radius: 8px;
  color: #16a34a;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  margin-top: 10px;
  padding: 10px 12px;
  width: 100%;
}
button.landingAddBtn:hover {
  background: #f0fdf4;
}
button.landingAddBtnDisabled,
button.landingAddBtn:disabled {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #94a3b8;
  cursor: not-allowed;
}
.landingCardQtyStepper {
  align-items: center;
  background: #ffffff;
  border: 2px solid #16a34a;
  border-radius: 10px;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-top: 10px;
  min-height: 40px;
  padding: 0 6px;
  width: 100%;
}
button.landingCardQtyBtn {
  background: #f0fdf4;
  border: none;
  border-radius: 8px;
  color: #15803d;
  cursor: pointer;
  flex: 0 0 32px;
  font-size: 18px;
  font-weight: 700;
  height: 32px;
  line-height: 1;
  padding: 0;
}
button.landingCardQtyBtn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
span.landingCardQtyValue {
  color: #0f172a;
  flex: 1 1 auto;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}
.landingFeaturedCatSection {
  margin-top: 36px;
}
.landingFeaturedCatRow {
  align-items: stretch;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
}
.landingFeaturedCatCard {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 200px;
  min-height: 200px;
  overflow: hidden;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.landingFeaturedCatCard:hover {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
}
.landingFeaturedCatCard.featTeal .landingFeaturedCatBody {
  background: linear-gradient(145deg, #8ee4f3 0%, #5ec8df 55%, #4db8d1 100%);
}
.landingFeaturedCatCard.featYellow .landingFeaturedCatBody {
  background: linear-gradient(145deg, #fde68a 0%, #facc15 55%, #f5c400 100%);
}
.landingFeaturedCatCard.featGray .landingFeaturedCatBody {
  background: linear-gradient(145deg, #f1f5f9 0%, #dbe4ee 55%, #cbd5e1 100%);
}
.landingFeaturedCatCard.featOrange .landingFeaturedCatBody {
  background: linear-gradient(145deg, #fdba74 0%, #fb923c 55%, #f97316 100%);
}
.landingFeaturedCatBody {
  align-self: stretch;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  min-width: 0;
  padding: 16px 14px;
  width: 100%;
}
h3.landingFeaturedCatTitle {
  color: #0f172a;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.28;
  margin: 0;
}
p.landingFeaturedCatSubtitle {
  color: #334155;
  font-size: 12px;
  line-height: 1.45;
  margin: 6px 0 0;
}
button.landingFeaturedCatBtn {
  align-self: flex-start;
  background: #1e293b;
  border: none;
  border-radius: 8px;
  color: #ffffff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  margin-top: 12px;
  padding: 9px 14px;
  transition: background 0.2s ease, transform 0.2s ease;
}
button.landingFeaturedCatBtn:hover {
  background: #0f172a;
  transform: translateY(-1px);
}
.landingFeaturedCatMedia {
  align-self: stretch;
  background: #f8fafc;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}
img.landingFeaturedCatImage {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  width: 100%;
}
.landingRoundCatRow {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  width: 100%;
}
.landingRoundCatItem {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.landingRoundCatCircle {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  height: 92px;
  overflow: hidden;
  width: 92px;
}
img.landingRoundCatImage {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}
span.landingRoundCatLabel,
.TextView.landingRoundCatLabel {
  color: #334155;
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-top: 8px;
  text-align: center;
}
section.landingImsSection,
.Container.landingImsSection {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 28px;
}
.landingFeatureRow,
.Container.landingFeatureRow {
  display: flex;
  gap: 20px;
  width: 100%;
}
.landingFeatureCard,
.Container.landingFeatureCard {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 20px;
}
.landingFeatureIcon {
  align-items: center;
  background: #ecfdf5;
  border-radius: 12px;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 20px;
  height: 44px;
  justify-content: center;
  line-height: 1;
  width: 44px;
}
.landingFeatureCopy {
  min-width: 0;
}
h3.landingFeatureTitle,
.TextView.landingFeatureTitle {
  color: #0f172a;
  display: block;
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}
p.landingFeatureDesc,
.TextView.landingFeatureDesc {
  color: #64748b;
  display: block;
  font-size: 13px;
  line-height: 1.5;
  margin: 8px 0 0;
}
.landingImsCtaWrap,
.Container.landingImsCtaWrap {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}
button.landingImsCtaBtn {
  background: #16a34a;
  border: none;
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 28px;
}
button.landingImsCtaBtn:hover {
  background: #15803d;
}
.landingNewsBannerWrap {
  margin-top: 28px;
  width: 100%;
}
.landingNewsBanner {
  align-items: stretch;
  background:
    radial-gradient(circle at 12% 78%, rgba(255, 255, 255, 0.55), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.4), transparent 26%),
    #d8f3e5;
  border-radius: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
  min-height: 280px;
  overflow: hidden;
  padding: 28px 12px 0 48px;
  position: relative;
}
.landingNewsBannerDecor {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' opacity='0.55'%3E%3Cpath d='M45 18c8 14 8 28 0 42-8-14-8-28 0-42z'/%3E%3Cpath d='M45 18c-10 4-18 14-22 28 10-2 20-10 22-28z'/%3E%3Cpath d='M28 62c10 4 18 4 28 0'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70' fill='none' stroke='%23ffffff' stroke-width='2' opacity='0.45'%3E%3Ccircle cx='35' cy='38' r='16'/%3E%3Cpath d='M35 14c4 8 4 12 0 16-4-4-4-8 0-16z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80' fill='none' stroke='%23ffffff' stroke-width='2' opacity='0.4'%3E%3Cpath d='M18 50c8-18 22-28 36-32 2 16-6 34-20 44-8-2-14-6-16-12z'/%3E%3Cpath d='M40 22c6-8 16-10 22-8'/%3E%3C/svg%3E");
  background-position: 6% 72%, 38% 18%, 58% 86%;
  background-repeat: no-repeat;
  background-size: 84px, 58px, 76px;
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}
.landingNewsBannerCopy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 560px;
  padding: 20px 12px 36px 0;
  position: relative;
  z-index: 1;
}
h2.landingNewsBannerTitle,
.landingNewsBannerTitle {
  color: #253d4e;
  font-family: "Manrope", sans-serif;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.18;
  margin: 0 0 12px;
  max-width: 520px;
}
p.landingNewsBannerSubtitle,
.landingNewsBannerSubtitle {
  color: #7e8a9a;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  margin: 0 0 28px;
}
.landingNewsBannerSubtitle span {
  color: #3bb77e;
  font-weight: 700;
}
.landingNewsBannerForm {
  align-items: center;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(37, 61, 78, 0.08);
  display: flex;
  max-width: 460px;
  min-height: 58px;
  overflow: hidden;
  padding: 6px 6px 6px 18px;
  width: 100%;
}
.landingNewsBannerMailWrap {
  color: #c0c6ce;
  display: flex;
  flex-shrink: 0;
  margin-right: 8px;
}
.landingNewsBannerInput {
  background: transparent;
  border: none;
  color: #253d4e;
  flex: 1;
  font-size: 15px;
  min-width: 0;
  outline: none;
  padding: 8px 8px 8px 0;
}
.landingNewsBannerInput::placeholder {
  color: #b0b8c1;
}
button.landingNewsBannerBtn,
.landingNewsBannerBtn {
  background: #3bb77e;
  border: none;
  border-radius: 999px;
  color: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 700;
  min-height: 46px;
  padding: 0 26px;
}
button.landingNewsBannerBtn:hover,
.landingNewsBannerBtn:hover {
  background: #2ea36d;
}
p.landingNewsBannerThanks,
.landingNewsBannerThanks {
  color: #15803d;
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}
.landingNewsBannerArt {
  align-items: flex-end;
  display: flex;
  justify-content: center;
  min-height: 280px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
img.landingNewsBannerImage,
.landingNewsBannerImage {
  display: block;
  height: 310px;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  width: auto;
}
.landingFooterFeaturesWrap {
  margin-top: 28px;
  width: 100%;
}
.landingFooterFeatures {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.landingFooterFeatureCard {
  align-items: center;
  background: #f4f6fa;
  border-radius: 10px;
  display: flex;
  gap: 12px;
  min-height: 92px;
  padding: 16px 14px 16px 16px;
}
span.landingFooterFeatureIcon,
.landingFooterFeatureIcon {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  height: 42px;
  justify-content: center;
  width: 42px;
}
svg.landingFooterFeatureSvg,
.landingFooterFeatureSvg {
  display: block;
  height: 42px;
  width: 42px;
}
.landingFooterFeatureCopy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.landingFooterFeatureCopy strong {
  color: #253d4e;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.landingFooterFeatureCopy span {
  color: #adadad;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}
footer.landingFooter,
.Container.landingFooter {
  background:
    radial-gradient(ellipse 420px 280px at 0% 0%, rgba(34, 197, 94, 0.09), transparent 70%),
    radial-gradient(ellipse 380px 260px at 100% 100%, rgba(22, 163, 74, 0.08), transparent 72%),
    #ffffff;
  border-top: 1px solid #e8e8e8;
  font-family: "Manrope", sans-serif;
  margin-top: 28px;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}
.landingFooterDecor {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}
.landingFooterLeaf {
  --leaf-rot: 0deg;
  animation: landingFooterLeafSway 9s ease-in-out infinite;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  opacity: 0.22;
  position: absolute;
  transform: rotate(var(--leaf-rot));
  transform-origin: center;
  will-change: transform;
}
.landingFooterLeafTL {
  --leaf-rot: -28deg;
  animation-duration: 10s;
  animation-delay: -1.5s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 160'%3E%3Cpath d='M62 6c40 20 54 66 34 122C56 112 24 70 12 24c20 10 34 6 50-18z' fill='%2316a34a'/%3E%3Cpath d='M58 26c-4 34-2 68 8 102' fill='none' stroke='%23166534' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  height: 180px;
  left: -36px;
  top: -28px;
  width: 140px;
}
.landingFooterLeafTR {
  --leaf-rot: 18deg;
  animation-duration: 8.5s;
  animation-delay: -3s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 160'%3E%3Cpath d='M28 8c-22 38-18 86 18 128 28-40 48-84 42-128-16 8-32 8-60 0z' fill='%2322c55e'/%3E%3Cpath d='M48 22c2 36 0 72-8 108' fill='none' stroke='%23166534' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  height: 160px;
  right: -24px;
  top: 18px;
  width: 120px;
}
.landingFooterLeafML {
  --leaf-rot: -16deg;
  animation-duration: 12s;
  animation-delay: -4s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M18 78c14-36 42-58 74-64-8 36-30 64-66 76-6-4-8-8-8-12z' fill='%234ade80'/%3E%3Cpath d='M28 74c16-12 36-28 58-38' fill='none' stroke='%23166534' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  height: 92px;
  left: 8%;
  opacity: 0.16;
  top: 46%;
  width: 92px;
}
.landingFooterLeafBL {
  --leaf-rot: 12deg;
  animation-duration: 11s;
  animation-delay: -2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cpath d='M18 112c22-48 70-78 118-82-12 48-48 86-106 102-8-6-12-12-12-20z' fill='%2316a34a'/%3E%3Cpath d='M32 104c22-18 50-40 84-52' fill='none' stroke='%23166534' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  bottom: -28px;
  height: 150px;
  left: 22%;
  width: 150px;
}
.landingFooterLeafBR {
  --leaf-rot: -8deg;
  animation-duration: 9.5s;
  animation-delay: -5s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 140'%3E%3Cpath d='M148 28c-46 8-86 46-98 108 48-8 88-42 110-96-4-8-8-12-12-12z' fill='%2322c55e'/%3E%3Cpath d='M138 42c-20 24-40 54-50 88' fill='none' stroke='%23166534' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  bottom: -20px;
  height: 170px;
  right: -30px;
  width: 190px;
}
.landingFooterDots {
  animation: landingFooterDotsPulse 7s ease-in-out infinite;
  background-image: radial-gradient(#4ade80 1.2px, transparent 1.4px);
  background-size: 14px 14px;
  display: block;
  opacity: 0.35;
  pointer-events: none;
  position: absolute;
}
.landingFooterDotsTR {
  animation-delay: -2s;
  height: 110px;
  right: 18%;
  top: 36px;
  width: 110px;
}
.landingFooterDotsBL {
  animation-delay: -4.5s;
  bottom: 48px;
  height: 88px;
  left: 38%;
  width: 88px;
}
@keyframes landingFooterLeafSway {
  0%,
  100% {
    transform: rotate(var(--leaf-rot)) translate3d(0, 0, 0);
  }
  50% {
    transform: rotate(calc(var(--leaf-rot) + 7deg)) translate3d(6px, -12px, 0);
  }
}
@keyframes landingFooterDotsPulse {
  0%,
  100% {
    opacity: 0.22;
  }
  50% {
    opacity: 0.42;
  }
}
@media (prefers-reduced-motion: reduce) {
  .landingFooterLeaf,
  .landingFooterDots {
    animation: none;
  }
}
.landingFooterInner {
  box-sizing: border-box;
  padding: 40px 0 28px;
  position: relative;
  z-index: 1;
}
.landingFooterTop {
  align-items: stretch;
  border-bottom: 1px solid #f0f0f0;
  display: grid;
  gap: 0 32px;
  grid-template-columns: 1.15fr 1fr 1.35fr 0.85fr;
  padding-bottom: 32px;
}
.landingFooterTopCol,
.landingFooterBrand {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.landingFooterTopHead {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  min-height: 58px;
  margin-bottom: 12px;
}
.landingFooterTopHead .landingFooterHeading {
  margin: 0;
}
.landingFooterTopBody {
  align-items: center;
  display: flex;
  flex: 1;
  min-height: 42px;
}
img.landingFooterLogo,
.landingFooterLogo {
  display: block;
  height: 58px;
  object-fit: contain;
  width: auto;
}
p.landingFooterTagline,
.landingFooterTagline {
  color: #686b78;
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
  max-width: 260px;
}
p.landingFooterColText,
.landingFooterColText {
  color: #686b78;
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 14px;
}
.landingFooterAppButtons {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
}
a.landingFooterAppBtn,
.landingFooterAppBtn {
  align-items: center;
  background: #ffffff;
  border: 1px solid #16a34a;
  border-radius: 10px;
  color: #166534;
  display: inline-flex;
  flex: 1 1 0;
  gap: 6px;
  min-height: 42px;
  min-width: 0;
  padding: 6px 10px 6px 8px;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
a.landingFooterAppBtn:hover,
.landingFooterAppBtn:hover {
  background: #16a34a;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25);
  color: #ffffff;
}
svg.landingFooterAppIcon,
.landingFooterAppIcon {
  flex-shrink: 0;
  height: 22px;
  width: 22px;
}
.landingFooterAppText {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
  text-align: left;
}
.landingFooterAppText small {
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.85;
  text-transform: uppercase;
  white-space: nowrap;
}
.landingFooterAppText strong {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.landingFooterNewsForm {
  align-items: stretch;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  display: flex;
  min-height: 42px;
  overflow: hidden;
  width: 100%;
}
.landingFooterNewsInput {
  border: none;
  flex: 1;
  font-family: inherit;
  font-size: 13px;
  min-width: 0;
  outline: none;
  padding: 10px 12px;
}
.landingFooterNewsBtn {
  appearance: none;
  background: #16a34a;
  border: none;
  color: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 0 16px;
}
.landingFooterNewsBtn:hover {
  background: #15803d;
}
p.landingFooterNewsThanks,
.landingFooterNewsThanks {
  color: #15803d;
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}
.landingFooterPayRow {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  min-height: 42px;
  width: 100%;
}
.landingFooterPayMark {
  align-items: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  height: 32px;
  justify-content: center;
  letter-spacing: 0.04em;
  min-width: 52px;
  padding: 0 8px;
}
.landingFooterPayVisa {
  color: #1a1f71;
}
.landingFooterPayRupay {
  color: #0ea5e9;
}
.landingFooterPayMc {
  gap: 0;
  overflow: hidden;
  padding: 0 10px;
  position: relative;
  width: 52px;
}
.landingFooterPayMcDot {
  border-radius: 50%;
  display: block;
  height: 16px;
  width: 16px;
}
.landingFooterPayMcL {
  background: #eb001b;
  margin-right: -5px;
}
.landingFooterPayMcR {
  background: #f79e1b;
}
.landingFooterNav {
  align-items: start;
  border-bottom: 1px solid #f0f0f0;
  display: grid;
  gap: 28px 32px;
  grid-template-columns: 1fr 1fr 1fr 1.45fr;
  padding: 32px 0;
  width: 100%;
}
.landingFooterSection {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  min-width: 0;
  padding-bottom: 0;
}
button.landingFooterAccordionBtn {
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  color: #1c1c1c;
  cursor: default;
  display: flex;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  gap: 8px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 16px;
  min-height: 24px;
  padding: 0;
  text-align: left;
  width: 100%;
}
.landingFooterAccordionBtn > span:nth-of-type(2) {
  flex: 1 1 auto;
  min-width: 0;
}
.landingFooterAccordionChevron {
  display: none;
}
h3.landingFooterHeading,
.landingFooterHeading {
  color: #1c1c1c;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 16px;
}
.landingFooterHeadingWithIcon {
  align-items: center;
  display: flex;
  gap: 8px;
  min-height: 24px;
}
.landingFooterHeadingIcon {
  align-items: center;
  color: #16a34a;
  display: inline-flex;
  flex-shrink: 0;
  height: 16px;
  justify-content: center;
  width: 16px;
}
.landingFooterHeadingRow {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 16px;
  min-height: 24px;
}
.landingFooterHeadingRow .landingFooterHeading {
  margin: 0;
}
a.landingFooterSeeAll,
.landingFooterSeeAll {
  align-items: center;
  color: #16a34a;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  gap: 2px;
  line-height: 1.3;
  text-decoration: none;
}
a.landingFooterSeeAll:hover,
.landingFooterSeeAll:hover {
  color: #15803d;
  text-decoration: underline;
}
span.landingFooterSeeAllIcon,
.landingFooterSeeAllIcon {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.landingFooterLinkGrid {
  align-items: flex-start;
  display: flex;
  gap: 12px 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.landingFooterCategoryGrid {
  gap: 8px 24px;
}
ul.landingFooterLinkCol,
.landingFooterLinkCol {
  flex: 1 1 0;
  list-style: none;
  margin: 0;
  min-width: 0;
  padding: 0;
}
ul.landingFooterLinkCol li,
.landingFooterLinkCol li {
  margin: 0 0 8px;
}
ul.landingFooterLinkCol li:last-child,
.landingFooterLinkCol li:last-child {
  margin-bottom: 0;
}
a.landingFooterLink,
.landingFooterLink {
  align-items: center;
  color: #3f3f46;
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 8px;
  line-height: 1.65;
  text-decoration: none;
  transition: color 0.15s ease;
}
a.landingFooterLink:hover,
.landingFooterLink:hover {
  color: #15803d;
}
.landingFooterCatIcon {
  color: #94a3b8;
  display: inline-flex;
  flex-shrink: 0;
}
.landingFooterTrustRow {
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  padding: 28px 0;
}
.landingFooterTrustGrid {
  display: grid;
  flex: 1 1 auto;
  gap: 16px 20px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-width: 0;
}
.landingFooterTrustItem {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}
.landingFooterTrustIcon {
  align-items: center;
  background: #ecfdf5;
  border-radius: 999px;
  color: #16a34a;
  display: inline-flex;
  flex-shrink: 0;
  height: 44px;
  justify-content: center;
  width: 44px;
}
.landingFooterTrustCopy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.landingFooterTrustCopy strong {
  color: #1c1c1c;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}
.landingFooterTrustCopy span {
  color: #686b78;
  font-size: 12px;
  line-height: 1.45;
}
.landingFooterSocialBlock {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 10px;
}
span.landingFooterFollowLabel,
.landingFooterFollowLabel {
  color: #1c1c1c;
  font-size: 13px;
  font-weight: 700;
}
.landingFooterSocial {
  align-items: center;
  display: flex;
  gap: 8px;
}
a.landingFooterSocialBtn,
.landingFooterSocialBtn {
  align-items: center;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  color: #15803d;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  width: 34px;
}
a.landingFooterSocialBtn:hover,
.landingFooterSocialBtn:hover {
  background: #16a34a;
  border-color: #16a34a;
  color: #ffffff;
}
svg.landingFooterSocialSvg,
.landingFooterSocialSvg {
  display: block;
  height: 16px;
  width: 16px;
}
.landingFooterLegal {
  align-items: flex-start;
  display: flex;
  gap: 28px;
  justify-content: space-between;
  padding: 22px 0 0;
}
p.landingFooterCopy,
.TextView.landingFooterCopy {
  color: #686b78;
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
  white-space: nowrap;
}
p.landingFooterDisclaimer,
.landingFooterDisclaimer {
  color: #a0a0a0;
  flex: 1 1 auto;
  font-size: 10px;
  line-height: 1.7;
  margin: 0;
  max-width: 720px;
  text-align: right;
}
@media (max-width: 1100px) {
  .landingHeaderMain {
    gap: 12px 16px;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .landingSearchArea {
    flex-wrap: nowrap;
    justify-content: flex-start;
    min-width: 0;
  }
  .landingSearchWrap {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
  }
  .landingHeaderActions,
  .landingHeaderActionsLoggedIn {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
  .landingCustomerChip {
    max-width: none;
  }
  .landingHeroNavPrev {
    left: 12px;
    right: auto;
  }
  .landingHeroNavNext {
    right: 12px;
  }
  .landingHeroDots {
    left: auto;
    right: 24px;
  }
  .landingNavBarBox {
    border-radius: 12px;
  }
  nav.landingNavRow {
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  nav.landingNavRow::-webkit-scrollbar {
    display: none;
  }
  .landingNavItemWrap {
    flex-shrink: 0;
    padding: 12px 16px;
  }
  .landingNewsBanner {
    grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
    min-height: 250px;
    padding: 24px 8px 0 32px;
  }
  h2.landingNewsBannerTitle,
  .landingNewsBannerTitle {
    font-size: 30px;
  }
  .landingFooterFeatures {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .landingFooterTop {
    grid-template-columns: 1fr 1fr;
  }
  .landingFooterNav {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .landingFooterTrustRow {
    align-items: flex-start;
    flex-direction: column;
  }
  .landingFooterTrustGrid {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .landingFooterSocialBlock {
    align-items: flex-start;
  }
  .landingFooterLegal {
    flex-direction: column;
    gap: 12px;
  }
  p.landingFooterCopy,
  .TextView.landingFooterCopy {
    white-space: normal;
  }
  p.landingFooterDisclaimer,
  .landingFooterDisclaimer {
    max-width: 100%;
    text-align: left;
  }
  .landingTrustBar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .landingHeroSlide {
    display: block;
  }
  .landingHeroCopy {
    background: transparent;
    max-width: 100%;
    width: 100%;
  }
  .landingHeroMedia::before {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.36) 0%,
      rgba(255, 255, 255, 0.12) 48%,
      transparent 100%
    );
    content: "";
    display: block;
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
  }
  img.landingHeroPhoto {
    height: 100%;
    object-fit: cover;
    object-position: left center;
    width: 100%;
  }
  .Container.landingCategoryPanel {
    flex: none;
    width: 100%;
  }
  .landingPromoRow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .landingProductRow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .landingFeaturedCatRow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .landingRoundCatRow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .landingFeatureRow,
  .Container.landingFeatureRow {
    flex-wrap: wrap;
  }
  .landingFeatureCard,
  .Container.landingFeatureCard {
    flex: 1 1 220px;
  }
  .landingProductDetailPanel {
    grid-template-columns: 1fr;
    max-width: 520px;
  }
  .productDetailPageCard,
  .productDetailProGrid {
    grid-template-columns: 1fr;
  }
  .productDetailGallery {
    border-bottom: 1px solid #eef2f7;
    border-right: none;
  }
}
@media (max-width: 640px) {
  .Container.landingPageRoot,
  .landingPageRoot {
    background: #f4f6f8;
  }
  .landingContainer {
    padding: 0 14px;
  }
  .landingTopBar {
    padding: 7px 0;
  }
  .landingTopBarInner {
    align-items: center;
    flex-direction: row;
    gap: 8px;
  }
  .landingTopBarLinks {
    display: none;
  }
  .landingTopBarTicker {
    width: 100%;
  }
  .landingHeader {
    padding: 8px 0 0;
  }
  .landingHeaderMain {
    --hdr-control-h: 44px;
    align-items: center;
    gap: 10px;
    grid-template-columns: 1fr auto;
  }
  a.landingBrandLink {
    grid-column: 1;
    grid-row: 1;
  }
  img.landingBrandLogo {
    height: 40px;
  }
  .landingHeaderActions,
  .landingHeaderActionsLoggedIn {
    grid-column: 2;
    grid-row: 1;
    gap: 6px;
  }
  .landingSearchArea {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .landingLocationWrap,
  button.landingLocationBox,
  .landingLocationBox {
    min-width: 0;
    width: 100%;
  }
  .landingLocationBox {
    padding: 4px 12px 4px 8px;
  }
  .landingSearchWrap {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
    width: 100%;
  }
  .landingSearchBtn {
    font-size: 13px;
    min-width: 78px;
    padding: 0 12px;
  }
  button.landingHeaderBtnPlain {
    font-size: 12px;
    gap: 4px;
    height: 38px;
    min-width: 0;
    padding: 0 10px;
  }
  button.landingHeaderBtnPlain.landingHeaderBtnPrimary {
    min-width: 0;
    padding: 0 12px;
  }
  .landingCustomerChip,
  button.landingCustomerChip {
    max-width: 148px;
    padding: 4px 8px 4px 4px;
  }
  .landingCustomerMeta {
    display: none;
  }
  .landingCartLabel {
    display: none;
  }
  .landingNavBar {
    padding: 0 0 4px;
  }
  .landingNavBarBox {
    border-radius: 12px;
  }
  .landingNavItemWrap {
    padding: 9px 14px;
  }
  span.landingNavLabel,
  .TextView.landingNavLabel {
    font-size: 12px;
  }
  .landingSection,
  section.landingSection {
    margin-top: 20px;
  }
  .landingSectionHead {
    margin-bottom: 12px;
  }
  h2.landingSectionTitle,
  .TextView.landingSectionTitle {
    font-size: 16px;
  }
  .landingTrustBar {
    gap: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 14px;
    padding: 6px 4px;
  }
  .landingTrustItem {
    gap: 8px;
    padding: 10px 8px;
  }
  .landingTrustItem:nth-child(5) {
    grid-column: 1 / -1;
    justify-content: center;
  }
  .landingTrustIconBox {
    border-radius: 10px;
    height: 36px;
    width: 36px;
  }
  span.landingTrustTitle,
  .TextView.landingTrustTitle {
    font-size: 12px;
  }
  span.landingTrustDesc,
  .TextView.landingTrustDesc {
    font-size: 10px;
  }
  .landingPromoRow,
  .landingProductRow,
  .landingRoundCatRow {
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .landingPromoCard {
    border-radius: 14px;
  }
  img.landingPromoImage {
    aspect-ratio: 16 / 11;
    height: 96px;
    min-height: 96px;
  }
  .landingPromoContent {
    padding: 10px 12px 12px;
  }
  span.landingPromoTitle,
  .TextView.landingPromoTitle {
    font-size: 13px;
    margin-top: 4px;
  }
  span.landingPromoLink,
  .TextView.landingPromoLink {
    font-size: 12px;
    padding-top: 8px;
  }
  h3.landingFeaturedCatTitle {
    font-size: 14px;
  }
  .landingFeaturedCatRow {
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .landingFeaturedCatCard {
    grid-template-columns: 1fr;
    grid-template-rows: 92px minmax(0, 1fr);
    height: 188px;
    min-height: 188px;
  }
  .landingFeaturedCatMedia {
    height: 92px;
    order: -1;
  }
  .landingFeaturedCatBody {
    padding: 10px 10px 12px;
  }
  p.landingFeaturedCatSubtitle {
    display: none;
    max-width: none;
  }
  button.landingFeaturedCatBtn {
    margin-top: 8px;
    padding: 7px 10px;
  }
  .landingRoundCatRow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .landingBestSellersSection {
    margin-top: 18px;
  }
  .landingProductsHead {
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 4px;
  }
  .landingProductCarouselHeadActions {
    padding-top: 2px;
  }
  .landingProductCarouselNav {
    display: none;
  }
  .landingProductCarouselViewport {
    margin: 0 -14px;
  }
  .landingProductCarouselTrack {
    padding: 2px 14px 8px;
  }
  .landingProductCarouselTrack .landingProductCarouselRow {
    gap: 12px;
  }
  article.landingProductCarouselCard {
    flex: 0 0 168px;
    max-width: 168px;
  }
  .landingProductCard {
    border-radius: 14px;
    box-shadow: 0 1px 6px rgba(15, 23, 42, 0.05);
  }
  .landingProductImageWrap {
    height: 132px;
  }
  button.landingWishlistBtn {
    height: 30px;
    right: 8px;
    top: 8px;
    width: 30px;
  }
  .landingProductBadge {
    font-size: 9px;
    left: 8px;
    padding: 3px 7px;
    top: 8px;
  }
  .landingProductBody {
    padding: 10px 10px 12px;
  }
  span.landingProductName,
  .TextView.landingProductName {
    font-size: 13px;
    margin-top: 0;
    min-height: 34px;
  }
  span.landingProductPrice,
  .TextView.landingProductPrice {
    font-size: 15px;
  }
  button.landingAddBtn,
  .TextButton.landingAddBtn {
    background: #16a34a;
    border-color: #16a34a;
    border-radius: 10px;
    color: #ffffff;
    font-size: 12px;
    margin-top: 8px;
    padding: 8px 10px;
  }
  button.landingAddBtn:hover {
    background: #15803d;
  }
  section.landingImsSection,
  .Container.landingImsSection {
    padding: 18px 16px;
  }
  .landingFeatureRow,
  .Container.landingFeatureRow {
    flex-direction: column;
    gap: 10px;
  }
  .landingFeatureCard,
  .Container.landingFeatureCard {
    padding: 14px;
  }
  h3.landingFeatureTitle,
  .TextView.landingFeatureTitle {
    font-size: 15px;
  }
  .landingHeroBanner {
    border-radius: 18px;
    min-height: 220px;
    overflow: hidden;
  }
  .landingHeroSlideStack {
    height: auto;
    min-height: 220px;
  }
  .landingHeroSlide {
    display: none;
    inset: auto;
    min-height: 220px;
    position: relative;
  }
  .landingHeroSlide.landingHeroSlideActive {
    display: block;
  }
  .landingHeroCopy {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0.72) 58%,
      rgba(255, 255, 255, 0.2) 100%
    );
    gap: 8px;
    max-width: none;
    min-height: 220px;
    padding: 18px 16px 40px;
    width: 100%;
  }
  .landingHeroHighlights {
    display: none;
  }
  .landingHeroNav {
    display: none;
  }
  .landingHeroDots {
    bottom: 12px;
    left: auto;
    right: 14px;
  }
  h2.landingHeroTitle,
  .TextView.landingHeroTitle {
    font-size: 22px;
    line-height: 1.22;
    max-width: 16ch;
  }
  p.landingHeroSubtitle,
  .TextView.landingHeroSubtitle {
    display: -webkit-box;
    font-size: 12px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.45;
    max-width: 28ch;
    overflow: hidden;
  }
  button.landingHeroCtaBtn {
    font-size: 13px;
    margin-top: 4px;
    padding: 10px 16px;
  }
  .landingHeroMedia {
    inset: 0;
    min-height: 220px;
    position: absolute;
  }
  img.landingHeroPhoto,
  .landingHeroMedia {
    min-height: 220px;
  }
  img.landingHeroPhoto {
    object-fit: cover;
    object-position: 78% center;
  }
  .landingHeroCaption {
    bottom: 14px;
    max-width: 210px;
    right: 14px;
  }
  .landingFooterTop,
  .landingFooterNav,
  .landingFooterTrustGrid {
    grid-template-columns: 1fr;
  }
  footer.landingFooter,
  .Container.landingFooter {
    margin-top: 20px;
  }
  .landingFooterDecor {
    display: none;
  }
  .landingFooterInner {
    padding: 24px 0 18px;
  }
  .landingFooterTop {
    gap: 16px;
    padding-bottom: 16px;
  }
  .landingFooterTopHead {
    min-height: 0;
    margin-bottom: 8px;
  }
  img.landingFooterLogo,
  .landingFooterLogo {
    height: 40px;
  }
  p.landingFooterTagline,
  .landingFooterTagline {
    font-size: 12px;
  }
  .landingFooterNewsCol {
    display: none;
  }
  .landingNewsBanner {
    border-radius: 16px;
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 18px 16px 18px;
    text-align: left;
  }
  .landingNewsBannerCopy {
    align-items: stretch;
    max-width: none;
    padding: 0;
  }
  h2.landingNewsBannerTitle,
  .landingNewsBannerTitle {
    font-size: 20px;
    line-height: 1.25;
    max-width: none;
  }
  p.landingNewsBannerSubtitle,
  .landingNewsBannerSubtitle {
    font-size: 13px;
    margin-bottom: 14px;
  }
  .landingNewsBannerForm {
    border-radius: 12px;
    max-width: 100%;
    min-height: 46px;
    padding: 4px 4px 4px 12px;
  }
  button.landingNewsBannerBtn,
  .landingNewsBannerBtn {
    font-size: 13px;
    min-height: 38px;
    padding: 0 14px;
  }
  .landingNewsBannerArt {
    display: none;
  }
  img.landingNewsBannerImage,
  .landingNewsBannerImage {
    display: none;
  }
  .landingFooterFeaturesWrap {
    margin-top: 12px;
  }
  .landingFooterFeatures {
    gap: 8px;
    grid-template-columns: 1fr 1fr;
  }
  .landingFooterFeatureCard {
    min-height: 0;
    padding: 10px;
  }
  .landingFooterFeatureCopy span {
    display: none;
  }
  .landingFooterFeatureCopy strong {
    font-size: 12px;
  }
  span.landingFooterFeatureIcon,
  .landingFooterFeatureIcon,
  svg.landingFooterFeatureSvg,
  .landingFooterFeatureSvg {
    height: 28px;
    width: 28px;
  }
  .landingFooterNav {
    border-bottom: none;
    gap: 0;
    padding: 8px 0 4px;
  }
  .landingFooterSection {
    border-bottom: 1px solid #eef2f7;
  }
  button.landingFooterAccordionBtn {
    cursor: pointer;
    font-size: 14px;
    margin: 0;
    min-height: 48px;
    padding: 0 2px;
  }
  .landingFooterAccordionChevron {
    color: #94a3b8;
    display: block;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    transform: rotate(90deg);
    transition: transform 0.18s ease;
  }
  button.landingFooterAccordionBtn.isOpen .landingFooterAccordionChevron {
    transform: rotate(-90deg);
  }
  .landingFooterAccordionPanel {
    display: none;
    padding: 0 2px 12px;
  }
  .landingFooterSectionOpen .landingFooterAccordionPanel {
    display: block;
  }
  .landingFooterLinkGrid,
  .landingFooterCategoryGrid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  .landingFooterCategoryGrid .landingFooterLinkCol {
    display: contents;
  }
  ul.landingFooterLinkCol,
  .landingFooterLinkCol {
    display: grid;
    gap: 0;
    grid-template-columns: 1fr 1fr;
    margin: 0;
    max-width: none;
    min-width: 0;
    width: 100%;
  }
  ul.landingFooterLinkCol li,
  .landingFooterLinkCol li {
    margin: 0;
  }
  a.landingFooterLink,
  .landingFooterLink {
    background: #f8fafc;
    border-radius: 8px;
    display: block;
    font-size: 12px;
    margin: 0 0 8px;
    padding: 8px 10px;
  }
  .landingFooterCategoryGrid a.landingFooterLink,
  .landingFooterCategoryGrid .landingFooterLink {
    border-radius: 999px;
    margin: 0;
    width: auto;
  }
  .landingFooterCatIcon {
    display: none;
  }
  .landingFooterTrustRow {
    flex-direction: column;
    gap: 12px;
    padding-top: 12px;
  }
  .landingFooterTrustGrid {
    gap: 8px;
    grid-template-columns: 1fr 1fr;
  }
  .landingFooterTrustCopy span {
    display: none;
  }
  .landingFooterTrustCopy strong {
    font-size: 12px;
  }
  .landingFooterLegal {
    gap: 8px;
    padding-top: 12px;
  }
  p.landingFooterDisclaimer,
  .landingFooterDisclaimer {
    display: none;
  }
  .landingProductDetailPanel {
    grid-template-columns: 1fr;
    max-height: 92vh;
    overflow: auto;
  }
  .landingProductDetailCopy {
    padding: 24px 20px 12px;
  }
  h2.landingProductDetailTitle {
    font-size: 24px;
  }
  .landingProductDetailFacts {
    padding: 16px 20px 24px;
  }
  .productDetailPageCopy {
    padding: 24px 20px 12px;
  }
  h1.productDetailPageTitle {
    font-size: 26px;
  }
  .productDetailPageFacts {
    padding: 16px 20px 24px;
  }
  .productDetailGallery {
    padding: 18px;
  }
  .productDetailGalleryMain {
    min-height: 260px;
  }
  .productDetailPurchasePanel {
    padding: 20px 18px 24px;
  }
  h1.productDetailProTitle {
    font-size: 20px;
  }
  span.productDetailProPrice {
    font-size: 28px;
  }
  .productDetailSpecRow {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.customerCartPageRoot {
  background: #f8fafc;
}
.customerCartPageScroll {
  padding-bottom: 48px;
}
.customerCartPageMain {
  padding-top: 20px;
}
.customerCartPageHead {
  margin: 8px 0 24px;
}
h1.customerCartPageTitle {
  color: #0f172a;
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 6px;
}
p.customerCartPageSubtitle {
  color: #64748b;
  font-size: 14px;
  margin: 0;
}
.customerCartLayout {
  align-items: start;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.9fr);
}
.customerCartItemsCol {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.customerCartItem {
  align-items: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  display: grid;
  gap: 16px;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  padding: 16px;
}
.customerCartItemImageWrap {
  align-items: center;
  background: #f8fafc;
  border-radius: 12px;
  display: flex;
  height: 88px;
  justify-content: center;
  overflow: hidden;
  width: 88px;
}
img.customerCartItemImage {
  height: 100%;
  object-fit: contain;
  width: 100%;
}
.customerCartItemImageFallback {
  font-size: 28px;
}
h3.customerCartItemName {
  color: #0f172a;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 6px;
}
p.customerCartItemUnitPrice {
  color: #64748b;
  font-size: 13px;
  margin: 0 0 12px;
}
.customerCartItemActions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.customerCartQtyStepper {
  align-items: center;
  background: #ffffff;
  border: 2px solid #16a34a;
  border-radius: 10px;
  display: inline-flex;
  gap: 8px;
  min-height: 38px;
  padding: 0 6px;
}
button.customerCartQtyBtn {
  background: #f0fdf4;
  border: none;
  border-radius: 8px;
  color: #15803d;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  height: 28px;
  line-height: 1;
  min-width: 28px;
  padding: 0;
}
button.customerCartQtyBtn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
span.customerCartQtyValue {
  color: #0f172a;
  font-size: 15px;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
}
button.customerCartRemoveBtn {
  background: transparent;
  border: none;
  color: #dc2626;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 0;
}
.customerCartItemTotal {
  color: #0f172a;
  font-size: 18px;
  font-weight: 800;
  white-space: nowrap;
}
.customerCartSideCol {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 20px;
}
.customerCartPanel {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
}
h2.customerCartPanelTitle {
  color: #0f172a;
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 8px;
}
p.customerCartPanelHint {
  color: #64748b;
  font-size: 13px;
  margin: 0 0 16px;
}
label.customerCartField {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
span.customerCartFieldLabel {
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
span.customerCartFieldValue {
  color: #0f172a;
  font-size: 15px;
  font-weight: 600;
}
select.customerCartSelect,
input.customerCartInput,
textarea.customerCartTextarea {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  color: #0f172a;
  font-size: 14px;
  padding: 10px 12px;
  width: 100%;
}
textarea.customerCartTextarea {
  min-height: 88px;
  resize: vertical;
}
.customerCartSummaryRow {
  color: #334155;
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  margin-bottom: 10px;
}
.customerCartSummaryRow.customerCartSummaryTotal {
  border-top: 1px solid #e2e8f0;
  color: #0f172a;
  font-size: 18px;
  font-weight: 800;
  margin-top: 12px;
  padding-top: 14px;
}
p.customerCartFreeDeliveryNote {
  background: #ecfdf5;
  border-radius: 8px;
  color: #15803d;
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 12px;
  padding: 8px 10px;
}
p.customerCartCheckoutMessage {
  background: #eff6ff;
  border-radius: 8px;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 12px;
  padding: 10px 12px;
}
.customerCartPaymentSection {
  border-top: 1px solid #e2e8f0;
  margin: 16px 0 12px;
  padding-top: 16px;
}
h3.customerCartPaymentTitle {
  color: #0f172a;
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 12px;
}
.customerCartPaymentOptions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
button.customerCartPaymentOption {
  align-items: center;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
  width: 100%;
}
button.customerCartPaymentOption:hover:not(:disabled) {
  border-color: #86efac;
}
button.customerCartPaymentOption.customerCartPaymentOptionActive {
  background: #f0fdf4;
  border-color: #16a34a;
}
button.customerCartPaymentOptionDisabled {
  cursor: not-allowed;
  opacity: 0.72;
}
span.customerCartPaymentOptionIcon {
  font-size: 22px;
  line-height: 1;
}
span.customerCartPaymentOptionBody {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
span.customerCartPaymentOptionLabel {
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
}
span.customerCartPaymentOptionHint {
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
}
button.customerCartCheckoutBtn {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  border: none;
  border-radius: 12px;
  color: #ffffff;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  min-height: 48px;
  width: 100%;
}
button.customerCartCheckoutBtn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
button.customerCartContinueBtn {
  background: #ffffff;
  border: 2px solid #16a34a;
  border-radius: 12px;
  color: #15803d;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  margin-top: 10px;
  min-height: 44px;
  width: 100%;
}
.customerCartEmpty {
  align-items: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  padding: 48px 24px;
  text-align: center;
}
.customerCartEmptyIcon {
  font-size: 48px;
  margin-bottom: 12px;
}
h2.customerCartEmptyTitle {
  color: #0f172a;
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 8px;
}
p.customerCartEmptyText {
  color: #64748b;
  font-size: 14px;
  margin: 0 0 20px;
}
button.customerCartShopBtn {
  background: #16a34a;
  border: none;
  border-radius: 12px;
  color: #ffffff;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  min-height: 44px;
  padding: 0 24px;
}

body.customerCartDrawerBodyLock {
  overflow: hidden;
}
.customerCartDrawerRoot {
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 14000;
}
.customerCartDrawerRoot.customerCartDrawerRootOpen {
  pointer-events: auto;
}
.customerCartDrawerBackdrop {
  background: rgba(0, 0, 0, 0.55);
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: opacity 0.28s ease;
}
.customerCartDrawerRootOpen .customerCartDrawerBackdrop {
  opacity: 1;
}
.customerCartDrawerPanel {
  background: #f2f5fa;
  box-shadow: -12px 0 40px rgba(15, 23, 42, 0.22);
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 100%;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  width: 420px;
}
.customerCartDrawerRootOpen .customerCartDrawerPanel {
  transform: translateX(0);
}
.customerCartDrawerInner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.customerCartDrawerHeader {
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  flex-shrink: 0;
  gap: 10px;
  min-height: 58px;
  padding: 8px 16px;
}
button.customerCartDrawerBackBtn {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #111827;
  cursor: pointer;
  display: inline-flex;
  font-size: 22px;
  height: 36px;
  justify-content: center;
  line-height: 1;
  width: 36px;
}
h2.customerCartDrawerTitle {
  color: #111827;
  flex: 1;
  font-size: 16px;
  font-weight: 800;
  margin: 0;
}
button.customerCartDrawerShareBtn {
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  color: #111827;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  min-height: 28px;
  padding: 0 10px;
}
button.customerCartDrawerShareBtn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.customerCartDrawerBody {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 10px 16px;
}
.customerCartDrawerBody > * {
  flex-shrink: 0;
}
.customerCartDrawerSavings {
  background: #e8f4ff;
  border-radius: 8px;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 10px;
}
.customerCartDrawerSavings.customerCartDrawerSavingsHint {
  background: #ecfdf5;
  color: #15803d;
}
.customerCartDrawerDeliveryChip {
  align-items: center;
  background: #ffffff;
  border-radius: 10px;
  display: flex;
  gap: 8px;
  padding: 8px 10px;
}
.customerCartDrawerDeliveryIcon {
  font-size: 16px;
  line-height: 1;
}
.customerCartDrawerDeliveryChip strong {
  color: #111827;
  display: block;
  font-size: 12px;
}
.customerCartDrawerDeliveryChip span {
  color: #6b7280;
  font-size: 11px;
}
.customerCartDrawerItems {
  background: #ffffff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: visible;
}
.customerCartDrawerItem {
  align-items: center;
  border: none;
  border-bottom: 1px solid #f1f5f9;
  border-radius: 0;
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  min-height: 72px;
  padding: 8px 10px;
}
.customerCartDrawerItem:last-child {
  border-bottom: none;
}
.customerCartDrawerItem .customerCartItemImageWrap {
  flex: 0 0 48px;
  height: 48px;
  width: 48px;
}
.customerCartDrawerItem .customerCartItemBody {
  flex: 1 1 auto;
  min-width: 0;
}
.customerCartDrawerItem h3.customerCartItemName {
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  margin-bottom: 2px;
}
.customerCartDrawerItem p.customerCartItemUnitPrice {
  font-size: 11px;
  margin-bottom: 4px;
}
.customerCartDrawerItem .customerCartItemActions {
  gap: 8px;
}
.customerCartDrawerItem .customerCartItemTotal {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  grid-column: auto;
}
.customerCartDrawerItem button.customerCartRemoveBtn {
  font-size: 11px;
}
.customerCartQtyStepperSolid {
  background: #0c831f;
  border-color: #0c831f;
  border-radius: 6px;
  gap: 2px;
  min-height: 26px;
  padding: 0 3px;
}
.customerCartQtyStepperSolid button.customerCartQtyBtn {
  background: transparent;
  color: #ffffff;
  font-size: 14px;
  height: 22px;
  min-width: 22px;
}
.customerCartQtyStepperSolid span.customerCartQtyValue {
  color: #ffffff;
  font-size: 12px;
  min-width: 14px;
}
.customerCartDrawerInner .customerCartPanel {
  border: none;
  border-radius: 10px;
  padding: 12px;
}
.customerCartDrawerInner h2.customerCartPanelTitle {
  font-size: 13px;
  margin-bottom: 6px;
}
.customerCartDrawerInner p.customerCartPanelHint {
  font-size: 11px;
  margin-bottom: 10px;
}
.customerCartDrawerInner span.customerCartFieldLabel {
  font-size: 11px;
}
.customerCartDrawerInner span.customerCartFieldValue {
  font-size: 12px;
}
.customerCartDrawerInner .customerCartSummaryRow {
  font-size: 12px;
  margin-bottom: 8px;
}
.customerCartDrawerInner .customerCartSummaryRow.customerCartSummaryTotal {
  font-size: 14px;
}
.customerCartDrawerInner h3.customerCartPaymentTitle {
  font-size: 13px;
}
.customerCartDrawerInner span.customerCartPaymentOptionLabel {
  font-size: 12px;
}
.customerCartDrawerInner span.customerCartPaymentOptionHint {
  font-size: 11px;
}
.customerCartDrawerInner .customerCartEmpty {
  border: none;
  margin: 24px 8px;
  padding: 36px 16px;
}
.customerCartDrawerFooter {
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  flex-shrink: 0;
  padding: 8px 10px 12px;
}
button.customerCartDrawerProceedBtn {
  align-items: center;
  background: #0c831f;
  border: none;
  border-radius: 8px;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 12px;
  width: 100%;
}
button.customerCartDrawerProceedBtn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.customerCartDrawerProceedTotal {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.customerCartDrawerProceedTotal small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.9;
}
.customerCartDrawerProceedLabel {
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 480px) {
  .customerCartDrawerPanel {
    width: 100%;
  }
}
.customerOrderConfirm {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 auto;
  max-width: 560px;
  padding: 8px 0 12px;
  text-align: center;
  width: 100%;
}
.customerOrderConfirmDrawer {
  padding-top: 4px;
}
.customerOrderConfirmHero {
  align-items: center;
  display: flex;
  flex-direction: column;
}
.customerOrderConfirmIcon {
  align-items: center;
  background: radial-gradient(circle at 50% 40%, #bbf7d0 0%, #dcfce7 62%, #f0fdf4 100%);
  border: 1px solid #86efac;
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(22, 163, 74, 0.16);
  color: #15803d;
  display: flex;
  height: 76px;
  justify-content: center;
  margin-bottom: 14px;
  width: 76px;
}
span.customerOrderConfirmCheck {
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
}
span.customerOrderConfirmBadge {
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  color: #166534;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  padding: 4px 10px;
  text-transform: uppercase;
}
h2.customerOrderConfirmTitle {
  color: #0f172a;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 8px;
}
p.customerOrderConfirmSubtitle {
  color: #64748b;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  max-width: 340px;
}
.customerOrderConfirmEta {
  align-items: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  text-align: left;
}
.customerOrderConfirmEtaIcon {
  align-items: center;
  background: #fff7ed;
  border-radius: 10px;
  display: inline-flex;
  font-size: 18px;
  height: 40px;
  justify-content: center;
  width: 40px;
}
.customerOrderConfirmEta strong {
  color: #0f172a;
  display: block;
  font-size: 14px;
  font-weight: 800;
}
.customerOrderConfirmEta span {
  color: #64748b;
  font-size: 12px;
}
.customerOrderConfirmCard {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  text-align: left;
  width: 100%;
}
.customerOrderConfirmIdRow {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}
span.customerOrderConfirmIdLabel {
  color: #64748b;
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
strong.customerOrderConfirmIdValue {
  color: #0f172a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
button.customerOrderConfirmCopyBtn {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #334155;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  min-height: 32px;
  padding: 0 10px;
}
.customerOrderConfirmMeta {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 12px;
}
.customerOrderConfirmMetaItem {
  background: #f8fafc;
  border-radius: 10px;
  padding: 10px 12px;
}
.customerOrderConfirmMetaItem span {
  color: #64748b;
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.customerOrderConfirmMetaItem strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
}
.customerOrderConfirmRow {
  align-items: center;
  color: #475569;
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  margin-bottom: 12px;
}
.customerOrderConfirmRow strong {
  color: #0f172a;
  font-weight: 700;
}
.customerOrderConfirmRow.customerOrderConfirmTotal {
  border-top: 1px solid #e2e8f0;
  color: #0f172a;
  font-size: 16px;
  margin-bottom: 0;
  margin-top: 4px;
  padding-top: 14px;
}
.customerOrderConfirmCodNote {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  color: #166534;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 12px;
  padding: 10px 12px;
}
.customerOrderConfirmDelivery {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px;
  text-align: left;
}
span.customerOrderConfirmDeliveryLabel {
  color: #64748b;
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  text-transform: uppercase;
}
p.customerOrderConfirmDeliveryText {
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 6px;
}
p.customerOrderConfirmDeliveryPhone {
  color: #64748b;
  font-size: 13px;
  margin: 0;
}
.customerOrderConfirmAutoClose {
  width: 100%;
}
.customerOrderConfirmProgressTrack {
  background: #e2e8f0;
  border-radius: 999px;
  height: 4px;
  overflow: hidden;
  width: 100%;
}
.customerOrderConfirmProgressFill {
  background: linear-gradient(90deg, #16a34a 0%, #22c55e 100%);
  border-radius: 999px;
  height: 100%;
  transition: width 1s linear;
}
p.customerOrderConfirmAutoCloseText {
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  margin: 8px 0 0;
}
button.customerOrderConfirmShopBtn {
  min-height: 48px;
  width: 100%;
}
span.customerCartDrawerCloseHint {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  min-width: 28px;
  text-align: right;
}

.customerAccountPageRoot {
  background: #f6f7f8;
}
.customerAccountPageScroll {
  padding-bottom: 64px;
}
.customerAccountPageMain {
  padding-top: 28px;
}
.customerAccountTopBar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 22px;
  width: 100%;
}
button.customerAccountBackBtn {
  align-items: center;
  align-self: flex-start;
  background: transparent;
  border: none;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 6px;
  letter-spacing: 0.01em;
  margin: 0;
  padding: 0;
}
button.customerAccountBackBtn:hover {
  color: #14532d;
}
.customerAccountPageHead {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  min-width: 0;
  text-align: left;
}
h1.customerAccountPageTitle {
  color: #0f172a;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.15;
  margin: 0;
}
span.customerAccountPageDivider {
  display: none;
}
p.customerAccountPageSubtitle {
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.45;
  margin: 0;
}
.customerAccountLayout {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.customerAccountShell {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: visible;
}
.customerAccountTabs {
  background: #ffffff;
  border: none;
  border-bottom: 1px solid #eef0f2;
  border-radius: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 20px 0;
}
button.customerAccountTabBtn {
  align-items: center;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: #64748b;
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  font-size: 13.5px;
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  letter-spacing: 0.01em;
  min-height: 50px;
  padding: 14px 16px 12px;
  text-align: center;
  transition: color 0.15s ease, border-color 0.15s ease;
}
span.customerAccountTabIcon {
  align-items: center;
  color: inherit;
  display: inline-flex;
  height: 16px;
  justify-content: center;
  line-height: 1;
  width: 16px;
}
span.customerAccountTabLabel {
  line-height: 1;
}
button.customerAccountTabBtn:hover {
  background: transparent;
  border-color: transparent;
  border-bottom-color: #cbd5e1;
  color: #14532d;
}
button.customerAccountTabBtn.customerAccountTabBtnActive {
  background: transparent;
  border-color: transparent;
  border-bottom-color: #166534;
  box-shadow: none;
  color: #14532d;
  font-weight: 700;
}
.customerAccountPanel {
  background: #ffffff;
  border: none;
  border-radius: 0;
  min-height: 240px;
  padding: 16px 18px;
}
h2.customerAccountPanelTitle {
  color: #0f172a;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.customerAccountPanelCompact {
  min-height: 0;
  padding-top: 14px;
}
.customerAccountPanelCompact h2.customerAccountPanelTitle {
  font-size: 13px;
  margin-bottom: 10px;
}
.customerAccountPanelOrders {
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
  overflow: visible;
  padding: 0;
}
.customerAccountPanelOrders > h2.customerAccountPanelTitle {
  display: none;
}
.customerOrderHistoryWrap {
  display: flex;
  flex-direction: column;
}
.customerOrderHistoryHeader {
  background: #ffffff;
  border-bottom: 1px solid #eef0f2;
  padding: 20px 24px 16px;
}
.customerOrderHistoryHeaderText h2 {
  color: #0f172a;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 4px;
}
.customerOrderHistoryHeaderText p {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0;
  text-transform: uppercase;
}
.customerOrderHistoryLayout {
  align-items: stretch;
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr);
  min-height: 0;
}
.customerAccountOrderListCol {
  background: #fafbfc;
  border-right: 1px solid #eef0f2;
  max-height: 620px;
  overflow-y: auto;
}
.customerAccountOrderList {
  display: flex;
  flex-direction: column;
  padding: 8px;
}
.customerAccountOrderCard {
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0;
}
.customerAccountOrderCard:last-child {
  border-bottom: none;
}
button.customerAccountOrderCard.customerAccountOrderCardClickable {
  background: transparent;
  cursor: pointer;
  display: block;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}
button.customerAccountOrderCard.customerAccountOrderCardClickable:hover {
  background: #ffffff;
  border-color: #e5e7eb;
}
button.customerAccountOrderCard.customerAccountOrderCardSelected {
  background: #ffffff;
  border-color: #dbe7df;
  box-shadow: inset 3px 0 0 #166534;
}
.customerAccountOrderCardInner {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 14px 14px 16px;
}
.customerAccountOrderLeft {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
span.customerAccountOrderId {
  color: #0f172a;
  font-family: ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
span.customerAccountOrderMetaLine {
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}
.customerAccountOrderRight {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 8px;
}
span.customerAccountOrderAmount {
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.customerOrderDetailCol {
  align-self: start;
  background: #ffffff;
  box-sizing: border-box;
  min-height: 0;
  max-height: min(620px, calc(100vh - 220px));
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 8px;
}
.customerOrderDetailPanel {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: auto;
  justify-content: flex-start;
  min-height: 0;
  padding: 16px 22px 28px;
}
.customerOrderDetailPanelEmpty,
.customerOrderDetailPanelState {
  align-items: center;
  justify-content: center;
  min-height: 280px;
  text-align: center;
}
.customerOrderDetailEmptyIcon {
  display: none;
}
.customerOrderDetailPanelEmpty strong {
  color: #0f172a;
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}
.customerOrderDetailPanelEmpty p {
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  max-width: 260px;
}
.customerOrderDetailStateBody {
  align-items: center;
  color: #64748b;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  gap: 10px;
}
.customerOrderDetailSpinner {
  animation: customerOrderSpin 0.8s linear infinite;
  border: 2px solid #e2e8f0;
  border-radius: 50%;
  border-top-color: #16a34a;
  height: 22px;
  width: 22px;
}
@keyframes customerOrderSpin {
  to {
    transform: rotate(360deg);
  }
}
.customerOrderDetailHead {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.customerOrderDetailHeadMain {
  min-width: 0;
}
span.customerOrderDetailLabel {
  color: #94a3b8;
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin-bottom: 8px;
  text-transform: uppercase;
}
h3.customerOrderDetailTitle {
  color: #0f172a;
  font-family: ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin: 0 0 6px;
}
p.customerOrderDetailDate {
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  margin: 0;
}
button.customerOrderDetailClose {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: #94a3b8;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 18px;
  height: 32px;
  line-height: 1;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  width: 32px;
}
button.customerOrderDetailClose:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #475569;
}
.customerOrderDetailStatusRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
span.customerAccountOrderStatus {
  background: #f1f5f9;
  border-radius: 999px;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  text-transform: none;
  white-space: nowrap;
}
span.customerAccountOrderStatusConfirmed {
  background: #ecfdf3;
  color: #166534;
}
span.customerAccountOrderStatusPending,
span.customerAccountOrderStatusDraft {
  background: #fffbeb;
  color: #b45309;
}
span.customerAccountOrderStatusCancelled,
span.customerAccountOrderStatusCanceled {
  background: #fef2f2;
  color: #b91c1c;
}
.customerOrderHistoryWrap span.customerAccountOrderStatus {
  font-size: 11px;
  padding: 4px 9px;
}
span.customerOrderDetailPaymentBadge {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 5px 10px;
}
.customerOrderDetailSection {
  background: #f8fafc;
  border: 1px solid #eef0f2;
  border-radius: 10px;
  box-shadow: none;
  margin-bottom: 14px;
  padding: 16px 18px;
}
h4.customerOrderDetailSectionTitle {
  border-bottom: none;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin: 0 0 10px;
  padding-bottom: 0;
  text-transform: uppercase;
}
p.customerOrderDetailAddress {
  color: #1e293b;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.6;
  margin: 0 0 8px;
  white-space: pre-line;
}
p.customerOrderDetailPhone {
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  margin: 0;
}
.customerOrderDetailLines {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.customerOrderDetailLine {
  align-items: center;
  border-bottom: 1px solid #eef0f2;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 12px 0;
}
.customerOrderDetailLine:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.customerOrderDetailLine:first-child {
  padding-top: 0;
}
.customerOrderDetailLineThumbWrap {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  flex-shrink: 0;
  height: 56px;
  overflow: hidden;
  position: relative;
  width: 56px;
}
img.customerOrderDetailLineThumb {
  background: #ffffff;
  display: block;
  height: 100%;
  object-fit: contain;
  padding: 3px;
  position: relative;
  width: 100%;
  z-index: 1;
}
span.customerOrderDetailLineThumbFallback {
  align-items: center;
  background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
  color: #15803d;
  display: flex;
  font-size: 14px;
  font-weight: 700;
  height: 100%;
  justify-content: center;
  left: 0;
  letter-spacing: 0.02em;
  position: absolute;
  top: 0;
  width: 100%;
}
span.customerOrderDetailLineThumbFallback.isBehind {
  z-index: 0;
}
.customerOrderDetailLineInfo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.customerOrderDetailLineInfo strong {
  color: #0f172a;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.4;
}
.customerOrderDetailLineInfo span {
  color: #64748b;
  font-size: 12px;
}
span.customerOrderDetailLinePrice {
  color: #0f172a;
  flex-shrink: 0;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.customerOrderDetailSummary {
  background: #f8fafc;
  border: 1px solid #eef0f2;
  border-radius: 10px;
  box-shadow: none;
  flex-shrink: 0;
  margin-top: 4px;
  padding: 16px 18px 18px;
}
.customerOrderDetailSummaryRow {
  align-items: center;
  color: #64748b;
  display: flex;
  font-size: 13px;
  justify-content: space-between;
  margin-bottom: 10px;
}
.customerOrderDetailSummaryRow:last-child {
  margin-bottom: 0;
}
.customerOrderDetailSummaryTotal {
  border-top: 1px solid #e5e7eb;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  margin-top: 12px;
  padding-top: 14px;
}
.customerOrderDetailSummaryTotal strong {
  color: #14532d;
  font-size: 18px;
  letter-spacing: -0.03em;
}
p.customerAccountHint {
  color: #64748b;
  font-size: 12px;
}
p.customerAccountError {
  background: #fef2f2;
  border-radius: 6px;
  color: #dc2626;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 10px;
}
p.customerAccountSuccess {
  background: #f0fdf4;
  border-radius: 6px;
  color: #15803d;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 10px;
}
.customerAccountEmpty {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 24px 12px;
  text-align: center;
}
.customerAccountEmptyIcon {
  font-size: 32px;
  margin-bottom: 8px;
}
.customerAccountEmpty h3 {
  color: #0f172a;
  font-size: 15px;
  margin: 0 0 4px;
}
.customerAccountEmpty p {
  color: #64748b;
  font-size: 12px;
  margin: 0 0 12px;
}
.customerAccountPanelProfile {
  min-height: 0;
  overflow: visible;
  padding: 0;
  width: 100%;
}
.customerAccountPanelProfile > h2.customerAccountPanelTitle {
  display: none;
}
.customerProfileWrap {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.customerProfilePageHeader {
  border-bottom: 1px solid #eef2f6;
  padding: 16px 22px 14px;
}
.customerProfilePageHeader h2 {
  color: #0f172a;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.customerProfilePageHeader p {
  color: #94a3b8;
  font-size: 13px;
  margin: 0;
}
.customerProfileBody {
  align-items: stretch;
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  width: 100%;
}
.customerProfileHeroCard {
  background: linear-gradient(180deg, #f8fafc 0%, #f0fdf4 100%);
  border: none;
  border-radius: 0;
  border-right: 1px solid #e8edf2;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 100%;
  padding: 24px 22px 28px;
}
.customerProfileHeroMain {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
}
img.customerProfileAvatar,
span.customerProfileAvatarFallback {
  border-radius: 50%;
  flex-shrink: 0;
  height: 88px;
  width: 88px;
}
img.customerProfileAvatar {
  border: 3px solid #ffffff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
  object-fit: cover;
}
span.customerProfileAvatarFallback {
  align-items: center;
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  border: 3px solid #ffffff;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.22);
  color: #ffffff;
  display: inline-flex;
  font-size: 26px;
  font-weight: 700;
  justify-content: center;
}
.customerProfileHeroInfo {
  width: 100%;
}
h3.customerProfileName {
  color: #0f172a;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
p.customerProfileEmail {
  color: #64748b;
  font-size: 14px;
  line-height: 1.45;
  margin: 0 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
p.customerProfilePhone {
  color: #334155;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}
.customerProfilePhotoActions {
  align-items: center;
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: auto;
  overflow: visible;
  padding-bottom: 8px;
  padding-top: 16px;
  flex-shrink: 0;
}
label.customerProfilePhotoBtn,
button.customerProfilePhotoBtn {
  align-items: center;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-sizing: border-box;
  color: #334155;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  justify-content: center;
  line-height: 1.4;
  min-height: 40px;
  overflow: visible;
  padding: 9px 16px;
  transition: border-color 0.15s ease, background 0.15s ease;
  vertical-align: middle;
  white-space: nowrap;
}
label.customerProfilePhotoBtn input.customerProfileAvatarInput {
  display: none !important;
  height: 0;
  overflow: hidden;
  position: absolute;
  width: 0;
}
span.customerProfilePhotoBtnText {
  display: block;
  line-height: 1.4;
  pointer-events: none;
}
label.customerProfilePhotoBtn:hover,
button.customerProfilePhotoBtn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}
button.customerProfilePhotoBtnMuted {
  color: #64748b;
}
input.customerProfileAvatarInput {
  display: none;
}
.customerProfileFormCard {
  background: #ffffff;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  min-width: 0;
  padding: 22px 28px 28px;
  width: 100%;
}
.customerProfileFormHead {
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 18px;
  padding-bottom: 14px;
}
h3.customerProfileFormTitle {
  color: #0f172a;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
}
p.customerProfileFormHint {
  color: #94a3b8;
  font-size: 14px;
  margin: 0;
}
.customerProfileFormGrid {
  display: grid;
  gap: 16px 20px;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}
label.customerProfileField {
  width: 100%;
}
label.customerProfileEmailField {
  grid-column: 1 / -1;
}
label.customerProfileField span {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.customerAccountInput.customerProfileInput {
  font-size: 15px;
  min-height: 44px;
  padding: 10px 12px;
  width: 100%;
}
span.customerProfileFieldNote {
  color: #94a3b8;
  font-size: 12px;
  margin-top: 2px;
}
.customerProfileFormFooter {
  align-items: center;
  border-top: 1px solid #f1f5f9;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 16px;
}
p.customerProfileFormMessage {
  flex: 1 1 200px;
  margin: 0;
}
button.customerProfileSaveBtn {
  font-size: 14px;
  font-weight: 700;
  margin-top: 0;
  min-height: 42px;
  min-width: 140px;
  padding: 0 22px;
}
.customerProfileSection {
  max-width: 560px;
}
.customerProfileTop {
  align-items: center;
  display: flex;
  gap: 14px;
  padding: 0 0 12px;
}
.customerProfileMeta {
  flex: 1;
  min-width: 0;
}
.customerProfileDivider {
  background: #f1f5f9;
  height: 1px;
  width: 100%;
}
.customerProfileFormBody {
  padding: 12px 0 0;
}
label.customerProfileEmailField {
  grid-column: unset;
}
.customerAccountInput.customerAccountInputCompact {
  font-size: 13px;
  min-height: 36px;
  padding: 7px 10px;
}
.customerDetailsSection {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 520px;
}
.customerDetailsHeroCard {
  background: linear-gradient(135deg, #0f172a 0%, #14532d 100%);
  border-radius: 12px;
  color: #ffffff;
  padding: 12px 14px;
  width: fit-content;
  max-width: 100%;
}
.customerDetailsHeroInner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
img.customerDetailsHeroAvatar,
span.customerDetailsHeroAvatarFallback {
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  flex-shrink: 0;
  height: 44px;
  width: 44px;
}
img.customerDetailsHeroAvatar {
  object-fit: cover;
}
span.customerDetailsHeroAvatarFallback {
  align-items: center;
  background: rgba(255, 255, 255, 0.14);
  display: inline-flex;
  font-size: 16px;
  font-weight: 800;
  justify-content: center;
}
.customerDetailsHeroBody {
  min-width: 0;
}
.customerDetailsHeroBody h3 {
  font-size: 14px;
  font-weight: 800;
  margin: 0 0 1px;
}
.customerDetailsHeroBody p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  margin: 0 0 2px;
}
span.customerDetailsHeroPhone {
  color: #bbf7d0;
  font-size: 11px;
  font-weight: 700;
}
button.customerDetailsEditBtn {
  background: #ffffff;
  border: none;
  border-radius: 8px;
  color: #14532d;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  min-height: 30px;
  padding: 0 10px;
}
.customerDetailsInfoGrid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.customerDetailsInfoTile {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  display: grid;
  gap: 1px 8px;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  min-height: 0;
  padding: 8px 10px;
}
span.customerDetailsInfoTileIcon {
  align-self: center;
  font-size: 14px;
  grid-row: 1 / 3;
}
span.customerDetailsInfoTileLabel {
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-transform: uppercase;
}
strong.customerDetailsInfoTileValue {
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  word-break: break-word;
}
.customerDetailsAddressPreviewHead {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.customerDetailsAddressPreviewHead h4 {
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
  margin: 0;
}
.customerDetailsEmptyAddress {
  align-items: center;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  text-align: center;
}
.customerAccountOrderHead {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
.customerAccountOrderHead strong {
  color: #0f172a;
  font-size: 12px;
}
.customerAccountOrderMeta {
  color: #64748b;
  display: flex;
  font-size: 11px;
  gap: 10px;
  margin-bottom: 4px;
}
.customerAccountOrderPayment {
  color: #94a3b8;
  font-size: 10px;
}
.customerAccountForm {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 520px;
}
label.customerAccountField {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
label.customerAccountField span {
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.customerAccountInput,
.customerAccountTextarea {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  color: #0f172a;
  font-size: 14px;
  padding: 10px 12px;
  width: 100%;
}
.customerAccountInputReadonly {
  background: #f8fafc;
  color: #64748b;
}
.customerAccountTextarea {
  min-height: 88px;
  resize: vertical;
}
button.customerAccountActionBtn {
  align-self: flex-start;
  background: #16a34a;
  border: none;
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  min-height: 42px;
  padding: 0 20px;
}
.customerAccountDetails {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 520px;
}
.customerAccountDetailRow {
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  padding-bottom: 12px;
}
.customerAccountDetailRow span {
  color: #64748b;
  font-size: 13px;
}
.customerAccountDetailRow strong {
  color: #0f172a;
  font-size: 14px;
  max-width: 60%;
  text-align: right;
}
.customerAccountDetailRowFull {
  align-items: start;
  flex-direction: column;
  gap: 6px;
}
.customerAccountDetailRowFull strong {
  max-width: 100%;
  text-align: left;
}

.customerAddressSection {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.customerAddressToolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}
.customerAddressCardGrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.customerAddressCard {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  padding: 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.customerAddressCard.customerAddressCardDefault {
  border-color: #86efac;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.1);
}
.customerAddressCardHead {
  align-items: start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 10px;
}
.customerAddressCardLabelWrap {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
span.customerAddressCardIcon {
  font-size: 18px;
}
strong.customerAddressCardLabel {
  color: #0f172a;
  font-size: 15px;
}
span.customerAddressCardBadge {
  background: #dcfce7;
  border-radius: 999px;
  color: #15803d;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
}
.customerAddressCardActions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
button.customerAddressCardLinkBtn {
  background: transparent;
  border: none;
  color: #16a34a;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  padding: 0;
}
button.customerAddressCardDeleteBtn {
  color: #dc2626;
}
p.customerAddressCardText {
  color: #334155;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 8px;
}
p.customerAddressCardPhone {
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}
h3.customerAccountFormTitle {
  color: #0f172a;
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 4px;
}
.customerAccountFormActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
button.customerAccountSecondaryBtn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  color: #334155;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  min-height: 42px;
  padding: 0 18px;
}
.customerProfileAvatarSection {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 20px;
}
.customerProfileAvatarWrap {
  align-items: center;
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  border-radius: 50%;
  display: flex;
  height: 88px;
  justify-content: center;
  overflow: hidden;
  width: 88px;
}
img.customerProfileAvatarImage {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.customerProfileAvatarWrap span.customerProfileAvatarFallback {
  color: #ffffff;
  font-size: 28px;
  font-weight: 800;
}
.customerProfileAvatarActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
label.customerProfileAvatarUploadBtn {
  cursor: pointer;
  display: inline-flex;
  margin: 0;
}
input.customerProfileAvatarInput {
  display: none;
}
.customerDetailsProfileCard {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  display: flex;
  gap: 14px;
  margin-bottom: 8px;
  padding: 16px;
}
img.customerDetailsAvatar,
span.customerDetailsAvatarFallback {
  border-radius: 50%;
  flex-shrink: 0;
  height: 56px;
  width: 56px;
}
img.customerDetailsAvatar {
  object-fit: cover;
}
span.customerDetailsAvatarFallback {
  align-items: center;
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  color: #ffffff;
  display: inline-flex;
  font-size: 18px;
  font-weight: 800;
  justify-content: center;
}
.customerDetailsProfileMeta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.customerDetailsProfileMeta strong {
  color: #0f172a;
  font-size: 16px;
}
.customerDetailsProfileMeta span {
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
}
img.landingCustomerAvatarImage {
  border-radius: 10px;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

@media (max-width: 960px) {
  .customerAccountTabs {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  button.customerAccountTabBtn {
    flex: 0 0 auto;
    padding: 12px 12px;
  }
  .customerOrderHistoryLayout {
    grid-template-columns: 1fr;
  }
  .customerAccountOrderListCol {
    border-right: none;
    border-bottom: 1px solid #eef2f6;
    max-height: 280px;
  }
  .customerOrderDetailCol {
    max-height: none;
  }
  .customerOrderDetailPanel {
    min-height: 0;
    padding-bottom: 32px;
  }
  .customerProfileFormGrid,
  .customerDetailsInfoGrid {
    grid-template-columns: 1fr;
  }
  .customerProfileWrap {
    padding: 0;
  }
  .customerProfileBody {
    grid-template-columns: 1fr;
  }
  .customerProfileHeroCard {
    border-bottom: 1px solid #e8edf2;
    border-right: none;
    min-height: 0;
    padding-bottom: 24px;
  }
  .customerProfileHeroMain {
    flex-direction: row;
    text-align: left;
  }
  .customerProfilePhotoActions {
    justify-content: flex-start;
  }
  .customerProfileFormGrid {
    grid-template-columns: 1fr;
  }
  label.customerProfileEmailField {
    grid-column: auto;
  }
  .customerProfileFormCard {
    padding: 18px 16px 20px;
  }
  .customerProfileFormFooter {
    flex-direction: column;
    align-items: stretch;
  }
  button.customerProfileSaveBtn {
    width: 100%;
  }
}

@media (max-width: 960px) {
  .customerCartLayout {
    grid-template-columns: 1fr;
  }
  .customerCartSideCol {
    position: static;
  }
  .customerCartItem:not(.customerCartDrawerItem) {
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .customerCartItem:not(.customerCartDrawerItem) .customerCartItemTotal {
    grid-column: 2;
    justify-self: start;
  }
}

.catalogPageHead {
  margin: 12px 0 24px;
}
h1.catalogPageTitle {
  color: #0f172a;
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 8px;
}
p.catalogPageSubtitle {
  color: #64748b;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  max-width: 680px;
}
p.catalogPageStatus {
  color: #64748b;
  font-size: 15px;
  margin: 24px 0;
}
p.catalogPageStatus.catalogPageStatusError {
  color: #dc2626;
}
.catalogEmptyState {
  align-items: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  min-height: 180px;
  padding: 32px;
  text-align: center;
}
.catalogEmptyState p {
  color: #64748b;
  font-size: 15px;
  margin: 0;
}
.categoryProductsPageRoot {
  background: #f4f7f5;
}
.categoryProductsPageScroll {
  padding-bottom: 0;
}
.categoryProductsPageMain {
  padding-bottom: 36px;
  padding-top: 10px;
}
nav.categoryBreadcrumb {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
button.categoryBreadcrumbLink {
  background: transparent;
  border: 0;
  color: #0f7a3a;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 0;
}
button.categoryBreadcrumbLink:hover {
  text-decoration: underline;
}
span.categoryBreadcrumbSep {
  color: #94a3b8;
  font-size: 12px;
}
span.categoryBreadcrumbCurrent {
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
}
.categoryProductsLayout {
  align-items: start;
  display: grid;
  gap: 24px;
  grid-template-columns: 252px minmax(0, 1fr);
}
.categoryProductsContent {
  min-width: 0;
}
.categoryProductsToolbar {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
}
.categoryProductsToolbarText {
  min-width: 0;
}
h1.categoryProductsPageTitle {
  color: #0f172a;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 4px;
}
p.categoryProductsPageSubtitle {
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
}
span.categoryProductsBadge {
  background: #ecfdf3;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  color: #0f7a3a;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  text-transform: uppercase;
}
.categoryActiveFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
button.categoryActiveFilterChip {
  align-items: center;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  color: #334155;
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  gap: 6px;
  padding: 6px 10px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
button.categoryActiveFilterChip:hover {
  background: #f8fafc;
  border-color: #0f7a3a;
  color: #0f7a3a;
}
span.categoryActiveFilterChipX {
  color: #94a3b8;
  font-size: 14px;
  line-height: 1;
}
.categoryProductsPanel {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  min-height: 220px;
  padding: 20px;
}
.categoryProductsContent .landingProductRow {
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.categoryProductsContent .landingProductCard {
  border-color: #e8edf2;
  border-radius: 14px;
}
.categoryProductsContent .landingProductImageWrap {
  background: #f8fafc;
  height: 168px;
}
.categoryProductsLoading {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.categoryProductsLoadingCard {
  animation: categoryShimmer 1.4s ease-in-out infinite;
  background: linear-gradient(90deg, #f1f5f9 0%, #e8edf2 50%, #f1f5f9 100%);
  background-size: 200% 100%;
  border-radius: 14px;
  min-height: 280px;
}
@media (max-width: 1180px) {
  .categoryProductsContent .landingProductRow,
  .categoryProductsLoading {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .categoryProductsContent .landingProductRow,
  .categoryProductsLoading {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .categoryProductsContent .landingProductRow,
  .categoryProductsLoading {
    grid-template-columns: 1fr;
  }
}
@keyframes categoryShimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
.catalogEmptyState.categoryProductsEmpty {
  min-height: 200px;
}
button.categoryProductsEmptyBtn {
  background: #0f7a3a;
  border: 0;
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  margin-top: 14px;
  padding: 10px 16px;
}
button.categoryProductsEmptyBtn:hover {
  background: #0d6a33;
}
.categoryProductsSidebar {
  position: sticky;
  top: 10px;
}
.categoryFilterPanel {
  background: #ffffff;
  border: 1px solid #dce5df;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}
.categoryFilterPanelHead {
  align-items: center;
  background: #0f7a3a;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 14px 16px;
}
.categoryFilterPanelTitleRow {
  align-items: center;
  display: flex;
  gap: 8px;
}
svg.categoryFilterPanelIcon {
  color: #ffffff;
  height: 16px;
  width: 16px;
}
h2.categoryFilterPanelTitle {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}
.categoryFilterClearBtn {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  color: #ffffff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
}
.categoryFilterClearBtn:hover {
  background: rgba(255, 255, 255, 0.22);
}
.categoryFilterPanelBody {
  display: grid;
  gap: 0;
  padding: 4px 0 8px;
}
section.categoryFilterGroup {
  border-bottom: 1px solid #eef2f7;
  padding: 14px 16px 12px;
}
section.categoryFilterGroup:last-child {
  border-bottom: 0;
}
h3.categoryFilterGroupTitle {
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 10px;
  text-transform: none;
}
.categoryFilterPills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
button.categoryFilterPill {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #475569;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  max-width: 100%;
  padding: 7px 12px;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
button.categoryFilterPill:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}
button.categoryFilterPillActive {
  background: #ecfdf3;
  border-color: #0f7a3a;
  box-shadow: inset 0 0 0 1px rgba(15, 122, 58, 0.08);
  color: #0f7a3a;
  font-weight: 700;
}
@media (max-width: 960px) {
  .categoryProductsLayout {
    grid-template-columns: 1fr;
  }
  .categoryProductsSidebar {
    position: static;
  }
  .categoryProductsToolbar {
    align-items: flex-start;
    flex-direction: column;
  }
}

.storesPageRoot,
.newArrivalsPageRoot {
  background: #f8fafc;
}
.storesPageScroll,
.newArrivalsPageScroll {
  padding-bottom: 0;
}
.storesPageMain,
.newArrivalsPageMain {
  padding-bottom: 32px;
}
.storesPageMain,
.newArrivalsPageMain {
  padding-top: 20px;
}
.storesPageGrid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.storesPageCard {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  display: grid;
  gap: 16px;
  grid-template-columns: 72px minmax(0, 1fr);
  padding: 20px;
}
.storesPageCardIcon {
  align-items: center;
  background: linear-gradient(145deg, #ecfdf5 0%, #d1fae5 100%);
  border-radius: 16px;
  display: flex;
  font-size: 30px;
  height: 72px;
  justify-content: center;
  width: 72px;
}
.storesPageCardHead {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 8px;
}
h2.storesPageCardTitle {
  color: #0f172a;
  font-size: 18px;
  font-weight: 800;
  margin: 0;
}
span.storesPageCardType {
  background: #eff6ff;
  border-radius: 999px;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  text-transform: uppercase;
}
p.storesPageCardMeta {
  color: #64748b;
  font-size: 12px;
  margin: 0 0 8px;
}
p.storesPageCardAddress {
  color: #334155;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 12px;
}
p.storesPageCardAddressMuted {
  color: #94a3b8;
  font-style: italic;
}
.storesPageCardContact {
  color: #475569;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  gap: 6px;
}

/* Staff Users / Team Directory */
.staffUsersPageHeader {
  margin-bottom: 16px;
}
.staffUsersHeaderRow {
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}
.staffUsersPageTitle {
  color: #0f172a;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 6px;
}
.staffUsersPageSubtitle {
  color: #64748b;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  max-width: 560px;
}
.staffUsersInviteBtn {
  flex-shrink: 0;
  min-width: 140px;
}
.staffUsersStatsRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.staffUsersStatChip {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  text-transform: uppercase;
}
.staffUsersStatChipActive {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}
.staffUsersToolbarCard {
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid #e7e5e4;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
}
.staffUsersToolbar {
  align-items: end;
  display: grid !important;
  gap: 14px 16px;
  grid-template-columns: minmax(220px, 1fr) 200px auto;
  margin-bottom: 0;
}
.staffUsersSearchField {
  min-width: 0;
  width: 100%;
}
.staffUsersRoleFilter {
  min-width: 0;
  width: 100%;
}
.staffUsersRoleFilter .fieldLabel {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.staffUsersFilterCount {
  align-self: end;
  font-size: 13px;
  font-weight: 500;
  justify-self: end;
  margin-left: 0;
  padding-bottom: 10px;
  white-space: nowrap;
}
.staffUsersTableWrap {
  margin-top: 4px;
  overflow-x: auto;
}
table.staffUsersTable {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}
.staffUsersColMember {
  width: 26%;
}
.staffUsersColEmail {
  width: 30%;
}
.staffUsersColRole {
  width: 18%;
}
.staffUsersColStatus {
  width: 14%;
}
.staffUsersColActions {
  width: 12%;
}
.staffUsersTableHeadActions,
.staffUsersTableCellActions {
  text-align: center;
}
.staffUsersTableCellActions .entityActionIcon {
  margin: 0 auto;
}
.staffUserReadonlyEmail {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #475569;
  font-size: 14px;
  padding: 10px 12px;
}
.staffUsersTableHead {
  background: rgba(255, 251, 235, 0.55);
  border-bottom: 1px solid #f1f5f9;
  color: #92400e;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 12px 20px;
  text-align: left;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
.staffUsersTableRow {
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.15s ease;
}
.staffUsersTableRow:nth-child(even) {
  background: rgba(255, 251, 235, 0.18);
}
.staffUsersTableRow:hover {
  background: rgba(255, 251, 235, 0.42);
}
.staffUsersTableRow:last-child {
  border-bottom: none;
}
.staffUsersTableCell {
  padding: 14px 20px;
  vertical-align: middle;
}
.staffUsersTableCellMember,
.staffUsersTableCellEmail,
.staffUsersTableCellRole,
.staffUsersTableCellStatus {
  min-width: 0;
}
.staffUserNameCell {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
  width: 100%;
}
.staffUserAvatar {
  align-items: center;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  height: 40px;
  justify-content: center;
  letter-spacing: 0.03em;
  overflow: hidden;
  width: 40px;
}
.staffUserAvatarHasImage {
  background: #e2e8f0;
}
.staffUserAvatarImage {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.staffUsersTableRow:nth-child(even) .staffUserAvatar:not(.staffUserAvatarHasImage) {
  background: linear-gradient(135deg, #fb923c 0%, #c2410c 100%);
}
.staffUserDisplayName {
  color: #0f172a;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.staffUserEmailCell {
  color: #475569;
  display: block;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.staffUsersTableCellRole .staffRoleBadge {
  vertical-align: middle;
}
.staffUsersTableCellStatus .entityStatus {
  display: inline-block;
  font-size: 14px;
}
.staffRoleBadge {
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 6px 12px;
  white-space: nowrap;
}
.staffRoleBadge--OrganizationAdmin {
  background: #ede9fe;
  color: #5b21b6;
}
.staffRoleBadge--StoreManager {
  background: #dbeafe;
  color: #1d4ed8;
}
.staffRoleBadge--WarehouseManager {
  background: #ccfbf1;
  color: #0f766e;
}
.staffRoleBadge--PurchaseManager {
  background: #ffedd5;
  color: #c2410c;
}
.staffRoleBadge--InventoryClerk {
  background: #f1f5f9;
  color: #334155;
}
.staffRoleBadge--SalesStaff {
  background: #dcfce7;
  color: #15803d;
}
.staffRoleBadge--Accountant {
  background: #fef3c7;
  color: #b45309;
}
.staffRoleBadge--Viewer {
  background: #f8fafc;
  color: #64748b;
}
.staffUserModalPanel {
  max-width: 580px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.staffUserModalPanel .storeModalBody {
  max-height: calc(90vh - 140px);
  overflow-y: auto;
  padding-right: 6px;
}
.staffUserModalHint {
  color: #64748b;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 18px;
}
.storeMultiSelectContainer {
  position: relative;
  width: 100%;
}
.storeMultiSelectTrigger {
  min-height: 42px;
  padding: 6px 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: all 0.2s ease;
  font-size: 14px;
}
.storeMultiSelectTrigger:hover {
  border-color: #cbd5e1;
}
.storeMultiSelectTrigger.isOpen {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.storeMultiSelectChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  flex: 1;
}
.storeMultiSelectChip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}
.storeMultiSelectChipRemove {
  background: none;
  border: none;
  color: #1d4ed8;
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.storeMultiSelectChipRemove:hover {
  color: #b91c1c;
}
.storeMultiSelectPlaceholder {
  color: #94a3b8;
}
.storeMultiSelectDropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
}
.storeMultiSelectSearchInput {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
}
.storeMultiSelectSearchInput:focus {
  border-color: #3b82f6;
}
.storeMultiSelectHeaderRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px;
  font-size: 12px;
  color: #64748b;
  border-bottom: 1px solid #f1f5f9;
}
.storeMultiSelectSelectAll {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 500;
  color: #334155;
}
.storeMultiSelectOptionsList {
  overflow-y: auto;
  max-height: 180px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.storeMultiSelectOptionItem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
  user-select: none;
}
.storeMultiSelectOptionItem:hover {
  background: #f8fafc;
}
.storeMultiSelectOptionItem.isSelected {
  background: #eff6ff;
}
.storeMultiSelectOptionText {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.storeMultiSelectOptionName {
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
}
.storeMultiSelectOptionCode {
  font-size: 11px;
  color: #64748b;
}
.storeDocSection {
  margin-top: 14px;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.storeDocSectionTitle {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.storeDocSectionSubtitle {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 12px;
}
.storeDocFieldsGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.storeDocDropzone {
  border: 2px dashed #cbd5e1;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}
.storeDocDropzone:hover {
  border-color: #3b82f6;
  background: #f0fdf4;
}
.storeDocDropzoneIcon {
  font-size: 24px;
  margin-bottom: 4px;
  color: #3b82f6;
}
.storeDocDropzoneTitle {
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
}
.storeDocDropzoneHint {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}
.storeDocPreviewCard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.storeDocPreviewLeft {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.storeDocPreviewIcon {
  font-size: 22px;
  color: #2563eb;
  flex-shrink: 0;
}
.storeDocPreviewInfo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.storeDocPreviewName {
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.storeDocPreviewMeta {
  font-size: 11px;
  color: #64748b;
  display: flex;
  gap: 6px;
  align-items: center;
}
.storeDocPreviewTag {
  background: #e0f2fe;
  color: #0369a1;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}
.storeDocRemoveBtn {
  background: none;
  border: 1px solid #fee2e2;
  color: #dc2626;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.storeDocRemoveBtn:hover {
  background: #fef2f2;
}
.staffUserActionsWrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.staffUserDeleteModalPanel {
  max-width: 440px;
}
.staffDeleteConfirmBtn,
.TextButton.danger,
.TextButton.destructive {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  border: 1px solid #b91c1c !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
  font-weight: 600;
  transition: all 0.2s ease;
}
.staffDeleteConfirmBtn:hover:not(:disabled),
.TextButton.danger:hover:not(:disabled),
.TextButton.destructive:hover:not(:disabled) {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.35);
  transform: translateY(-1px);
}
.staffUserSkeletonRow {
  align-items: center;
  display: flex;
  gap: 16px;
  width: 100%;
}
.staffUserSkeletonItem {
  pointer-events: none;
}
.staffUserSkeletonAvatar {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: staffUserShimmer 1.4s ease-in-out infinite;
  border-radius: 50%;
  flex-shrink: 0;
  height: 40px;
  width: 40px;
}
.staffUserSkeletonLine {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: staffUserShimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
  flex: 1;
  height: 14px;
  max-width: 120px;
}
.staffUserSkeletonLineWide {
  max-width: 220px;
}
.staffUserSkeletonBadge {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: staffUserShimmer 1.4s ease-in-out infinite;
  border-radius: 999px;
  height: 26px;
  width: 96px;
}
@keyframes staffUserShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
@media (max-width: 900px) {
  .staffUsersToolbar {
    grid-template-columns: 1fr;
  }
  .staffUsersFilterCount {
    justify-self: start;
    margin-left: 0;
    padding-bottom: 0;
    width: 100%;
  }
  .staffUsersColMember {
    width: 34%;
  }
  .staffUsersColEmail {
    width: 34%;
  }
  .staffUsersColRole {
    width: 18%;
  }
  .staffUsersColStatus {
    width: 14%;
  }
  .staffUsersTableHead,
  .staffUsersTableCell {
    padding-left: 14px;
    padding-right: 14px;
  }
  .staffUsersHeaderRow {
    flex-direction: column;
    align-items: stretch;
  }
  .staffUsersInviteBtn {
    width: 100%;
  }
}

/* Settings pages — shared layout */
.settingsPageMain {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.settingsPageShell {
  display: flex;
  flex: 1 1 auto;
  gap: 20px;
  min-width: 0;
  padding: 8px 4px 24px 8px;
}
.settingsPageShell > ui-container,
.settingsPageShell > .Container {
  align-items: flex-start;
  display: flex;
  gap: 20px;
  width: 100%;
}
.settingsPageShell ui-row {
  align-items: flex-start !important;
  display: flex !important;
  flex: 1 1 auto;
  gap: 20px;
  width: 100%;
}
.settingsSubNavCard {
  background: #ffffff;
  border: 1px solid #e7e5e4;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  flex: 0 0 240px;
  max-width: 240px;
  min-width: 220px;
  padding: 18px 14px;
  position: sticky;
  top: 8px;
}
.settingsSubNavCard ui-column,
.settingsSubNavCard > ui-column,
.settingsSubNavCard .Container {
  align-items: stretch !important;
  margin: 0;
  padding: 0;
  width: 100%;
}
.settingsSubNavTitle {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 12px;
  padding: 0 10px;
  text-transform: uppercase;
}
.TextButton.settingsSubNavItem {
  align-self: stretch;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  height: 42px;
  margin: 0 0 4px;
  min-height: 42px;
  text-align: left;
  width: 100%;
}
.TextButton.settingsSubNavItem ui-center,
.TextButton.settingsSubNavItemActive ui-center {
  align-items: center;
  color: #334155;
  font-size: 14px;
  font-weight: 500;
  justify-content: flex-start;
  padding: 0 12px;
  width: 100%;
}
.TextButton.settingsSubNavItem:hover {
  background: #f8fafc;
}
.TextButton.settingsSubNavItemActive {
  align-self: stretch;
  background: #fff7ed;
  border-color: #fed7aa;
  border-left: 3px solid #ea580c;
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  height: 42px;
  margin: 0 0 4px;
  min-height: 42px;
  width: 100%;
}
.TextButton.settingsSubNavItemActive ui-center {
  color: #9a3412;
  font-weight: 600;
  justify-content: flex-start;
  padding: 0 10px 0 9px;
}
.settingsFormCard {
  background: #ffffff;
  border: 1px solid #e7e5e4;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  flex: 1 1 auto;
  min-width: 0;
  padding: 24px 28px 28px;
}
.settingsFormHeader {
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 22px;
  padding-bottom: 18px;
}
.settingsFormTitle {
  color: #0f172a;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 8px;
}
.settingsFormSubtitle {
  color: #64748b;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  max-width: 640px;
}
.settingsFormGridRow,
ui-row.settingsFormGridRow {
  display: grid !important;
  gap: 18px 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 18px;
  width: 100%;
}
.settingsFormGridRow > .Container,
.settingsFormGridRow > ui-container,
ui-row.settingsFormGridRow > .Container,
ui-row.settingsFormGridRow > ui-container {
  min-width: 0;
  width: 100%;
}
.settingsFormField {
  margin-bottom: 18px;
  min-width: 0;
  width: 100%;
}
.settingsFormGridRow .settingsFormField {
  margin-bottom: 0;
}
.settingsFormField .FormFieldStyle,
.settingsFormField .IMSInputFieldWidget {
  margin-bottom: 0;
  width: 100%;
}
.settingsFormField .fieldLabel,
.settingsFormField .TextView.fieldLabel {
  color: #475569;
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}
.settingsFormField .InputField,
.settingsFormField input,
.settingsFormField textarea {
  min-height: 42px;
  width: 100%;
}
.settingsFormActions {
  border-top: 1px solid #f1f5f9;
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  padding-top: 20px;
  width: 100%;
}
.TextButton.settingsFormSaveBtn {
  min-width: 148px;
}
.settingsProfileRole {
  color: #475569;
  font-size: 14px;
  font-weight: 500;
  margin: 4px 0 8px;
}
.settingsProfileAvatarCard {
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
  border: 1px solid #fde7c7;
  border-radius: 14px;
  margin-bottom: 22px;
  padding: 20px 22px;
}
.settingsProfileAvatarRow {
  align-items: center;
  display: flex;
  gap: 18px;
  margin-bottom: 16px;
}
.settingsProfileAvatarImage,
.settingsProfileAvatarFallback {
  border-radius: 50%;
  flex-shrink: 0;
  height: 88px;
  width: 88px;
}
.settingsProfileAvatarImage {
  border: 3px solid #ffffff;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.18);
  object-fit: cover;
}
.settingsProfileAvatarFallback {
  align-items: center;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  border: 3px solid #ffffff;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.22);
  color: #ffffff;
  display: inline-flex;
  font-size: 26px;
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0.03em;
}
.settingsProfileAvatarMeta {
  min-width: 0;
}
.settingsProfileAvatarName {
  color: #0f172a;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settingsProfileAvatarEmail {
  color: #64748b;
  font-size: 14px;
  line-height: 1.45;
  margin: 0 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settingsProfileAvatarRole {
  background: #ede9fe;
  border-radius: 999px;
  color: #5b21b6;
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
}
.settingsProfileAvatarActions {
  align-items: center;
  border-top: 1px solid #fde7c7;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 16px;
}
label.settingsProfilePhotoBtn,
button.settingsProfilePhotoBtn {
  align-items: center;
  background: #ffffff;
  border: 1px solid #fdba74;
  border-radius: 10px;
  color: #9a3412;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  height: 40px;
  justify-content: center;
  min-width: 132px;
  padding: 0 16px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
label.settingsProfilePhotoBtn:hover,
button.settingsProfilePhotoBtn:hover {
  background: #fff7ed;
  border-color: #fb923c;
}
button.settingsProfilePhotoBtnMuted {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
}
button.settingsProfilePhotoBtnMuted:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.settingsProfilePhotoBtnText {
  line-height: 1;
  white-space: nowrap;
}
input.settingsProfileAvatarInput {
  display: none;
}
.settingsProfileAvatarNotice {
  color: #64748b;
  font-size: 13px;
  margin: 12px 0 0;
}
.settingsProfileAvatarNoticeSuccess {
  color: #047857;
}
.settingsProfileStoresCard {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 18px;
  padding: 14px 16px;
}
.settingsProfileStoresLabel {
  color: #64748b;
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.settingsProfileStoresText {
  color: #334155;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 960px) {
  .settingsProfileAvatarRow {
    align-items: flex-start;
    flex-direction: column;
  }
  .settingsProfileAvatarActions {
    width: 100%;
  }
  label.settingsProfilePhotoBtn,
  button.settingsProfilePhotoBtn {
    flex: 1 1 auto;
    min-width: 0;
  }
  .settingsPageShell ui-row {
    flex-direction: column !important;
  }
  .settingsSubNavCard {
    flex: 1 1 auto;
    max-width: none;
    position: static;
    width: 100%;
  }
  .settingsFormGridRow {
    grid-template-columns: 1fr;
  }
  .settingsFormCard {
    padding: 20px 18px 22px;
  }
}
@media (max-width: 900px) {
  article.landingProductCarouselCard {
    flex: 0 0 210px;
    max-width: 210px;
  }
  .landingProductCarouselTrack .landingProductCarouselRow {
    gap: 12px;
  }
  .landingProductCarouselNav {
    display: none;
  }
  section.landingImsSection,
  .Container.landingImsSection {
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 42%);
    border-color: #bbf7d0;
    padding: 16px 14px 18px;
  }
  .landingFeatureRow,
  .Container.landingFeatureRow {
    flex-direction: column;
    gap: 8px;
  }
  .landingFeatureCard,
  .Container.landingFeatureCard {
    align-items: flex-start;
    background: #ffffff;
    flex: none;
    flex-direction: row;
    gap: 12px;
    padding: 12px 12px;
    width: 100%;
  }
  .landingFeatureIcon {
    height: 40px;
    width: 40px;
  }
  h3.landingFeatureTitle,
  .TextView.landingFeatureTitle {
    font-size: 14px;
    margin: 0;
  }
  p.landingFeatureDesc,
  .TextView.landingFeatureDesc {
    font-size: 12px;
    line-height: 1.4;
    margin: 4px 0 0;
  }
  .landingImsCtaWrap,
  .Container.landingImsCtaWrap {
    margin-top: 14px;
  }
  button.landingImsCtaBtn {
    width: 100%;
  }
  .landingFooterNewsCol {
    display: none;
  }
  .landingFooterInner {
    padding: 22px 2px 18px;
  }
  .landingFooterTop {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .landingFooterTopCol,
  .landingFooterBrand {
    align-items: center;
    width: 100%;
  }
  .landingFooterTopHead,
  .landingFooterTopBody {
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  p.landingFooterTagline,
  .landingFooterTagline {
    margin-left: auto;
    margin-right: auto;
    max-width: 32ch;
    text-align: center;
  }
  .landingFooterAppButtons {
    justify-content: center;
    max-width: 380px;
    width: 100%;
  }
  .landingFooterPayRow {
    justify-content: center;
  }
  .landingFooterNav {
    gap: 0;
    grid-template-columns: 1fr;
    padding: 8px 0 4px;
  }
  .landingFooterSection {
    border-bottom: 1px solid #eef2f7;
  }
  button.landingFooterAccordionBtn {
    cursor: pointer;
    font-size: 14px;
    margin: 0;
    min-height: 48px;
    padding: 0 2px;
  }
  .landingFooterAccordionChevron {
    color: #94a3b8;
    display: block;
    font-size: 18px;
    line-height: 1;
    margin-left: auto;
    transform: rotate(90deg);
  }
  button.landingFooterAccordionBtn.isOpen .landingFooterAccordionChevron {
    transform: rotate(-90deg);
  }
  .landingFooterAccordionPanel {
    padding: 0 2px 12px;
  }
  .landingFooterCategoryGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .landingFooterCategoryGrid .landingFooterLinkCol {
    display: contents;
  }
  .landingFooterNav ul.landingFooterLinkCol,
  .landingFooterNav .landingFooterLinkCol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 8px;
    width: 100%;
  }
  .landingFooterNav a.landingFooterLink,
  .landingFooterNav .landingFooterLink {
    background: #f8fafc;
    border-radius: 8px;
    display: block;
    font-size: 12px;
    margin: 0 0 8px;
    padding: 8px 10px;
  }
  .landingFooterCategoryGrid a.landingFooterLink {
    border-radius: 999px;
    margin: 0;
  }
  .landingFooterTrustGrid {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .landingFooterTrustItem {
    justify-content: flex-start;
    width: 100%;
  }
  .landingFooterTrustCopy span {
    display: none;
  }
  .landingFooterTrustRow {
    align-items: center;
    width: 100%;
  }
  .landingFooterSocialBlock {
    align-items: center;
    width: 100%;
  }
  span.landingFooterFollowLabel,
  .landingFooterFollowLabel {
    text-align: center;
    width: 100%;
  }
  .landingFooterSocial {
    justify-content: center;
    width: 100%;
  }
  .landingFooterLegal {
    align-items: center;
    text-align: center;
  }
  p.landingFooterCopy,
  .TextView.landingFooterCopy {
    text-align: center;
    width: 100%;
    white-space: normal;
  }
  .landingFooterFeatures {
    grid-template-columns: 1fr 1fr;
  }
  .landingFooterFeatureCopy span {
    display: none;
  }
}

/* Products list � premium + pagination */
.ProductListPage .productListContent {
  background:
    radial-gradient(ellipse 70% 40% at 0% 0%, rgba(249, 115, 22, 0.06), transparent 55%),
    radial-gradient(ellipse 50% 35% at 100% 0%, rgba(15, 23, 42, 0.03), transparent 50%),
    #f8fafc;
}
.productListToolbar {
  align-items: flex-start;
  margin-bottom: 20px;
  gap: 16px;
}
.productListTitle {
  color: #0f172a;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}
.productListSubtitle {
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  margin: 6px 0 0;
}
.productListAddBtn {
  border-radius: 12px !important;
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.22);
  font-weight: 700 !important;
  padding: 12px 18px !important;
}
.productListFilterCard {
  background: #ffffff;
  border: 1px solid #e7e5e4;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.04);
  margin-bottom: 16px;
  padding: 14px 16px;
}
.productListFilterInner {
  gap: 12px;
  margin-bottom: 0;
}
.productListSearch .fieldLabel,
.productListStatus .fieldLabel {
  display: none;
}
.productListCount {
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  margin-left: auto;
  white-space: nowrap;
}
.productListLoadingWrap {
  align-items: center;
  background: #ffffff;
  border: 1px solid #e7e5e4;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  min-height: 180px;
  padding: 32px;
}
.productListLoading {
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
}
.productListTableBlock {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.productListTable {
  background: #ffffff;
  border: 1px solid #e7e5e4;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}
.productListTableHeader {
  background: linear-gradient(180deg, #fffbeb 0%, #fff7ed 100%);
  border-bottom: 1px solid #f1e7d8;
  padding: 12px 18px;
}
.ProductListPage .entityHeaderCell {
  color: #78716c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.ProductListPage .entityTableRow {
  padding: 14px 18px;
}
.ProductListPage .entityTableRow:hover {
  background: rgba(255, 247, 237, 0.7);
}
.ProductListPage .entityCellName {
  color: #0f172a;
  font-weight: 600;
}
.ProductListPage img.productListThumb {
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  height: 44px;
  width: 44px;
}
.ProductListPage .productListThumbPlaceholder {
  border-radius: 10px;
  height: 44px;
  width: 44px;
}
.productListPager {
  align-items: center;
  background: #ffffff;
  border: 1px solid #e7e5e4;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 16px;
}
.productListPagerMeta {
  color: #64748b;
  font-size: 13px;
}
.productListPagerMeta strong {
  color: #0f172a;
  font-weight: 700;
}
.productListPagerControls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.productListPagerControls button {
  appearance: none;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  color: #334155;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  min-width: 34px;
  padding: 8px 12px;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.productListPagerControls button:hover:not(:disabled) {
  background: #fff7ed;
  border-color: #fdba74;
  color: #c2410c;
}
.productListPagerControls button.isActive {
  background: #f97316;
  border-color: #f97316;
  color: #ffffff;
}
.productListPagerControls button:disabled {
  cursor: default;
  opacity: 0.45;
}
.productListPagerControls button.isActive:disabled {
  opacity: 1;
}

.productListTable.isPaging {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* Products filters mockup */
.productListFilterCard {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.productListFilterInner {
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.productListSearch {
  flex: 1 1 240px;
  min-width: 220px;
}
.productListFilterSelect {
  flex: 0 0 auto;
  min-width: 150px;
  width: 150px;
}
.productListFilterSelect .fieldLabel,
.productListSortSelect .fieldLabel {
  display: none;
}
.productListFilterSelect .roleSelect,
.productListSortSelect .roleSelect,
select.productFilterSelect {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  color: #334155;
  font-size: 13px;
  font-weight: 500;
  height: 42px;
  padding: 0 34px 0 12px;
  width: 100%;
}
.productListFilterBtn,
.productListExportBtn {
  align-items: center;
  appearance: none;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  color: #334155;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.productListFilterBtn:hover,
.productListExportBtn:hover {
  background: #fff7ed;
  border-color: #fdba74;
  color: #c2410c;
}
.productListMetaRow {
  align-items: center;
  gap: 12px;
  padding-top: 2px;
}
.productListSortGroup {
  align-items: center;
  gap: 8px;
}
.productListSortLabel {
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.productListSortSelect {
  min-width: 140px;
  width: 150px;
}
.productListCount {
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  margin-left: 0;
}
@media (max-width: 960px) {
  .productListFilterSelect,
  .productListSortSelect {
    min-width: 140px;
    width: 100%;
  }
  .productListMetaRow {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}


/* Orders workspace */
.ordersWorkspace {
  background:
    linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
  border: 1px solid #e8edf3;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 18px 40px rgba(15, 23, 42, 0.05);
  padding: 18px 18px 16px;
}
.ordersWorkspaceToolbar {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 4px 0 16px;
}
.ordersWorkspaceSearch {
  flex: 1 1 240px;
  min-width: 220px;
}
.ordersWorkspaceSearch input {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-sizing: border-box;
  color: #0f172a;
  font-size: 13px;
  height: 42px;
  padding: 0 14px;
  width: 100%;
}
.ordersWorkspaceDates {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ordersWorkspaceDates label {
  color: #64748b;
  display: flex;
  flex-direction: column;
  font-size: 11px;
  font-weight: 700;
  gap: 6px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.ordersWorkspaceDates input[type="date"] {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  color: #0f172a;
  font-size: 13px;
  height: 42px;
  min-width: 150px;
  padding: 0 12px;
}
.ordersWorkspaceClear {
  appearance: none;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  color: #475569;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  height: 42px;
  padding: 0 14px;
}
.ordersViewToggle {
  background: #f1f5f9;
  border-radius: 12px;
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
  padding: 4px;
}
.ordersViewToggle button {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: #64748b;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  height: 34px;
  padding: 0 12px;
}
.ordersViewToggle button.isActive {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  color: #0f172a;
}
.ordersSplitLayout {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1.35fr);
  min-height: 520px;
}
.ordersSplitList {
  background: #f8fafc;
  border: 1px solid #e8edf3;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  min-height: 520px;
  overflow: hidden;
}
.ordersSplitListHead {
  align-items: center;
  border-bottom: 1px solid #e8edf3;
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
}
.ordersSplitListHead strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
}
.ordersSplitListHead span {
  background: #e2e8f0;
  border-radius: 999px;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
}
.ordersSplitListBody {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  padding: 10px;
}
.ordersSplitListItem {
  appearance: none;
  background: #ffffff;
  border: 1px solid #e8edf3;
  border-radius: 14px;
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  padding: 10px;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}
.ordersSplitListItem:hover,
.ordersSplitListItem.isActive {
  border-color: #fdba74;
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.08);
}
.ordersSplitListCopy {
  min-width: 0;
}
.ordersSplitListCopy strong {
  color: #2563eb;
  display: block;
  font-size: 13px;
  font-weight: 800;
}
.ordersSplitListCopy span {
  color: #0f172a;
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ordersSplitListCopy em {
  color: #94a3b8;
  display: block;
  font-size: 11px;
  font-style: normal;
  margin-top: 2px;
}
.ordersSplitListBadges {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ordersSplitDetail {
  background: #ffffff;
  border: 1px solid #e8edf3;
  border-radius: 16px;
  min-height: 520px;
  overflow: auto;
  padding: 8px 14px 16px;
}
.dashOrderDetailPanel.isEmbedded {
  box-shadow: none;
  max-width: none;
  padding: 8px 4px 0;
}
.dashOrderThumb.isMd,
.dashOrderSwatch.isMd {
  height: 48px;
  width: 48px;
}
@media (max-width: 1100px) {
  .ordersSplitLayout {
    grid-template-columns: 1fr;
  }
  .ordersSplitList,
  .ordersSplitDetail {
    min-height: 320px;
  }
  .ordersViewToggle {
    margin-left: 0;
  }
}

/* Store signup */
.Container.SignupPage.loginSplitPage { overflow-y: hidden; }
.Container.SignupPage .loginFormPane { scrollbar-width: none; }
.Container.SignupPage .loginFormPane::-webkit-scrollbar { display: none; }
.Container.SignupPage .loginCard { max-width: 560px; width: min(100%, 560px); }
.Container.SignupPage .storeSignupForm { max-height: none; overflow: visible; padding: 2px 4px 2px 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.Container.SignupPage .storeSignupForm .loginField { align-items: stretch; background: transparent; border: 0; border-radius: 0; display: flex; flex-direction: column; gap: 6px; height: auto; margin: 0; padding: 0; }
.Container.SignupPage .storeSignupForm .loginField:focus-within { border: 0; box-shadow: none; }
.Container.SignupPage .storeSignupForm .loginFieldInput { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-sizing: border-box; flex: 0 0 48px; height: 48px; padding: 0 14px; width: 100%; }
.Container.SignupPage .storeSignupForm .loginFieldInput:focus { border-color: #86efac; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16); }
.Container.SignupPage .storeSignupForm .storeAddressField,
.Container.SignupPage .storeSignupForm .loginOtpBox,
.Container.SignupPage .storeSignupForm .loginError,
.Container.SignupPage .storeSignupForm .loginSecondaryBtn,
.Container.SignupPage .storeSignupForm .loginPrimaryBtn { grid-column: 1 / -1; }
.Container.SignupPage .storeSignupForm textarea.loginFieldInput { height: 82px; padding: 12px 14px; resize: vertical; }
.Container.SignupPage .storeSignupForm .loginSecondaryBtn,
.Container.SignupPage .storeSignupForm .loginPrimaryBtn { width: 100%; }
.Container.SignupPage .storeSignupSignInLink {
  display: block;
  margin: 28px auto 0;
  text-align: center;
  width: 100%;
}
.Container.SignupPage .storeSignupForm .loginFieldLabel { font-size: 14px; }
.Container.SignupPage .storeSignupForm .loginFieldInput { font-size: 16px; }
.loginVerifiedBadge { color: #15803d; font-weight: 600; margin: 0.25rem 0; }
.loginDemoOtp { background: #fff7ed; border: 1px dashed #fb923c; padding: 0.5rem 0.75rem; border-radius: 8px; font-weight: 600; color: #9a3412; }
.loginOtpBox { display: grid; gap: 0.75rem; margin: 0.5rem 0 0.75rem; }
.loginSecondaryBtn { border: 1px solid #cbd5e1; background: #fff; color: #0f172a; border-radius: 10px; padding: 0.7rem 1rem; font-weight: 600; cursor: pointer; }
.loginSecondaryBtn:disabled { opacity: 0.55; cursor: not-allowed; }
.loginSuccessBox { display: grid; gap: 1rem; padding: 1rem 0; }

/* Super Admin shell */
.sa-app { display: flex; min-height: 100vh; background: #f8fafc; color: #0f172a; font-family: Manrope, sans-serif; }
.sa-sidebar { width: 240px; background: #0f172a; color: #e2e8f0; display: flex; flex-direction: column; padding: 1rem 0.75rem; gap: 0.5rem; }
.sa-collapsed .sa-sidebar { width: 72px; }
.sa-brand { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem; margin-bottom: 0.5rem; }
.sa-nav-group { display: grid; gap: 0.25rem; margin-bottom: 0.75rem; }
.sa-nav-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.55; padding: 0 0.5rem; }
.sa-nav-item { text-align: left; border: 0; background: transparent; color: inherit; border-radius: 8px; padding: 0.55rem 0.7rem; cursor: pointer; }
.sa-nav-item.active, .sa-nav-item:hover { background: rgba(255,255,255,0.08); }
.sa-logout { margin-top: auto; }
.sa-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sa-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid #e2e8f0; background: #fff; }
.sa-eyebrow { font-size: 0.75rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; }
.sa-header h2 { margin: 0.15rem 0 0; font-size: 1.25rem; }
.sa-header-right { display: flex; gap: 0.75rem; align-items: center; }
.sa-content { padding: 1.25rem 1.5rem 2rem; overflow: auto; }
.sa-page h1 { margin: 0 0 1rem; font-size: 1.5rem; }
.sa-muted { color: #64748b; }
.sa-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.sa-metric { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1rem; display: grid; gap: 0.35rem; }
.sa-metric strong { font-size: 1.5rem; }
.sa-table-wrap { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: auto; }
.sa-table { width: 100%; border-collapse: collapse; }
.sa-table th, .sa-table td { padding: 0.75rem 1rem; border-bottom: 1px solid #e2e8f0; text-align: left; font-size: 0.92rem; }
.sa-empty { padding: 1.5rem; color: #64748b; }
.sa-pill { display: inline-flex; border-radius: 999px; padding: 0.15rem 0.55rem; font-size: 0.75rem; font-weight: 700; text-transform: capitalize; }
.sa-pill-pending { background: #fef3c7; color: #92400e; }
.sa-pill-approved { background: #d1fae5; color: #065f46; }
.sa-pill-rejected { background: #ffe4e6; color: #9f1239; }
.sa-pill-suspended { background: #e2e8f0; color: #334155; }
.sa-stores-toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 1rem; }
.sa-stores-toolbar h1 { margin: 0; margin-right: auto; }
.sa-search, .sa-stores-toolbar select, .sa-actions input, .sa-inline-form input, .sa-login input { border: 1px solid #cbd5e1; border-radius: 8px; padding: 0.55rem 0.75rem; }
.sa-stores-layout { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: 1rem; min-height: 520px; }
.sa-store-list, .sa-store-panel, .sa-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1rem; }
.sa-store-row { width: 100%; display: grid; gap: 0.2rem; text-align: left; border: 0; background: transparent; border-bottom: 1px solid #f1f5f9; padding: 0.75rem 0.25rem; cursor: pointer; }
.sa-store-row.active { background: #fff7ed; }
.sa-panel-head { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.sa-dl { display: grid; gap: 0.65rem; margin: 1rem 0; }
.sa-dl div { display: grid; grid-template-columns: 140px 1fr; gap: 0.5rem; }
.sa-dl dt { color: #64748b; }
.sa-dl dd { margin: 0; }
.sa-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 1rem 0; }
.sa-btn, .sa-bell, .sa-profile, .sa-login button[type='submit'] { border: 0; border-radius: 8px; padding: 0.55rem 0.9rem; background: #e2e8f0; cursor: pointer; font-weight: 600; }
.sa-btn-primary, .sa-login button[type='submit'] { background: #ea580c; color: #fff; }
.sa-btn-danger { background: #e11d48; color: #fff; }
.sa-link-btn { border: 0; background: transparent; color: #ea580c; cursor: pointer; font-weight: 600; }
.sa-simple-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.5rem; }
.sa-inline-form { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sa-error { color: #be123c; }
.sa-success { color: #047857; }
.sa-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  box-sizing: border-box;
  background-color: #111827;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(125deg, rgba(234, 88, 12, 0.18), transparent 38%),
    linear-gradient(315deg, rgba(34, 197, 94, 0.12), transparent 36%),
    linear-gradient(145deg, #0b1220, #1f2937 58%, #172554);
  background-size: 42px 42px, 42px 42px, auto, auto, auto;
}
.sa-login-card {
  width: min(440px, 92vw);
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 22px;
  padding: 2.25rem;
  display: grid;
  gap: 0.9rem;
  box-shadow: 0 28px 80px rgba(2, 6, 23, 0.42), 0 4px 12px rgba(2, 6, 23, 0.18);
}
.sa-login-topline { display: flex; align-items: center; gap: 0.7rem; }
.sa-login-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #166534;
  color: #dcfce7;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.sa-login-kicker {
  color: #c2410c;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.sa-login-secure { margin-left: auto; color: #64748b; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.sa-login-card h1 { margin: 0; color: #111827; font-size: 2rem; letter-spacing: -0.04em; }
.sa-login-intro { margin: 0; color: #334155; font-size: 0.95rem; line-height: 1.55; }
.sa-login-rule { width: 42px; height: 4px; border-radius: 99px; background: #ea580c; }
.sa-login-card .sa-muted { margin: 0; font-size: 0.82rem; line-height: 1.5; }
.sa-demo-otp { background: #fff7ed; border: 1px dashed #fb923c; padding: 0.7rem 0.8rem; border-radius: 10px; font-weight: 700; color: #9a3412; }
.sa-login label { display: grid; gap: 0.4rem; color: #1f2937; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.02em; }
.sa-login input { background: #fff; color: #111827; font-size: 0.95rem; outline: none; transition: border-color 160ms ease, box-shadow 160ms ease; }
.sa-login input:focus { border-color: #fb923c; box-shadow: 0 0 0 4px rgba(251, 146, 60, 0.18); }
.sa-login button[type='submit'] { min-height: 46px; background: linear-gradient(135deg, #ea580c, #f97316); box-shadow: 0 8px 18px rgba(234, 88, 12, 0.22); transition: transform 160ms ease, box-shadow 160ms ease; }
.sa-login button[type='submit']:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 11px 22px rgba(234, 88, 12, 0.28); }
@media (max-width: 900px) {
  .sa-app { flex-direction: column; }
  .sa-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .sa-stores-layout { grid-template-columns: 1fr; }
}

/* FreshMart Full-Page Blurred Loader (No separate card box) */
.freshmartLoaderOverlay,
.freshmartLoaderInline {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(248, 250, 252, 0.45);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  pointer-events: auto;
  animation: freshmartLoaderFadeIn 0.2s ease-out;
}

.freshmartLoaderContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

.freshmartLoaderGif {
  display: block;
  width: 86px;
  height: 86px;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 8px 24px rgba(16, 185, 129, 0.25));
}

.freshmartLoaderText {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.3px;
  font-family: "Manrope", sans-serif;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  gap: 4px;
}

@keyframes freshmartLoaderFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}