/* [project]/app/globals.css [app-client] (css) */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: .25rem;
    --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .visible {
    visibility: visible;
  }

  .fixed {
    position: fixed;
  }

  .start {
    inset-inline-start: var(--spacing);
  }

  .block {
    display: block;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }
}

:root {
  --primary: #d94a4a;
  --primary-hover: #c83e3e;
  --primary-dark: #a93232;
  --primary-soft: #fcecec;
  --background: #fff8f8;
  --surface: #fff;
  --text-primary: #202124;
  --text-secondary: #6b6b6b;
  --border: #ececec;
  --success: #277a50;
  --warning: #a56516;
  --error: #b42318;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow-sm: 0 8px 24px #44222212;
  --shadow-md: 0 18px 50px #5e29291a;
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --green: var(--primary);
  --green-dark: var(--primary-dark);
  --mint: var(--primary-soft);
  --line: var(--border);
  --paper: var(--background);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
}

button, input {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

button, a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-offset: 2px;
  outline: 3px solid #d94a4a59;
}

.topbar {
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  max-width: 1240px;
  height: 84px;
  margin: auto;
  padding: 0 24px;
  display: flex;
}

.brand {
  align-items: center;
  gap: 11px;
  min-width: 260px;
  display: flex;
}

.brand-mark {
  color: #fff;
  background: var(--green);
  border-radius: 13px;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 22px;
  font-weight: 850;
  display: grid;
  box-shadow: 0 7px 18px #17855326;
}

.brand strong, .brand small {
  display: block;
}

.brand strong {
  letter-spacing: -.4px;
  font-size: 20px;
}

.brand small {
  color: var(--muted);
  margin-top: 2px;
  font-size: 11px;
}

.desktop-nav {
  gap: 28px;
  font-size: 14px;
  font-weight: 650;
  display: flex;
}

.desktop-nav a:hover {
  color: var(--green);
}

.header-actions {
  align-items: center;
  gap: 9px;
  display: flex;
}

.header-actions button {
  border: 1px solid var(--line);
  cursor: pointer;
  background: #fff;
  border-radius: 12px;
  height: 42px;
}

.locale {
  padding: 0 12px;
  font-weight: 750;
}

.locale span {
  color: #9aa59f;
}

.round {
  width: 42px;
  font-size: 23px;
}

.cart-button {
  padding: 0 13px;
  font-weight: 700;
}

.cart-button b {
  background: var(--green);
  color: #fff;
  border-radius: 999px;
  margin-left: 8px;
  padding: 2px 7px;
  font-size: 12px;
}

.search-wrap {
  gap: 10px;
  max-width: 1240px;
  margin: 12px auto 22px;
  padding: 0 24px;
  display: flex;
}

.search {
  background: #fff;
  border: 1px solid #dce6e0;
  border-radius: 17px;
  flex: 1;
  align-items: center;
  gap: 12px;
  height: 58px;
  padding: 7px 7px 7px 18px;
  display: flex;
  box-shadow: 0 10px 30px #2046310a;
}

.search > span {
  color: var(--green);
  font-size: 28px;
  transform: rotate(-15deg);
}

.search input {
  min-width: 0;
  color: var(--ink);
  border: 0;
  outline: 0;
  flex: 1;
  font-size: 15px;
}

.search button, .scan {
  background: var(--green);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 12px;
  height: 44px;
  font-weight: 750;
}

.search button {
  padding: 0 23px;
}

.search button:hover, .scan:hover, .add:hover {
  background: var(--green-dark);
}

.scan {
  color: var(--green-dark);
  background: #eef6f2;
  border: 1px solid #d6e9df;
  padding: 0 17px;
}

.promo {
  color: #fff;
  background: linear-gradient(116deg, #a93232, #d94a4a 62%, #e97b6f);
  border-radius: 27px;
  justify-content: space-between;
  max-width: 1192px;
  min-height: 284px;
  margin: auto;
  padding: 40px 52px;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 45px #a932322e;
}

.promo > div:first-child {
  z-index: 1;
}

.eyebrow {
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 11px;
  font-weight: 850;
}

.promo .eyebrow {
  color: #ffe1df;
}

.promo h1 {
  letter-spacing: -1.2px;
  margin: 9px 0 8px;
  font-size: 39px;
  line-height: 1.03;
}

.promo p {
  color: #fff0ef;
  margin: 0 0 21px;
  font-size: 15px;
}

.promo a {
  color: var(--primary-dark);
  background: #fff;
  border-radius: 11px;
  align-items: center;
  gap: 15px;
  padding: 12px 17px;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
}

.promo-art {
  place-items: center;
  width: 41%;
  display: grid;
  position: relative;
}

.promo-art:before, .promo-art:after {
  content: "";
  background: #ffd8d533;
  border-radius: 999px;
  position: absolute;
}

.promo-art:before {
  width: 260px;
  height: 260px;
}

.promo-art:after {
  background: none;
  border: 1px solid #fff0ef78;
  width: 190px;
  height: 190px;
}

.promo-art b {
  z-index: 1;
  filter: drop-shadow(0 15px 12px #6b202038);
  font-size: 105px;
  transform: rotate(8deg);
}

.promo-art i {
  font-size: 48px;
  font-style: normal;
  position: absolute;
  top: 14px;
  right: 25px;
}

.promo-art em {
  z-index: 2;
  color: #724c00;
  background: #fff1b8;
  border-radius: 50%;
  place-items: center;
  width: 74px;
  height: 74px;
  font-style: normal;
  font-weight: 900;
  display: grid;
  position: absolute;
  bottom: 10px;
  right: 5px;
  transform: rotate(7deg);
}

.section {
  max-width: 1240px;
  margin: 42px auto 0;
  padding: 0 24px;
}

.section-head {
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 18px;
  display: flex;
}

.section-head h2 {
  letter-spacing: -.65px;
  margin: 4px 0 0;
  font-size: 27px;
}

.section-head > a {
  color: var(--green);
  font-size: 13px;
  font-weight: 750;
}

.categories {
  grid-template-columns: repeat(6, 1fr);
  gap: 13px;
  display: grid;
}

.category {
  min-width: 0;
}

.category span {
  border-radius: 20px;
  place-items: center;
  height: 104px;
  font-size: 42px;
  transition: transform .2s;
  display: grid;
}

.category:hover span {
  transform: translateY(-3px);
}

.category strong {
  text-align: center;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.3;
  display: block;
}

.products {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding-bottom: 50px;
  display: grid;
}

.product {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 20px;
  padding: 11px 11px 13px;
  position: relative;
  box-shadow: 0 8px 30px #203e2e08;
}

.product-image {
  border-radius: 14px;
  place-items: center;
  height: 196px;
  display: grid;
  position: relative;
}

.product-image > span {
  filter: drop-shadow(0 10px 12px #243f301a);
  font-size: 74px;
}

.product-image > b {
  color: var(--green-dark);
  background: #fff;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 11px;
  position: absolute;
  top: 10px;
  left: 10px;
}

.product-image > button {
  cursor: pointer;
  background: #fff;
  border: 0;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 21px;
  position: absolute;
  top: 9px;
  right: 9px;
}

.product p {
  color: var(--muted);
  margin: 13px 2px 4px;
  font-size: 11px;
}

.product h3 {
  min-height: 39px;
  margin: 0 2px 10px;
  font-size: 15px;
  line-height: 1.28;
}

.price {
  align-items: baseline;
  gap: 8px;
  margin: 0 2px 12px;
  display: flex;
}

.price strong {
  font-size: 18px;
}

.price del {
  color: #98a29d;
  font-size: 12px;
}

.add {
  background: var(--green);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 11px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 42px;
  padding: 0 14px;
  font-weight: 800;
  display: flex;
}

.mobile-nav {
  display: none;
}

@media (max-width: 800px) {
  body {
    padding-bottom: 78px;
  }

  .topbar {
    height: 68px;
    padding: 0 16px;
  }

  .brand {
    min-width: 0;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
  }

  .brand strong {
    font-size: 18px;
  }

  .brand small, .desktop-nav, .header-actions .round, .cart-button {
    display: none;
  }

  .header-actions {
    margin-left: auto;
  }

  .locale {
    height: 38px !important;
  }

  .search-wrap {
    margin: 4px auto 14px;
    padding: 0 16px;
  }

  .search {
    height: 52px;
    padding-left: 14px;
  }

  .search button {
    display: none;
  }

  .scan {
    width: 52px;
    padding: 0;
    font-size: 21px;
  }

  .scan span {
    display: none;
  }

  .promo {
    border-radius: 22px;
    min-height: 230px;
    margin: 0 16px;
    padding: 27px 25px;
  }

  .promo h1 {
    font-size: 30px;
  }

  .promo p {
    max-width: 210px;
    font-size: 13px;
  }

  .promo-art {
    opacity: .95;
    width: 46%;
    position: absolute;
    bottom: -12px;
    right: -25px;
  }

  .promo-art b {
    font-size: 73px;
  }

  .promo-art:before {
    width: 170px;
    height: 170px;
  }

  .promo-art:after {
    width: 125px;
    height: 125px;
  }

  .promo-art i {
    display: none;
  }

  .promo-art em {
    width: 58px;
    height: 58px;
    font-size: 13px;
    right: 13px;
  }

  .section {
    margin-top: 32px;
    padding: 0 16px;
  }

  .section-head h2 {
    font-size: 23px;
  }

  .categories {
    scrollbar-width: none;
    gap: 12px;
    padding-bottom: 4px;
    display: flex;
    overflow: auto;
  }

  .category {
    flex: 0 0 100px;
  }

  .category span {
    height: 92px;
  }

  .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }

  .product-image {
    height: 142px;
  }

  .product-image > span {
    font-size: 56px;
  }

  .product {
    border-radius: 17px;
    padding: 8px;
  }

  .product h3 {
    font-size: 14px;
  }

  .price {
    display: block;
  }

  .price del {
    margin-top: 2px;
    display: block;
  }

  .add {
    height: 40px;
  }

  .mobile-nav {
    z-index: 20;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
    height: 68px;
    padding: 5px 4px max(5px,env(safe-area-inset-bottom));
    background: #fffffff4;
    grid-template-columns: repeat(5, 1fr);
    display: grid;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .mobile-nav a {
    color: #7a8780;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    font-size: 21px;
    display: flex;
  }

  .mobile-nav span {
    font-size: 9px;
  }

  .mobile-nav .active {
    color: var(--green);
    font-weight: 750;
  }
}

@media (max-width: 390px) {
  .promo-art {
    opacity: .55;
  }

  .promo h1 {
    font-size: 27px;
  }

  .section-head > a {
    display: none;
  }
}

.app-topbar {
  z-index: 30;
  background: #fbfcfb;
  position: relative;
}

.desktop-nav a.active {
  color: var(--green);
}

.round {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  place-items: center;
  height: 42px;
  display: grid;
}

.profile-link {
  color: var(--green-dark);
  padding: 0 4px;
  font-size: 13px;
  font-weight: 800;
}

.header-search {
  max-width: 290px;
  height: 40px;
  color: var(--muted);
  background: #f0f5f2;
  border-radius: 12px;
  flex: 1;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  font-size: 12px;
  display: flex;
}

.mobile-menu-button {
  display: none;
}

.mobile-drawer {
  z-index: 40;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 16px;
  padding: 10px;
  position: absolute;
  top: 66px;
  left: 16px;
  right: 16px;
  box-shadow: 0 18px 45px #1b3d2a22;
}

.mobile-drawer a {
  padding: 12px;
  font-weight: 700;
  display: block;
}

.offline-banner {
  z-index: 60;
  color: #fff;
  text-align: center;
  background: #7a3f10;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  position: sticky;
  top: 0;
}

.home-search, .catalog-search {
  max-width: 1240px;
  margin: 12px auto 22px;
  padding: 0 24px;
}

.search-component {
  gap: 10px;
  display: flex;
  position: relative;
}

.search-component .search {
  width: 100%;
}

.search-component .search > svg {
  color: var(--green);
  flex: none;
}

.search-component .search button.search-clear {
  width: 32px;
  height: 32px;
  color: var(--muted);
  background: none;
  place-items: center;
  padding: 0;
  display: grid;
}

.search-component .search-submit {
  min-width: 80px;
}

.search-component .scan {
  white-space: nowrap;
  align-items: center;
  gap: 7px;
  display: flex;
}

.search-popover {
  z-index: 35;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 16px;
  padding: 8px;
  position: absolute;
  top: 64px;
  left: 0;
  right: 80px;
  box-shadow: 0 16px 50px #173f2922;
}

.search-popover > button {
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 9px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  display: flex;
}

.search-popover > button span {
  flex: 1;
}

.search-popover > button small {
  color: var(--muted);
}

.popover-head {
  justify-content: space-between;
  padding: 9px 10px 5px;
  display: flex;
}

.popover-head button {
  color: var(--green);
  cursor: pointer;
  background: none;
  border: 0;
}

.promo-art > svg {
  z-index: 2;
  color: #eafff4;
  filter: drop-shadow(0 15px 12px #0b4c3038);
  width: 108px;
  height: 108px;
  transform: rotate(8deg);
}

.bubble {
  border: 2px solid #dffff05c;
  border-radius: 50%;
  position: absolute;
}

.bubble.one {
  width: 28px;
  height: 28px;
  top: 30px;
  right: 30px;
}

.bubble.two {
  width: 16px;
  height: 16px;
  bottom: 35px;
  left: 30px;
}

.section-head > a {
  align-items: center;
  gap: 3px;
  display: flex;
}

.category span svg {
  width: 38px;
  height: 38px;
}

.category small {
  color: var(--muted);
  text-align: center;
  margin-top: 3px;
  font-size: 10px;
  display: block;
}

.skeleton-card span, .skeleton-card i {
  background: linear-gradient(90deg, #edf1ee, #f8faf9, #edf1ee) 0 0 / 200% 100%;
  animation: 1.5s infinite shimmer;
}

.skeleton-card i {
  border-radius: 6px;
  width: 75%;
  height: 13px;
  margin: 10px auto;
  display: block;
}

@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

.deals-section {
  background: #f0f7f3;
  max-width: none;
  padding: 35px max(24px, 50vw - 596px);
}

.product {
  min-width: 0;
  transition: transform .2s, box-shadow .2s;
}

.product:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px #203e2e14;
}

.product-image {
  background: #f2f5f3;
  overflow: hidden;
}

.product-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .3s;
}

.product:hover .product-image img {
  transform: scale(1.035);
}

.favorite-button {
  z-index: 3;
  color: #53625a;
  cursor: pointer;
  background: #fffffff0;
  border: 0;
  border-radius: 50%;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
  position: absolute;
  top: 20px;
  right: 20px;
}

.favorite-button.active {
  color: #d34868;
}

.availability {
  min-height: 17px;
  color: var(--green);
  margin: 0 2px 5px;
  font-size: 10px;
  font-weight: 700;
}

.quantity {
  background: var(--mint);
  min-height: 42px;
  color: var(--green-dark);
  text-align: center;
  border: 1px solid #bedccc;
  border-radius: 11px;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  display: grid;
}

.quantity button {
  height: 40px;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  place-items: center;
  display: grid;
}

.quantity button:disabled {
  opacity: .35;
}

.quantity.large {
  grid-template-columns: 52px 1fr 52px;
  min-width: 210px;
  height: 52px;
}

.quantity.large button {
  height: 50px;
}

.add {
  gap: 5px;
}

.add.secondary {
  color: var(--green-dark);
  background: #edf3f0;
  justify-content: center;
}

.primary-button, .outline-button {
  background: var(--green);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 13px;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 20px;
  font-weight: 800;
  display: inline-flex;
}

.primary-button:hover {
  background: var(--green-dark);
}

.primary-button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.primary-button.compact {
  min-height: 42px;
  padding: 0 14px;
  font-size: 13px;
}

.outline-button {
  color: var(--green-dark);
  background: #fff;
  border: 1px solid #cddcd4;
}

.toast {
  z-index: 100;
  color: #fff;
  background: #163b29;
  border-radius: 12px;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 700;
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 10px 34px #0003;
}

.toast.error {
  background: #8b312f;
}

.page-loader {
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 220px;
  display: flex;
}

.page-loader i {
  background: var(--green);
  border-radius: 50%;
  width: 10px;
  height: 10px;
  animation: .8s ease-in-out infinite alternate pulse;
}

.page-loader i:nth-child(2) {
  animation-delay: .2s;
}

.page-loader i:nth-child(3) {
  animation-delay: .4s;
}

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

.center-state {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 55vh;
  padding: 60px 20px;
  display: flex;
}

.center-state h1, .center-state h2 {
  margin: 14px 0 5px;
}

.center-state p {
  max-width: 450px;
  color: var(--muted);
}

.state-icon {
  background: var(--mint);
  width: 72px;
  height: 72px;
  color: var(--green);
  border-radius: 24px;
  place-items: center;
  display: grid;
}

.state-icon svg {
  width: 32px;
  height: 32px;
}

.state-icon.error {
  color: #a34536;
  background: #f9e9e6;
}

.catalog-page, .product-page, .cart-page, .checkout-page, .standard-page, .narrow-page {
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 24px 80px;
}

.narrow-page {
  max-width: 980px;
}

.standard-page {
  padding-top: 38px;
}

.catalog-search {
  display: none;
}

.catalog-heading, .page-title {
  justify-content: space-between;
  align-items: flex-end;
  margin: 10px 0 28px;
  display: flex;
}

.catalog-heading h1, .page-title h1 {
  letter-spacing: -1px;
  margin: 4px 0;
  font-size: 34px;
}

.catalog-heading p, .page-title p {
  color: var(--muted);
  margin: 0;
  font-size: 12px;
}

.page-title.row {
  align-items: center;
}

.catalog-controls {
  align-items: end;
  gap: 12px;
  display: flex;
}

.catalog-controls label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  display: grid;
}

.catalog-controls select, .admin-panel select {
  border: 1px solid var(--line);
  min-width: 200px;
  height: 43px;
  color: var(--ink);
  background: #fff;
  border-radius: 11px;
  padding: 0 12px;
}

.filter-trigger {
  display: none;
}

.catalog-layout {
  grid-template-columns: 224px 1fr;
  gap: 26px;
  display: grid;
}

.catalog-results .products {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.filters-sidebar {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 17px;
  align-self: start;
  padding: 18px;
  position: sticky;
  top: 12px;
}

.filter-panel fieldset {
  border: 0;
  border-bottom: 1px solid var(--line);
  gap: 10px;
  margin: 0 0 22px;
  padding: 0 0 19px;
  display: grid;
}

.filter-panel fieldset:last-child {
  border: 0;
}

.filter-panel legend {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 850;
}

.filter-panel label {
  color: #536158;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  display: flex;
}

.filter-panel input[type="checkbox"], .filter-panel input[type="radio"] {
  accent-color: var(--green);
  width: 16px;
  height: 16px;
}

.filter-panel input[type="range"] {
  width: 100%;
  accent-color: var(--green);
}

.range-values {
  color: var(--muted);
  justify-content: space-between;
  font-size: 11px;
  display: flex;
}

.range-values b {
  color: var(--ink);
}

.modal-backdrop {
  z-index: 90;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: #102a1e7d;
  border: 0;
  place-items: center;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 20px;
  display: grid;
  position: fixed;
  inset: 0;
}

.filter-sheet, .modal-card {
  background: #fff;
  border-radius: 22px;
  width: min(540px, 100%);
  max-height: 90vh;
  padding: 22px;
  overflow: auto;
  box-shadow: 0 24px 80px #0003;
}

.filter-sheet header, .modal-card header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  display: flex;
}

.filter-sheet header h2, .modal-card header h2 {
  margin: 0;
}

.filter-sheet header button, .modal-card header button {
  cursor: pointer;
  background: #eef3f0;
  border: 0;
  border-radius: 10px;
  place-items: center;
  width: 38px;
  height: 38px;
  display: grid;
}

.breadcrumbs {
  color: var(--muted);
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 23px;
  font-size: 11px;
  display: flex;
  overflow: hidden;
}

.breadcrumbs span {
  text-overflow: ellipsis;
  overflow: hidden;
}

.product-detail {
  grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr);
  gap: 55px;
  padding: 20px 0 45px;
  display: grid;
}

.main-image {
  background: #eef3f0;
  border-radius: 25px;
  height: 520px;
  position: relative;
  overflow: hidden;
}

.main-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.main-image > b {
  color: var(--green-dark);
  background: #fff;
  border-radius: 9px;
  padding: 7px 11px;
  position: absolute;
  top: 18px;
  left: 18px;
}

.thumbnails {
  gap: 9px;
  margin-top: 12px;
  display: flex;
}

.thumbnails button {
  background: #fff;
  border: 2px solid #0000;
  border-radius: 12px;
  width: 74px;
  height: 74px;
  padding: 2px;
  overflow: hidden;
}

.thumbnails button.active {
  border-color: var(--green);
}

.thumbnails img {
  object-fit: cover;
  border-radius: 8px;
  width: 100%;
  height: 100%;
}

.product-info {
  padding-top: 12px;
}

.product-info h1 {
  letter-spacing: -1.1px;
  margin: 8px 0 7px;
  font-size: 38px;
  line-height: 1.05;
}

.product-subtitle {
  color: var(--muted);
}

.stock {
  background: var(--mint);
  width: max-content;
  color: var(--green-dark);
  border-radius: 8px;
  align-items: center;
  gap: 6px;
  margin: 20px 0 16px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 750;
  display: flex;
}

.stock.low_stock {
  color: #8c5b08;
  background: #fff1d9;
}

.stock.out_of_stock {
  color: #8b3e35;
  background: #f3e9e8;
}

.detail-price {
  align-items: baseline;
  gap: 12px;
  margin: 5px 0 25px;
  display: flex;
}

.detail-price strong {
  font-size: 32px;
}

.detail-price del {
  color: #9ba69f;
}

.detail-actions {
  gap: 10px;
  display: flex;
}

.detail-actions > .primary-button {
  min-width: 220px;
}

.heart-large {
  border: 1px solid var(--line);
  color: #5e6c64;
  background: #fff;
  border-radius: 14px;
  place-items: center;
  width: 52px;
  height: 52px;
  display: grid;
}

.heart-large.active {
  color: #d34868;
  background: #fff1f5;
}

.benefits {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 26px 0;
  display: grid;
}

.benefits > div {
  border: 1px solid var(--line);
  border-radius: 13px;
  gap: 10px;
  padding: 13px;
  display: flex;
}

.benefits svg {
  color: var(--green);
}

.benefits span, .benefits b, .benefits small {
  display: block;
}

.benefits b {
  font-size: 12px;
}

.benefits small {
  color: var(--muted);
  margin-top: 2px;
  font-size: 10px;
}

.product-codes {
  border-top: 1px solid var(--line);
  margin: 0;
}

.product-codes div {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  padding: 9px 0;
  font-size: 11px;
  display: flex;
}

.product-codes dt {
  color: var(--muted);
}

.product-codes dd {
  margin: 0;
  font-weight: 700;
}

.product-description {
  border-top: 1px solid var(--line);
  max-width: 820px;
  padding: 35px 0;
}

.product-description h2 {
  font-size: 25px;
}

.product-description p {
  color: #56645d;
  line-height: 1.7;
}

.description-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 25px;
  display: grid;
}

.description-grid > div {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 15px;
  padding: 17px;
}

.description-grid h3 {
  margin: 0;
  font-size: 13px;
}

.description-grid p {
  font-size: 11px;
  line-height: 1.5;
}

.product-related {
  padding: 0;
}

.cart-layout, .checkout-layout {
  grid-template-columns: 1fr 350px;
  align-items: start;
  gap: 28px;
  display: grid;
}

.cart-list {
  gap: 11px;
  display: grid;
}

.cart-line {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 18px;
  grid-template-columns: 118px 1fr auto;
  align-items: center;
  gap: 17px;
  min-height: 145px;
  padding: 14px;
  display: grid;
}

.cart-image {
  background: #eef3f0;
  border-radius: 13px;
  width: 118px;
  height: 118px;
  overflow: hidden;
}

.cart-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.cart-product small {
  color: var(--muted);
}

.cart-product h3 {
  margin: 5px 0 18px;
}

.line-actions {
  gap: 15px;
  display: flex;
}

.line-actions button {
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  align-items: center;
  gap: 5px;
  padding: 0;
  font-size: 11px;
  display: flex;
}

.cart-quantity {
  justify-items: end;
  gap: 13px;
  min-width: 142px;
  display: grid;
}

.cart-quantity .quantity {
  width: 132px;
}

.delivery-progress {
  color: var(--green-dark);
  background: #e8f5ef;
  border-radius: 16px;
  gap: 12px;
  padding: 16px;
  display: flex;
}

.delivery-progress > div {
  flex: 1;
}

.delivery-progress b {
  margin-bottom: 9px;
  font-size: 12px;
  display: block;
}

.delivery-progress span {
  background: #c5ddcf;
  border-radius: 8px;
  height: 6px;
  display: block;
  overflow: hidden;
}

.delivery-progress i {
  background: var(--green);
  height: 100%;
  display: block;
}

.cart-summary {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 19px;
  padding: 22px;
  position: sticky;
  top: 15px;
  box-shadow: 0 12px 34px #203e2e0b;
}

.cart-summary h2 {
  margin: 0 0 18px;
}

.cart-summary dl {
  margin: 0;
}

.cart-summary dl > div {
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  font-size: 12px;
  display: flex;
}

.cart-summary dt {
  color: var(--muted);
}

.cart-summary dd {
  text-align: right;
  margin: 0;
  font-weight: 750;
}

.cart-summary .discount-row dd {
  color: #c14246;
}

.cart-summary .summary-total {
  border-top: 1px solid var(--line);
  margin: 10px 0 15px;
  padding-top: 17px;
  font-size: 18px;
}

.cart-summary > .primary-button {
  width: 100%;
}

.promo-form {
  grid-template-columns: 1fr auto;
  margin: 5px 0 14px;
  display: grid;
}

.promo-form input {
  border: 1px solid var(--line);
  text-transform: uppercase;
  border-radius: 10px 0 0 10px;
  min-width: 0;
  height: 42px;
  padding: 0 10px;
}

.promo-form button {
  color: var(--green-dark);
  background: #e7f2ec;
  border: 0;
  border-radius: 0 10px 10px 0;
  font-weight: 750;
}

.promo-form small {
  color: #a43d35;
  grid-column: 1 / -1;
  margin-top: 4px;
}

.secure-note {
  color: var(--muted);
  justify-content: center;
  gap: 6px;
  font-size: 9px;
  display: flex;
}

.auth-page {
  background: radial-gradient(circle at 50% 0, #e5f5ec, #0000 45%);
  place-items: center;
  min-height: calc(100vh - 84px);
  padding: 30px 16px 80px;
  display: grid;
}

.auth-card {
  border: 1px solid var(--line);
  text-align: center;
  background: #fff;
  border-radius: 24px;
  width: min(430px, 100%);
  padding: 34px;
  box-shadow: 0 20px 60px #163b2913;
}

.back-link {
  color: var(--muted);
  text-align: left;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  display: flex;
}

.auth-icon {
  background: var(--mint);
  width: 58px;
  height: 58px;
  color: var(--green);
  border-radius: 19px;
  place-items: center;
  margin: 15px auto;
  display: grid;
}

.auth-card h1 {
  margin: 7px 0;
}

.auth-card > p {
  color: var(--muted);
  font-size: 13px;
}

.auth-card form {
  text-align: left;
  gap: 14px;
  margin-top: 24px;
  display: grid;
}

.auth-card label, .admin-form label, .product-editor-form label, .wide-field, .settings-card label {
  gap: 6px;
  font-size: 11px;
  font-weight: 750;
  display: grid;
}

.auth-card input, .admin-form input, .admin-form textarea, .product-editor-form input, .wide-field textarea, .form-grid input, .form-grid textarea, .admin-settings-form input {
  background: #fff;
  border: 1px solid #d7e2dc;
  border-radius: 11px;
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
}

.otp-input {
  text-align: center;
  letter-spacing: .45em;
  font-size: 24px;
}

.change-phone {
  color: var(--green);
  background: none;
  border: 0;
  font-weight: 750;
}

.demo-code {
  color: var(--green-dark);
  background: #ebf7f0;
  border-radius: 10px;
  align-items: center;
  gap: 7px;
  padding: 10px;
  font-size: 11px;
  display: flex;
}

.demo-code svg {
  width: 17px;
}

.check-row {
  align-items: start;
  line-height: 1.45;
  grid-template-columns: auto 1fr !important;
  gap: 8px !important;
  display: flex !important;
}

.check-row input {
  accent-color: var(--green);
  width: 16px !important;
  min-height: auto !important;
}

.check-row.muted {
  color: var(--muted);
}

.form-error {
  color: #a53f35;
  font-size: 11px;
}

.auth-demo {
  color: #8a968f;
  margin-top: 20px;
  font-size: 10px;
  line-height: 1.6;
  display: block;
}

.address-list {
  gap: 12px;
  display: grid;
}

.address-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 16px;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 17px;
  display: grid;
}

.address-pin {
  background: var(--mint);
  width: 44px;
  height: 44px;
  color: var(--green);
  border-radius: 13px;
  place-items: center;
  display: grid;
}

.address-card h3 {
  margin: 0;
}

.address-card h3 span {
  background: var(--mint);
  color: var(--green);
  border-radius: 6px;
  align-items: center;
  gap: 3px;
  margin-left: 8px;
  padding: 3px 6px;
  font-size: 9px;
  display: inline-flex;
}

.address-card h3 span svg {
  width: 10px;
}

.address-card p {
  color: var(--muted);
  margin: 5px 0;
  font-size: 12px;
}

.address-card small {
  color: var(--muted);
}

.address-actions {
  gap: 5px;
  display: flex;
}

.address-actions button {
  color: #647169;
  background: #f0f4f2;
  border: 0;
  border-radius: 9px;
  place-items: center;
  width: 36px;
  height: 36px;
  display: grid;
}

.address-actions svg {
  width: 16px;
}

.form-grid {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  display: grid;
}

.form-grid label {
  gap: 5px;
  font-size: 11px;
  font-weight: 750;
  display: grid;
}

.form-grid .wide {
  grid-column: 1 / -1;
}

.form-grid textarea {
  resize: vertical;
  min-height: 80px;
}

.checkout-layout {
  grid-template-columns: 1fr 370px;
}

.checkout-steps {
  gap: 13px;
  display: grid;
}

.checkout-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 18px;
  padding: 21px;
}

.checkout-card > header {
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  display: flex;
}

.checkout-card > header span {
  background: var(--green);
  color: #fff;
  border-radius: 9px;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 12px;
  font-weight: 800;
  display: grid;
}

.checkout-card > header h2 {
  flex: 1;
  margin: 0;
  font-size: 17px;
}

.checkout-card > header > svg {
  color: var(--green);
}

.contact-summary {
  flex-wrap: wrap;
  gap: 13px;
  font-size: 12px;
  display: flex;
}

.contact-summary span {
  color: var(--muted);
}

.address-options {
  gap: 8px;
  display: grid;
}

.address-options label {
  border: 1px solid var(--line);
  cursor: pointer;
  border-radius: 12px;
  align-items: center;
  gap: 10px;
  padding: 13px;
  display: flex;
}

.address-options label.selected {
  background: #f1faf5;
  border-color: #74b995;
}

.address-options label input {
  accent-color: var(--green);
}

.address-options label div {
  flex: 1;
}

.address-options b, .address-options span {
  font-size: 12px;
  display: block;
}

.address-options span {
  color: var(--muted);
  margin-top: 3px;
}

.address-options svg {
  color: var(--green);
}

.delivery-option, .payment-option {
  background: #f2faf6;
  border: 1px solid #8bc2a5;
  border-radius: 13px;
  align-items: center;
  gap: 12px;
  padding: 14px;
  display: flex;
}

.delivery-logo {
  color: #141414;
  background: #ffd92c;
  border-radius: 12px;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 23px;
  font-weight: 900;
  display: grid;
}

.delivery-option > div:nth-child(2) {
  flex: 1;
}

.delivery-option b, .delivery-option span, .payment-option b, .payment-option span {
  display: block;
}

.delivery-option span, .payment-option span {
  color: var(--muted);
  margin-top: 3px;
  font-size: 10px;
}

.delivery-option span {
  align-items: center;
  gap: 4px;
  display: flex;
}

.delivery-option span svg {
  width: 12px;
}

.wide-field {
  margin-top: 16px;
}

.wide-field textarea {
  resize: vertical;
  min-height: 72px;
}

.payment-option > svg {
  color: var(--green);
}

.payment-option div {
  flex: 1;
}

.checkout-items {
  max-height: 310px;
  overflow: auto;
}

.checkout-items > div {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  display: grid;
}

.checkout-items img {
  object-fit: cover;
  border-radius: 8px;
  width: 42px;
  height: 42px;
}

.checkout-items span {
  font-size: 10px;
}

.checkout-items small {
  color: var(--muted);
  display: block;
}

.checkout-items b {
  font-size: 10px;
}

.order-success {
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
  padding: 80px 20px;
}

.success-icon {
  background: var(--mint);
  width: 90px;
  height: 90px;
  color: var(--green);
  border-radius: 30px;
  place-items: center;
  margin: auto;
  display: grid;
}

.success-icon svg {
  width: 45px;
  height: 45px;
}

.order-success h1 {
  font-size: 36px;
}

.order-success > p {
  color: var(--muted);
}

.success-card {
  border: 1px solid var(--line);
  text-align: left;
  background: #fff;
  border-radius: 18px;
  margin: 25px 0;
  padding: 18px;
}

.success-card > div {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  gap: 20px;
  padding: 10px;
  display: flex;
}

.success-card > div:last-child {
  border: 0;
}

.success-card span {
  color: var(--muted);
  font-size: 11px;
}

.success-card b {
  text-align: right;
  font-size: 12px;
}

.orders-list {
  gap: 12px;
  display: grid;
}

.order-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 17px;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 15px;
  padding: 18px;
  display: grid;
}

.order-status-icon {
  background: var(--mint);
  width: 46px;
  height: 46px;
  color: var(--green);
  border-radius: 14px;
  place-items: center;
  display: grid;
}

.order-card span, .order-card p {
  color: var(--muted);
  font-size: 10px;
}

.order-card h3 {
  margin: 3px 0;
}

.order-card p {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 520px;
  margin: 5px 0 8px;
  overflow: hidden;
}

.order-total {
  justify-items: end;
  gap: 9px;
  display: grid;
}

.status-pill {
  color: #526159;
  background: #edf2ef;
  border-radius: 7px;
  width: max-content;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 800;
}

.status-pill.new {
  color: #3f62a4;
  background: #e9f0ff;
}

.status-pill.delivered {
  background: var(--mint);
  color: var(--green-dark);
}

.status-pill.cancelled {
  color: #9a4038;
  background: #f8e9e7;
}

.order-overview {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  display: grid;
}

.order-overview > div {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 15px;
  grid-template-columns: 35px 1fr;
  gap: 2px 10px;
  padding: 17px;
  display: grid;
}

.order-overview svg {
  color: var(--green);
  grid-row: 1 / 3;
}

.order-overview span {
  color: var(--muted);
  font-size: 10px;
}

.order-overview b {
  font-size: 12px;
}

.order-section {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 17px;
  margin-top: 18px;
  padding: 20px;
}

.order-section h2 {
  margin: 0 0 15px;
  font-size: 18px;
}

.order-line {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  display: grid;
}

.order-line img {
  object-fit: cover;
  border-radius: 9px;
  width: 52px;
  height: 52px;
}

.order-line b, .order-line span {
  display: block;
}

.order-line span {
  color: var(--muted);
  margin-top: 4px;
  font-size: 10px;
}

.timeline > div {
  grid-template-columns: 18px 1fr;
  gap: 10px;
  min-height: 50px;
  display: grid;
}

.timeline i {
  background: var(--green);
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 5px var(--mint);
  border-radius: 50%;
  margin-top: 3px;
}

.timeline span {
  display: grid;
}

.timeline small {
  color: var(--muted);
}

.profile-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 38px 24px 90px;
}

.profile-hero {
  color: #fff;
  background: linear-gradient(120deg, #116f44, #369f6e);
  border-radius: 23px;
  align-items: center;
  gap: 18px;
  padding: 26px;
  display: flex;
}

.profile-avatar {
  background: #ffffff25;
  border-radius: 23px;
  place-items: center;
  width: 74px;
  height: 74px;
  font-size: 31px;
  font-weight: 850;
  display: grid;
}

.profile-hero h1 {
  margin: 2px 0;
  font-size: 27px;
}

.profile-hero p, .profile-hero span {
  color: #d5f3e4;
  margin: 0;
  font-size: 11px;
}

.profile-hero > div:nth-child(2) {
  flex: 1;
}

.owner-badge {
  background: #ffffff1f;
  border-radius: 9px;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 850;
  display: flex;
}

.owner-badge svg {
  width: 13px;
}

.profile-menu {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 19px;
  margin-top: 16px;
  overflow: hidden;
}

.profile-menu > a, .profile-menu > button {
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  cursor: pointer;
  background: #fff;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 60px;
  padding: 8px 16px;
  display: grid;
}

.profile-menu > a > span, .profile-menu > button > span {
  width: 36px;
  height: 36px;
  color: var(--green);
  background: #eef5f1;
  border-radius: 10px;
  place-items: center;
  display: grid;
}

.profile-menu svg {
  width: 18px;
}

.profile-menu b {
  font-size: 13px;
}

.profile-menu .logout {
  color: #aa433b;
}

.settings-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 17px;
  margin-bottom: 14px;
  padding: 20px;
}

.settings-card h2 {
  align-items: center;
  gap: 8px;
  font-size: 17px;
  display: flex;
}

.settings-card h2 svg {
  color: var(--green);
}

.segmented {
  background: #edf2ef;
  border-radius: 12px;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  display: grid;
}

.segmented button {
  background: none;
  border: 0;
  border-radius: 9px;
  height: 40px;
  font-weight: 700;
}

.segmented button.active {
  color: var(--green);
  background: #fff;
  box-shadow: 0 4px 12px #123b2813;
}

.toggle-row {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  flex-direction: row !important;
  align-items: center !important;
  min-height: 46px !important;
  display: flex !important;
}

.toggle-row input {
  width: 39px;
  height: 21px;
  accent-color: var(--green);
}

.admin-layout {
  background: #f5f7f6;
  grid-template-columns: 235px 1fr;
  min-height: 100vh;
  display: grid;
}

.admin-sidebar {
  border-right: 1px solid var(--line);
  background: #fff;
  flex-direction: column;
  height: 100vh;
  padding: 22px 15px;
  display: flex;
  position: sticky;
  top: 0;
}

.admin-sidebar .brand {
  min-width: 0;
  padding: 0 7px;
}

.admin-sidebar nav {
  gap: 3px;
  margin-top: 32px;
  display: grid;
}

.admin-sidebar nav a {
  color: #5e6b64;
  border-radius: 10px;
  align-items: center;
  gap: 10px;
  min-height: 43px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
}

.admin-store-link {
  color: var(--green);
  margin-top: auto;
  padding: 12px;
  font-size: 12px;
  font-weight: 700;
}

.admin-main {
  min-width: 0;
}

.admin-header {
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #ffffffcf;
  justify-content: space-between;
  align-items: center;
  height: 68px;
  padding: 0 28px;
  display: flex;
}

.admin-header div {
  display: grid;
}

.admin-header span {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 9px;
}

.admin-header strong {
  font-size: 12px;
}

.admin-header > a {
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
}

.admin-page {
  max-width: 1320px;
  margin: 0 auto;
  padding: 30px 28px 70px;
}

.admin-title {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 60px;
  margin-bottom: 25px;
  display: flex;
}

.admin-title span {
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 10px;
  font-weight: 800;
}

.admin-title h1 {
  margin: 4px 0;
  font-size: 29px;
}

.admin-title p {
  color: var(--muted);
  margin: 0;
  font-size: 10px;
}

.admin-title > a {
  color: var(--green);
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 750;
  display: flex;
}

.metric-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  display: grid;
}

.metric-grid article {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 16px;
  align-items: center;
  gap: 13px;
  padding: 18px;
  display: flex;
}

.metric-grid article > span {
  background: var(--mint);
  width: 42px;
  height: 42px;
  color: var(--green);
  border-radius: 12px;
  place-items: center;
  display: grid;
}

.metric-grid small, .metric-grid strong {
  display: block;
}

.metric-grid small {
  color: var(--muted);
  font-size: 10px;
}

.metric-grid strong {
  margin-top: 4px;
  font-size: 20px;
}

.admin-grid {
  grid-template-columns: 1.35fr 1fr;
  align-items: start;
  gap: 16px;
  margin-top: 16px;
  display: grid;
}

.admin-panel {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 17px;
  padding: 20px;
}

.admin-panel > header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  display: flex;
}

.admin-panel > header h2, .admin-panel > h2 {
  margin: 0;
  font-size: 17px;
}

.admin-panel > header svg {
  color: var(--green);
}

.compact-table > div, .quality-list > div {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  display: flex;
}

.compact-table > div:last-child, .quality-list > div:last-child {
  border: 0;
}

.compact-table b, .compact-table small {
  display: block;
}

.compact-table b {
  font-size: 12px;
}

.compact-table small {
  color: var(--muted);
  margin-top: 3px;
  font-size: 9px;
}

.compact-table strong {
  color: var(--green);
}

.compact-table strong.danger, .quality-list b {
  color: #b2443c;
}

.quality-list span {
  font-size: 12px;
}

.admin-search {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 11px;
  align-items: center;
  gap: 7px;
  width: 290px;
  height: 42px;
  padding: 0 11px;
  display: flex;
}

.admin-search svg {
  width: 16px;
  color: var(--muted);
}

.admin-search input {
  background: none;
  border: 0;
  outline: 0;
  flex: 1;
  min-width: 0;
}

.admin-table-wrap {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 17px;
  overflow: auto;
}

.admin-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 850px;
}

.admin-table th {
  color: #77847d;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: #f4f7f5;
  padding: 12px 14px;
  font-size: 9px;
}

.admin-table td {
  border-top: 1px solid var(--line);
  padding: 13px 14px;
  font-size: 11px;
}

.admin-table td > b, .admin-table td > small {
  display: block;
}

.admin-table td > small {
  color: var(--muted);
  margin-top: 3px;
  font-size: 9px;
}

.admin-table select {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  min-width: 145px;
  height: 35px;
  font-size: 10px;
}

.admin-table a {
  color: var(--green);
}

.product-cell {
  align-items: center;
  gap: 9px;
  display: flex;
}

.product-cell img {
  object-fit: cover;
  border-radius: 8px;
  width: 42px;
  height: 42px;
}

.status-dot {
  background: var(--mint);
  color: var(--green-dark);
  border-radius: 7px;
  padding: 5px 7px;
  font-size: 9px;
  font-weight: 700;
}

.status-dot.off {
  color: #91443d;
  background: #f3e9e8;
}

.admin-order-item {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  padding: 11px 0;
  display: flex;
}

.admin-order-item b, .admin-order-item small {
  display: block;
}

.admin-order-item small {
  color: var(--muted);
}

.admin-summary > div {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  display: flex;
}

.admin-summary dt {
  color: var(--muted);
}

.admin-summary dd {
  text-align: right;
  margin: 0;
  font-weight: 700;
}

.product-editor > img {
  object-fit: cover;
  border-radius: 14px;
  width: 100%;
  height: 240px;
  margin-bottom: 17px;
}

.product-editor h2 {
  color: #9a681c;
  font-size: 11px;
}

.product-editor dl > div {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  padding: 9px 0;
  display: flex;
}

.product-editor dt {
  color: var(--muted);
}

.product-editor dd {
  margin: 0;
  font-weight: 750;
}

.product-editor-form, .admin-form {
  gap: 14px;
  display: grid;
}

.product-editor-form h2, .admin-form h2 {
  margin-bottom: 6px;
}

.admin-form textarea {
  resize: vertical;
  min-height: 75px;
}

.banner-admin-list > div {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  padding: 13px 0;
  display: flex;
}

.banner-admin-list b, .banner-admin-list small {
  display: block;
}

.banner-admin-list small {
  color: var(--muted);
  margin-top: 3px;
}

.banner-admin-list i {
  color: #68736d;
  background: #eee;
  border-radius: 7px;
  padding: 5px 7px;
  font-size: 9px;
  font-style: normal;
}

.banner-admin-list i.active {
  background: var(--mint);
  color: var(--green);
}

.integration-cards {
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  margin-bottom: 16px;
  display: grid;
}

.integration-cards > a {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 16px;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 18px;
  display: grid;
}

.integration-icon {
  border-radius: 13px;
  place-items: center;
  width: 48px;
  height: 48px;
  font-weight: 900;
  display: grid;
}

.integration-icon.one-c {
  color: #2b5ca7;
  background: #e9f1ff;
}

.integration-icon.yandex {
  color: #111;
  background: #ffdf38;
}

.integration-cards b, .integration-cards small {
  display: block;
}

.integration-cards small {
  color: var(--muted);
  margin-top: 4px;
}

.integration-cards > a > svg {
  color: var(--green);
}

.sync-history > div {
  border-bottom: 1px solid var(--line);
  gap: 11px;
  padding: 12px 0;
  display: flex;
}

.sync-status {
  background: var(--mint);
  width: 32px;
  height: 32px;
  color: var(--green);
  border-radius: 10px;
  place-items: center;
  display: grid;
}

.sync-status.failed {
  color: #9a4038;
  background: #f8e9e7;
}

.sync-status svg {
  width: 17px;
}

.sync-history b, .sync-history small {
  display: block;
}

.sync-history small {
  color: var(--muted);
  margin-top: 3px;
}

.sync-history p {
  color: var(--muted);
  margin: 5px 0;
  font-size: 10px;
}

.integration-hero {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 18px;
  align-items: center;
  gap: 16px;
  padding: 25px;
  display: flex;
}

.integration-hero > div:nth-child(2) {
  flex: 1;
}

.integration-hero span {
  color: var(--green);
  font-size: 10px;
  font-weight: 800;
}

.integration-hero h2 {
  margin: 3px 0;
}

.integration-hero p {
  color: var(--muted);
  margin: 0;
  font-size: 11px;
}

.admin-settings-form {
  max-width: 760px;
}

.admin-settings-form .form-grid {
  margin: 20px 0;
}

.promo-admin-card {
  border: 1px solid var(--line);
  border-radius: 13px;
  align-items: center;
  gap: 14px;
  padding: 15px;
  display: flex;
}

.promo-admin-card > span {
  background: var(--green);
  color: #fff;
  border-radius: 8px;
  padding: 10px;
  font-weight: 850;
}

.promo-admin-card > div {
  flex: 1;
}

.promo-admin-card b, .promo-admin-card small {
  display: block;
}

.promo-admin-card small, .muted-copy {
  color: var(--muted);
}

.promo-admin-card i {
  color: var(--green);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

@media (max-width: 1000px) {
  .desktop-nav, .header-search {
    display: none;
  }

  .catalog-results .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-detail {
    gap: 30px;
  }

  .admin-layout {
    grid-template-columns: 190px 1fr;
  }

  .admin-sidebar .brand small {
    display: none;
  }

  .metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  .app-topbar .brand small, .profile-link {
    display: none;
  }

  .mobile-menu-button {
    place-items: center;
    display: grid;
  }

  .header-actions .mobile-menu-button {
    background: none;
    border: 0;
    height: 38px;
  }

  .home-search {
    margin: 3px auto 13px;
    padding: 0 16px;
  }

  .search-component .scan {
    justify-content: center;
    width: 52px;
    padding: 0;
  }

  .search-component .scan span, .search-submit {
    display: none !important;
  }

  .search-popover {
    top: 58px;
    right: 0;
  }

  .promo-art > svg {
    width: 75px;
    height: 75px;
  }

  .categories .category small {
    display: none;
  }

  .product-image img {
    object-fit: cover;
  }

  .favorite-button {
    top: 14px;
    right: 14px;
  }

  .mobile-nav a {
    font-size: inherit;
  }

  .mobile-nav .nav-icon {
    position: relative;
  }

  .mobile-nav .nav-icon b {
    background: var(--green);
    color: #fff;
    text-align: center;
    border-radius: 8px;
    min-width: 16px;
    padding: 1px 4px;
    font-size: 8px;
    position: absolute;
    top: -7px;
    right: -9px;
  }

  .catalog-page, .product-page, .cart-page, .checkout-page, .standard-page, .narrow-page {
    padding: 15px 16px 90px;
  }

  .catalog-search {
    margin: 0 0 17px;
    padding: 0;
    display: block;
  }

  .catalog-heading, .page-title {
    margin: 6px 0 20px;
  }

  .catalog-heading h1, .page-title h1 {
    font-size: 27px;
  }

  .catalog-layout {
    grid-template-columns: 1fr;
  }

  .filters-sidebar {
    display: none;
  }

  .filter-trigger {
    border: 1px solid var(--line);
    height: 43px;
    color: var(--green-dark);
    background: #fff;
    border-radius: 11px;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    font-weight: 700;
    display: flex;
  }

  .catalog-controls label {
    display: none;
  }

  .catalog-results .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-sheet {
    border-radius: 22px 22px 0 0;
    align-self: end;
    width: 100%;
    max-height: 83vh;
  }

  .modal-backdrop:has(.filter-sheet) {
    place-items: end center;
    padding: 0;
  }

  .product-detail {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 0;
  }

  .main-image {
    height: 390px;
  }

  .product-info h1 {
    font-size: 29px;
  }

  .detail-actions > .primary-button {
    flex: 1;
    min-width: 0;
  }

  .benefits, .description-grid {
    grid-template-columns: 1fr;
  }

  .product-description {
    padding-bottom: 15px;
  }

  .product-related {
    margin-top: 15px;
    padding: 0;
  }

  .cart-layout, .checkout-layout {
    grid-template-columns: 1fr;
  }

  .cart-line {
    grid-template-columns: 90px 1fr;
    min-height: 115px;
  }

  .cart-image {
    width: 90px;
    height: 90px;
  }

  .cart-quantity {
    grid-column: 1 / -1;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .cart-summary {
    position: static;
  }

  .checkout-summary {
    order: -1;
  }

  .address-card {
    grid-template-columns: 40px 1fr;
  }

  .address-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .order-overview {
    grid-template-columns: 1fr;
  }

  .profile-page {
    padding: 20px 16px 90px;
  }

  .profile-hero {
    padding: 20px;
  }

  .profile-avatar {
    border-radius: 18px;
    width: 58px;
    height: 58px;
  }

  .profile-hero h1 {
    font-size: 21px;
  }

  .owner-badge {
    display: none;
  }

  .admin-layout {
    display: block;
  }

  .admin-sidebar {
    width: 100%;
    height: auto;
    padding: 12px;
    position: static;
  }

  .admin-sidebar .brand, .admin-store-link {
    display: none;
  }

  .admin-sidebar nav {
    margin: 0;
    display: flex;
    overflow: auto;
  }

  .admin-sidebar nav a {
    flex: none;
    min-height: 38px;
  }

  .admin-header {
    display: none;
  }

  .admin-page {
    padding: 20px 14px 70px;
  }

  .metric-grid {
    grid-template-columns: 1fr 1fr;
  }

  .admin-title {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-search {
    width: 100%;
  }

  .integration-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .round, .header-actions .round {
    display: none;
  }

  .locale {
    padding: 0 8px;
  }

  .promo h1 {
    max-width: 230px;
  }

  .promo-art {
    right: -48px;
  }

  .products {
    gap: 9px;
  }

  .product-image {
    height: 135px;
  }

  .product p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .product h3 {
    font-size: 13px;
  }

  .product .add {
    padding: 0 9px;
    font-size: 11px;
  }

  .product .add svg:first-child {
    display: none;
  }

  .quantity {
    grid-template-columns: 36px 1fr 36px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-grid .wide {
    grid-column: auto;
  }

  .auth-card {
    padding: 25px 20px;
  }

  .cart-line {
    gap: 11px;
    padding: 10px;
  }

  .cart-product h3 {
    font-size: 13px;
  }

  .line-actions button {
    font-size: 0;
  }

  .line-actions button svg {
    width: 18px;
  }

  .checkout-card {
    padding: 16px;
  }

  .order-card {
    grid-template-columns: 40px 1fr;
  }

  .order-total {
    grid-column: 1 / -1;
    justify-content: space-between;
    display: flex;
  }

  .metric-grid {
    grid-template-columns: 1fr;
  }

  .metric-grid article {
    padding: 14px;
  }

  .integration-hero {
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

.legal-page {
  max-width: 780px;
  margin: 0 auto;
  padding: 55px 24px 100px;
}

.legal-page h1 {
  font-size: 38px;
}

.legal-page h2 {
  margin-top: 35px;
  font-size: 20px;
}

.legal-page p {
  color: #536159;
  line-height: 1.8;
}

.support-card {
  gap: 8px;
  margin-top: 16px;
  display: grid;
}

.support-card h2 {
  margin: 0 0 4px;
}

.support-card a {
  color: var(--green);
  font-weight: 700;
}

.support-card small {
  color: var(--muted);
}

body {
  background: linear-gradient(#fff 0, #fff8f8 420px, snow 100%);
}

.app-topbar {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: #ffffffeb;
  border-bottom: 1px solid #ececece6;
  max-width: none;
  height: 72px;
  padding-inline: max(24px, 50vw - 596px);
  position: sticky;
  top: 0;
}

.brand-mark {
  background: linear-gradient(145deg,var(--primary),#b8333f);
  box-shadow: 0 9px 24px #d94a4a3d;
}

.header-search {
  background: #fff5f5;
  border: 1px solid #f4dede;
}

.round, .header-actions button, .cart-button {
  background: #fff;
  border-color: #f0dddd;
}

.notification-button {
  position: relative;
}

.notification-button i {
  background: var(--primary);
  color: #fff;
  border-radius: 9px;
  min-width: 17px;
  padding: 2px 4px;
  font-size: 9px;
  font-style: normal;
  position: absolute;
  top: -5px;
  right: -4px;
}

.delivery-address-wrap {
  border-bottom: 1px solid var(--border);
  background: #fff;
  padding: 9px max(24px, 50vw - 596px);
}

.delivery-address {
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 45px;
  padding: 5px 0;
  display: flex;
}

.delivery-address > span {
  background: var(--primary-soft);
  width: 34px;
  height: 34px;
  color: var(--primary);
  border-radius: 11px;
  place-items: center;
  display: grid;
}

.delivery-address > span svg {
  width: 17px;
}

.delivery-address > div {
  flex: 1;
  min-width: 0;
}

.delivery-address small, .delivery-address b {
  display: block;
}

.delivery-address small {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 9px;
}

.delivery-address b {
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 2px;
  font-size: 12px;
  overflow: hidden;
}

.delivery-address > svg {
  width: 17px;
  color: var(--muted);
}

.online-banner {
  z-index: 110;
  background: var(--success);
  color: #fff;
  box-shadow: var(--shadow-md);
  border-radius: 999px;
  padding: 9px 15px;
  font-size: 12px;
  font-weight: 800;
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
}

.notification-popover {
  z-index: 80;
  border: 1px solid var(--border);
  width: min(360px, 100vw - 32px);
  max-height: 70vh;
  box-shadow: var(--shadow-md);
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  position: fixed;
  top: 68px;
  right: max(24px, 50vw - 596px);
  overflow: auto;
}

.notification-popover header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  display: flex;
}

.notification-popover header button, .address-sheet header button, .scanner-sheet header button {
  background: var(--primary-soft);
  width: 38px;
  height: 38px;
  color: var(--primary);
  cursor: pointer;
  border: 0;
  border-radius: 11px;
  place-items: center;
  display: grid;
}

.notification-popover article {
  border-top: 1px solid var(--border);
  padding: 12px 3px;
}

.notification-popover article b, .notification-popover article small {
  display: block;
}

.notification-popover article p {
  color: var(--muted);
  margin: 5px 0;
  font-size: 12px;
  line-height: 1.45;
}

.notification-popover article small {
  color: var(--muted);
  font-size: 9px;
}

.address-sheet, .scanner-sheet, .confirm-dialog {
  background: #fff;
  border-radius: 24px;
  width: min(560px, 100%);
  max-height: 90vh;
  padding: 24px;
  overflow: auto;
  box-shadow: 0 28px 90px #4319193b;
}

.address-sheet header, .scanner-sheet header, .confirm-dialog header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  display: flex;
}

.address-sheet h2, .scanner-sheet h2 {
  margin: 3px 0;
}

.address-sheet header small, .scanner-sheet header small {
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 10px;
  font-weight: 800;
}

.address-options > button {
  border: 1px solid var(--border);
  text-align: left;
  cursor: pointer;
  background: #fff;
  border-radius: 14px;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 13px;
  display: grid;
}

.address-options > button.selected {
  background: var(--primary-soft);
  border-color: #e07a7a;
}

.address-options > button svg {
  color: var(--primary);
}

.address-options > button b, .address-options > button small {
  display: block;
}

.address-options > button small {
  color: var(--muted);
  margin-top: 3px;
}

.home-intro {
  max-width: 1192px;
  margin: 26px auto 10px;
  padding: 0 2px;
}

.home-intro > span {
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: 11px;
  font-weight: 850;
}

.home-intro h1 {
  letter-spacing: -.8px;
  margin: 5px 0 2px;
  font-size: 32px;
  line-height: 1.1;
}

.home-intro p {
  color: var(--muted);
  margin: 0;
  font-size: 13px;
}

.home-search {
  margin-top: 16px;
}

.search {
  box-shadow: var(--shadow-sm);
  border-color: #efdede;
}

.scan {
  background: var(--primary-soft);
  color: var(--primary-dark);
  border-color: #f3cccc;
}

.search-popover {
  box-shadow: var(--shadow-md);
  border-color: #efdede;
}

.search-popover > button:hover {
  background: var(--primary-soft);
}

.promo {
  min-height: 300px;
  margin-top: 8px;
}

.promo h2 {
  letter-spacing: -1.35px;
  max-width: 660px;
  margin: 10px 0 9px;
  font-size: 42px;
  line-height: 1.04;
}

.promo-indicator {
  z-index: 3;
  gap: 6px;
  position: absolute;
  bottom: 20px;
  left: 52px;
  display: flex !important;
}

.promo-indicator button {
  cursor: pointer;
  background: #ffffff78;
  border: 0;
  border-radius: 99px;
  width: 8px;
  height: 8px;
  padding: 0;
  transition: width .2s;
}

.promo-indicator button.active {
  background: #fff;
  width: 26px;
}

.promo-art > svg {
  color: #fff4f3;
  filter: drop-shadow(0 15px 12px #55141440);
}

.bubble {
  border-color: #ffffff78;
}

.quick-chips {
  scrollbar-width: none;
  gap: 9px;
  max-width: 1192px;
  margin: 18px auto 0;
  display: flex;
  overflow: auto;
}

.quick-chips a {
  color: #703232;
  background: #fff;
  border: 1px solid #f0dede;
  border-radius: 999px;
  flex: none;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 750;
  display: flex;
  box-shadow: 0 5px 16px #581f1f0a;
}

.quick-chips svg {
  width: 16px;
  color: var(--primary);
}

.category span {
  color: #bd3d47;
  background: #fcecec;
}

.category:nth-child(2) span {
  color: #ba5e2c;
  background: #fff0e7;
}

.category:nth-child(3) span {
  color: #7e55ad;
  background: #f4ecff;
}

.category:nth-child(4) span {
  color: #99721d;
  background: #fff7df;
}

.category:nth-child(5) span {
  color: #b84968;
  background: #ffeaf0;
}

.category:nth-child(6) span {
  color: #397e85;
  background: #eaf5f6;
}

.category:nth-child(7) span {
  color: #4d64a8;
  background: #edf1ff;
}

.collection-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  display: grid;
}

.collection-card {
  min-height: 145px;
  box-shadow: var(--shadow-sm);
  background: #fcecec;
  border-radius: 20px;
  flex-direction: column;
  padding: 18px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.collection-card > span {
  width: max-content;
  color: var(--primary-dark);
  background: #fff;
  border-radius: 7px;
  padding: 4px 7px;
  font-size: 9px;
  font-weight: 850;
}

.collection-card > b {
  margin-top: auto;
  font-size: 16px;
}

.collection-card p {
  color: #724747;
  min-height: 28px;
  margin: 5px 24px 0 0;
  font-size: 10px;
  line-height: 1.35;
}

.collection-card > svg {
  color: #a93232;
  position: absolute;
  bottom: 13px;
  right: 13px;
}

.collection-card.tone-2 {
  background: #fff0df;
}

.collection-card.tone-3 {
  background: #f2eafd;
}

.collection-card.tone-4 {
  background: #e9f3f5;
}

.collection-card.tone-5 {
  background: #fff5d9;
}

.deals-section {
  background: linear-gradient(#fff1f1, #fff8f8);
}

.product {
  box-shadow: var(--shadow-sm);
  border-color: #f0e2e2;
  border-radius: 22px;
}

.product:hover {
  box-shadow: 0 18px 44px #5d27271f;
}

.product-image {
  background: #fff4f4;
}

.product-image > b {
  color: var(--primary-dark);
}

.favorite-button.active, .heart-large.active {
  color: var(--primary);
  background: #fff0f1;
}

.quantity {
  color: var(--primary-dark);
  background: #fff4f4;
  border-color: #efcaca;
}

.add.secondary {
  color: var(--primary-dark);
  background: #fff0f0;
}

.toast {
  background: #4b2727;
}

.modal-backdrop {
  background: #3a141485;
}

.filter-sheet header button, .modal-card header button {
  background: var(--primary-soft);
  color: var(--primary);
}

.filter-panel select {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 10px;
  width: 100%;
  height: 42px;
  padding: 0 9px;
}

.popular-category-links {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 17px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 17px;
  display: flex;
}

.popular-category-links b {
  text-align: center;
  width: 100%;
  font-size: 12px;
}

.popular-category-links a {
  background: var(--primary-soft);
  color: var(--primary-dark);
  border-radius: 99px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 700;
}

.main-image, .cart-image {
  background: #fff3f3;
}

.benefits > div, .description-grid > div, .cart-line, .cart-summary, .checkout-card, .address-card, .order-card, .order-overview > div, .order-section, .settings-card, .profile-menu {
  border-color: #f0e0e0;
  box-shadow: 0 7px 22px #56222209;
}

.delivery-progress {
  color: var(--primary-dark);
  background: #fff0f0;
}

.delivery-progress span {
  background: #f1cccc;
}

.delivery-progress.complete {
  color: var(--success);
  background: #eaf7f0;
}

.delivery-progress.complete i {
  background: var(--success);
}

.smart-cart {
  border-top: 1px solid var(--border);
  margin-top: 22px;
  padding-top: 14px;
}

.smart-cart .products {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-bottom: 0;
}

.smart-cart .product:nth-child(n+3) {
  display: none;
}

.checkout-summary {
  top: 90px;
}

.address-add-link {
  color: var(--primary);
  margin-top: 10px;
  font-size: 12px;
  font-weight: 750;
  display: inline-flex;
}

.delivery-option, .payment-option {
  background: #fff6f6;
  border-color: #edbcbc;
}

.success-actions {
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  display: flex;
}

.success-icon {
  color: var(--success);
  background: #eaf7f0;
}

.profile-hero {
  background: linear-gradient(120deg, #a93232, #dd5656 66%, #ea8377);
  box-shadow: 0 18px 42px #7e26262e;
}

.profile-hero p, .profile-hero span {
  color: #fff0ef;
}

.profile-menu > a > span, .profile-menu > button > span {
  background: var(--primary-soft);
  color: var(--primary);
}

.segmented {
  background: #f8e8e8;
}

.auth-page {
  background: radial-gradient(circle at 50% 0, #ffecec, #0000 50%);
}

.demo-code {
  color: var(--primary-dark);
  background: #fff0f0;
}

.product-sticky {
  display: none;
}

.timeline > div {
  position: relative;
}

.timeline > div:not(:last-child):after {
  content: "";
  background: #edcaca;
  width: 2px;
  position: absolute;
  top: 18px;
  bottom: -4px;
  left: 4px;
}

.timeline > div.pending {
  opacity: .48;
}

.timeline > div.pending i {
  background: #b9aeae;
  box-shadow: 0 0 0 5px #f2eded;
}

.timeline > div.pending:after {
  background: #e4dddd;
}

.scanner-camera {
  color: #fff;
  background: #251b1b;
  border-radius: 18px;
  place-items: center;
  min-height: 300px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.scanner-camera video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.scanner-camera > span {
  z-index: 2;
  background: #1a1111ba;
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  font-size: 11px;
  display: flex;
}

.scanner-camera > i {
  z-index: 2;
  border: 2px solid #fff;
  border-radius: 14px;
  width: 72%;
  height: 120px;
  position: absolute;
  box-shadow: 0 0 0 999px #14080852;
}

.scanner-camera.ready > span {
  position: absolute;
  top: 12px;
}

.scanner-manual {
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 10px;
  margin-top: 16px;
  display: grid;
}

.scanner-manual label {
  gap: 6px;
  font-size: 11px;
  font-weight: 750;
  display: grid;
}

.scanner-manual input {
  border: 1px solid var(--border);
  border-radius: 12px;
  min-height: 48px;
  padding: 0 12px;
}

.install-prompt {
  z-index: 95;
  width: min(520px, 100vw - 32px);
  box-shadow: var(--shadow-md);
  background: #fff;
  border: 1px solid #f0d4d4;
  border-radius: 20px;
  grid-template-columns: 46px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 15px;
  display: grid;
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.install-prompt p {
  color: var(--muted);
  margin: 4px 0 0;
  font-size: 10px;
}

.ghost-button {
  color: #694545;
  cursor: pointer;
  background: #f6eeee;
  border: 0;
  border-radius: 11px;
  min-height: 42px;
  padding: 0 14px;
  font-weight: 750;
}

.admin-layout {
  background: #fff9f9;
}

.admin-sidebar nav a.active, .admin-sidebar nav a:hover {
  background: var(--primary-soft);
  color: var(--primary-dark);
}

.metric-grid article, .admin-panel, .admin-table-wrap, .integration-cards > a, .integration-hero {
  border-color: #f0e0e0;
  box-shadow: 0 7px 25px #4b191909;
}

.admin-table th {
  color: #836b6b;
  background: #fff4f4;
}

.new-order-row {
  box-shadow: inset 3px 0 var(--primary);
  background: snow;
}

.analytics-columns {
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  display: grid;
}

.analytics-columns h3 {
  color: var(--muted);
  margin: 0 0 9px;
  font-size: 11px;
}

.analytics-columns p {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  margin: 0;
  padding: 8px 0;
  font-size: 11px;
  display: flex;
}

.funnel {
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  display: grid;
}

.funnel > div {
  background: var(--primary-soft);
  border-radius: 13px;
  flex-direction: column;
  justify-content: space-between;
  min-height: 86px;
  padding: 12px;
  display: flex;
}

.funnel span {
  color: #745858;
  font-size: 10px;
}

.funnel b {
  color: var(--primary-dark);
  font-size: 23px;
}

.funnel > i {
  background: #df9c9c;
  width: 18px;
  height: 2px;
}

.icon-button {
  width: 36px;
  height: 36px;
  color: var(--primary);
  cursor: pointer;
  background: #f7eded;
  border: 0;
  border-radius: 10px;
  place-items: center;
  display: grid;
}

.icon-button svg {
  width: 16px;
}

.icon-button.danger {
  color: var(--error);
}

.home-section-admin {
  margin-top: 16px;
}

.home-section-grid {
  gap: 10px;
  display: grid;
}

.home-section-grid article {
  border: 1px solid var(--border);
  border-radius: 13px;
  grid-template-columns: minmax(130px, .8fr) 1fr 1fr 80px auto auto;
  align-items: center;
  gap: 8px;
  padding: 12px;
  display: grid;
}

.home-section-grid small {
  color: var(--muted);
  margin-top: 3px;
  display: block;
}

.home-section-grid input:not([type="checkbox"]) {
  border: 1px solid var(--border);
  border-radius: 9px;
  width: 100%;
  min-height: 40px;
  padding: 0 9px;
}

.home-section-grid label {
  align-items: center;
  gap: 5px;
  font-size: 10px;
  display: flex;
}

.promotion-list {
  gap: 9px;
  display: grid;
}

.promotion-list article {
  border: 1px solid var(--border);
  border-radius: 13px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  display: grid;
}

.promotion-list article > span {
  background: var(--primary-soft);
  color: var(--primary-dark);
  border-radius: 8px;
  padding: 7px;
  font-size: 10px;
  font-weight: 850;
}

.promotion-list b, .promotion-list small {
  display: block;
}

.promotion-list small {
  color: var(--muted);
  margin-top: 3px;
  font-size: 9px;
}

.promotion-list label {
  align-items: center;
  gap: 5px;
  font-size: 10px;
  display: flex;
}

.promotion-list input {
  accent-color: var(--primary);
}

.sync-history details {
  border-bottom: 1px solid var(--border);
}

.sync-history summary {
  cursor: pointer;
  align-items: center;
  gap: 11px;
  padding: 12px 0;
  list-style: none;
  display: flex;
}

.sync-history summary::-webkit-details-marker {
  display: none;
}

.sync-history .sync-log {
  border-top: 1px dashed var(--border);
  grid-template-columns: 110px 1fr auto;
  gap: 8px;
  margin-left: 43px;
  padding: 8px 0;
  font-size: 10px;
  display: grid;
}

.confirm-dialog {
  width: min(440px, 100%);
}

.confirm-dialog header > svg {
  width: 42px;
  height: 42px;
  color: var(--warning);
  background: #fff0e9;
  border-radius: 13px;
  padding: 10px;
}

.confirm-dialog header button {
  cursor: pointer;
  background: #f6eeee;
  border: 0;
  border-radius: 10px;
  width: 38px;
  height: 38px;
}

.confirm-dialog h2 {
  margin: 0;
}

.confirm-dialog p {
  color: var(--muted);
  line-height: 1.55;
}

.confirm-dialog > div {
  justify-content: flex-end;
  gap: 8px;
  display: flex;
}

.danger-button {
  background: var(--error);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 11px;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 15px;
  font-weight: 800;
  display: flex;
}

@media (max-width: 1000px) {
  .collection-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .home-section-grid article {
    grid-template-columns: 1fr 1fr;
  }

  .home-section-grid article > div {
    grid-column: 1 / -1;
  }

  .smart-cart .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .app-topbar {
    height: 64px;
    padding: 0 16px;
  }

  .delivery-address-wrap {
    padding: 5px 16px;
  }

  .delivery-address {
    min-height: 40px;
  }

  .home-intro {
    margin: 20px 16px 5px;
    padding: 0;
  }

  .home-intro h1 {
    font-size: 25px;
  }

  .home-intro p {
    font-size: 11px;
  }

  .promo {
    margin-top: 0;
  }

  .promo h2 {
    max-width: 235px;
    font-size: 29px;
  }

  .promo p {
    max-width: 220px;
  }

  .promo-indicator {
    bottom: 13px;
    left: 25px;
  }

  .quick-chips {
    margin: 14px 16px 0;
  }

  .collection-grid {
    scrollbar-width: none;
    display: flex;
    overflow: auto;
  }

  .collection-card {
    flex: 0 0 210px;
  }

  .notification-popover {
    top: 60px;
    right: 16px;
  }

  .address-sheet, .scanner-sheet {
    border-radius: 24px 24px 0 0;
    align-self: end;
    width: 100%;
  }

  :is(.modal-backdrop:has(.address-sheet), .modal-backdrop:has(.scanner-sheet)) {
    place-items: end center;
    padding: 0;
  }

  .scanner-camera {
    min-height: 250px;
  }

  .scanner-manual {
    grid-template-columns: 1fr;
  }

  .product-sticky {
    z-index: 18;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    background: #fffffff4;
    border: 1px solid #efcece;
    border-radius: 17px;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px;
    display: flex;
    position: fixed;
    bottom: 76px;
    left: 10px;
    right: 10px;
    box-shadow: 0 12px 40px #481a1a2e;
  }

  .product-sticky strong {
    font-size: 17px;
  }

  .product-sticky .primary-button {
    min-height: 44px;
  }

  .product-page {
    padding-bottom: 155px;
  }

  .install-prompt {
    grid-template-columns: 42px 1fr;
    width: auto;
    bottom: 79px;
    left: 12px;
    right: 12px;
  }

  .install-prompt .ghost-button, .install-prompt .primary-button {
    min-height: 38px;
  }

  .install-prompt .ghost-button {
    grid-column: 1 / 2;
  }

  .install-prompt .primary-button {
    grid-column: 2 / 3;
  }

  .smart-cart .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-columns, .funnel {
    grid-template-columns: 1fr;
  }

  .funnel > i {
    width: 2px;
    height: 12px;
    margin: auto;
  }

  .home-section-grid article {
    grid-template-columns: 1fr;
  }

  .home-section-grid article > div {
    grid-column: auto;
  }

  .sync-history .sync-log {
    grid-template-columns: 1fr;
    margin-left: 0;
  }

  .admin-sidebar nav {
    scrollbar-width: none;
    padding-bottom: 3px;
  }

  .admin-sidebar {
    border-bottom: 1px solid var(--border);
  }

  .admin-page {
    background: snow;
  }
}

@media (max-width: 430px) {
  .home-intro h1 {
    font-size: 23px;
  }

  .collection-card {
    flex-basis: 190px;
  }

  .quick-chips a {
    padding: 9px 11px;
  }

  .promo h2 {
    font-size: 26px;
  }

  .promo-art {
    opacity: .68;
  }

  .scanner-sheet, .address-sheet {
    padding: 18px;
  }

  .smart-cart .products {
    grid-template-columns: 1fr 1fr;
  }

  .smart-cart .product:nth-child(n+3) {
    display: none;
  }
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

/*# sourceMappingURL=app_globals_0yg4wg8.css.map*/