@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/cases/previews/assets/fccca918fea40089daca.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/cases/previews/assets/aebf2ab4a4ce6810d73c.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/cases/previews/assets/a2e2c783ca6f9c20486e.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/cases/previews/assets/46dd4cdca58c26ae87cc.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/cases/previews/assets/8db00ff46c67b22cda8b.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/cases/previews/assets/a28eb6d3ccb534ae0c94.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/cases/previews/assets/c940764593d0fe5d596b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/cases/previews/assets/fccca918fea40089daca.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/cases/previews/assets/aebf2ab4a4ce6810d73c.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/cases/previews/assets/a2e2c783ca6f9c20486e.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/cases/previews/assets/46dd4cdca58c26ae87cc.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/cases/previews/assets/8db00ff46c67b22cda8b.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/cases/previews/assets/a28eb6d3ccb534ae0c94.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/cases/previews/assets/c940764593d0fe5d596b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/cases/previews/assets/fccca918fea40089daca.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/cases/previews/assets/aebf2ab4a4ce6810d73c.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/cases/previews/assets/a2e2c783ca6f9c20486e.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/cases/previews/assets/46dd4cdca58c26ae87cc.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/cases/previews/assets/8db00ff46c67b22cda8b.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/cases/previews/assets/a28eb6d3ccb534ae0c94.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/cases/previews/assets/c940764593d0fe5d596b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/cases/previews/assets/fccca918fea40089daca.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/cases/previews/assets/aebf2ab4a4ce6810d73c.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/cases/previews/assets/a2e2c783ca6f9c20486e.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/cases/previews/assets/46dd4cdca58c26ae87cc.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/cases/previews/assets/8db00ff46c67b22cda8b.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/cases/previews/assets/a28eb6d3ccb534ae0c94.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/cases/previews/assets/c940764593d0fe5d596b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@font-face {
  font-family: 'Prata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/cases/previews/assets/4430b5c7fa62fe0508aa.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Prata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/cases/previews/assets/a334ddd4e1590fa35014.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Prata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/cases/previews/assets/debcc22474c88ba96e78.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Prata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/cases/previews/assets/8585ed0b108281be14a4.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/cases/previews/assets/d7f9db9b1034978ebebd.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/cases/previews/assets/8fa67d5f0ab2a1d0b924.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/cases/previews/assets/5628567856d60d714e7a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/cases/previews/assets/5d91eb5d522a03081946.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/cases/previews/assets/d7f9db9b1034978ebebd.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/cases/previews/assets/8fa67d5f0ab2a1d0b924.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/cases/previews/assets/5628567856d60d714e7a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/cases/previews/assets/5d91eb5d522a03081946.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}





:root {
  --bg: #ffffff;
  --card: #ffffff;
  --soft: #f3f4f6;
  --field: #f3f3f3;
  --line: #dedede;
  --panel: #f6f6f8;
  --ink: #111827;
  --weak: #9ea3ae;
  --accent: #fe6230;
  --green: #16a34a;
  --dark: #111827;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Helvetica Neue', 'Inter', -apple-system, sans-serif;
  background: #e9eaee;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.screen {
  position: relative;
  width: 375px;
  height: 812px;
  background: var(--bg);
  overflow: hidden;
  flex-shrink: 0;
}

.content {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 84px;
}

.content::-webkit-scrollbar {
  display: none;
}

img {
  display: block;
}

button {
  font-family: 'Helvetica Neue', 'Inter', sans-serif;
  cursor: pointer;
}


.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 0;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.header__logo img {
  width: 26px;
  height: 21px;
  object-fit: contain;
}

.header__logo span {
  font-family: 'Prata', Georgia, serif;
  font-size: 19px;
  line-height: 1;
  color: var(--ink);
}

.header__avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
}

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

.header__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.header__search {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: var(--field);
}

.header__search .ph {
  font-size: 18px;
  color: var(--weak);
}

.header__bell {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: var(--field);
}

.header__bell .ph {
  font-size: 18px;
  color: var(--ink);
}

.header__dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid var(--field);
}


.intro {
  margin: 14px 16px 0;
}

.intro__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.2px;
  color: var(--ink);
}

.intro__sub {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--weak);
}


.hero {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 16px 0;
  padding: 12px;
  background: var(--panel);
  border-radius: 8px;
}

.hero__top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero__grid {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(2, 40px);
  gap: 4px;
}

.hero__tile {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.hero__tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.hero__tile--more {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  color: var(--accent);
}

.hero__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero__due {
  font-size: 10px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}

.hero__timer {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(254, 98, 48, 0.1);
  font-weight: 700;
  font-size: 11px;
  color: var(--accent);
  white-space: nowrap;
}

.hero__timer .ph {
  font-size: 12px;
}

.hero__extend {
  width: 100%;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  color: #ffffff;
}

.hero__extend s {
  font-weight: 500;
  text-decoration: line-through;
  opacity: 0.75;
}


.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.brands .section-head,
.benefits .section-head {
  padding: 0;
}

.section-head__title {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--ink);
}

.section-head__link {
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  color: var(--weak);
  text-decoration: none;
}


.crosssell {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 16px 0;
  padding: 9px;
  border-radius: 8px;
  background: var(--panel);
}

.crosssell__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #ffffff;
}

.crosssell__icon .ph {
  font-size: 18px;
  color: var(--ink);
}

.crosssell__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.crosssell__title {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink);
}

.crosssell__note {
  font-size: 10px;
  line-height: 1;
  color: var(--weak);
}

.crosssell__btn {
  flex-shrink: 0;
  padding: 6px 11px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  color: #ffffff;
}


.again {
  margin-top: 16px;
}

.again__row {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.again__row::-webkit-scrollbar {
  display: none;
}

.again-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px 6px 6px;
  border: none;
  border-radius: 8px;
  background: var(--panel);
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}

.again-chip__img {
  width: 25px;
  height: 25px;
  padding: 2px;
  border-radius: 8px;
  background: #ffffff;
  object-fit: contain;
}


.popular {
  margin-top: 16px;
}

.cards {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  padding: 0 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 16px;
  scrollbar-width: none;
}

.cards::-webkit-scrollbar {
  display: none;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 176px;
  flex-shrink: 0;
  scroll-snap-align: start;
  padding: 12px;
  background: var(--panel);
  border-radius: 8px;
}

.card__image {
  position: relative;
  width: 100%;
  height: 135px;
  flex-shrink: 0;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.card__image > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.card__new {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  padding: 3px 7px;
  border-radius: 8px;
  background: var(--accent);
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
  color: #ffffff;
}

.card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card__title {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: -0.1px;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.card__rating {
  display: flex;
  align-items: center;
  gap: 3px;
  font-weight: 500;
  font-size: 10px;
  line-height: 1;
  color: var(--ink);
}

.card__rating .ph {
  font-size: 11px;
  color: #f59e0b;
}

.card__avail {
  font-weight: 500;
  font-size: 10px;
  line-height: 1;
  color: var(--green);
}

.price {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-top: auto;
  white-space: nowrap;
}

.price__value {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}

.price__note {
  font-weight: 400;
  font-size: 10px;
  line-height: 1.5;
  color: #636363;
}


.brands {
  margin: 16px 16px 0;
  padding: 12px;
  background: var(--panel);
  border-radius: 8px;
}

.brands__row {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.brands__row::-webkit-scrollbar {
  display: none;
}

.brand {
  flex-shrink: 0;
  padding: 7px 11px;
  border: none;
  border-radius: 8px;
  background: var(--card);
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  color: var(--ink);
}


.nearby {
  margin-top: 16px;
}

.nearby__row {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.nearby__row::-webkit-scrollbar {
  display: none;
}

.point {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 8px 9px;
  background: var(--panel);
  border-radius: 8px;
}

.point__icon {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #ffffff;
}

.point__icon .ph {
  font-size: 14px;
  color: var(--weak);
}

.point__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.point__name {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink);
}

.point__addr {
  font-size: 10px;
  line-height: 1.4;
  color: var(--weak);
  white-space: nowrap;
}


.benefits {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 16px 0;
  padding: 12px;
  background: var(--panel);
  border-radius: 8px;
}

.bonus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 11px;
  border-radius: 8px;
  background: var(--accent);
}

.bonus__amount {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  color: #ffffff;
}

.bonus__amount .ph {
  font-size: 15px;
}

.bonus__btn {
  flex-shrink: 0;
  padding: 7px 9px;
  border: none;
  border-radius: 8px;
  background: #ffffff;
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  color: var(--accent);
}

.promo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px;
  border-radius: 8px;
  background: var(--card);
}

.promo__badge {
  flex-shrink: 0;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(254, 98, 48, 0.1);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  color: var(--accent);
}

.promo__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.promo__name {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink);
}

.promo__note {
  font-size: 10px;
  line-height: 1.4;
  color: var(--weak);
}

.promo__link {
  flex-shrink: 0;
  padding: 6px 9px;
  border-radius: 8px;
  background: var(--dark);
  font-weight: 600;
  font-size: 10px;
  line-height: 1;
  color: #ffffff;
  text-decoration: none;
}


.bottombar {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 20;
}

.tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 56px;
  padding: 6px;
  border-radius: 28px;
  background: #17181c;
}

.tab {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 22px;
  text-decoration: none;
  color: #ffffff;
}

.tab__icon {
  font-size: 20px;
  line-height: 1;
}

.tab__label {
  display: none;
}

.tab--active {
  flex: 0 0 auto;
  gap: 8px;
  padding: 0 18px;
  background: #ffffff;
  color: var(--ink);
}

.tab--active .tab__label {
  display: block;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.2px;
}

.tab__badge {
  position: absolute;
  top: 9px;
  left: calc(50% + 4px);
  width: 13px;
  height: 13px;
  background: var(--accent);
  border: 1.5px solid #17181c;
  border-radius: 50%;
  text-align: center;
  font-weight: 600;
  font-size: 9px;
  line-height: 10px;
  color: #ffffff;
}

html{color-scheme:light}*,*::before,*::after{animation:none!important;transition:none!important;caret-color:transparent!important}body{min-width:375px}a,button,input,select,textarea{pointer-events:none}