:root {
  --color-primary: #0866FF;
  --color-accent: #1877F2;
  --color-gradient-start: #0062E3;
  --color-gradient-end: #1877F2;
  --color-success: #42B72A;
  --color-text-main: #292929;
  --color-text-muted: #646464;
  --color-white: #ffffff;
  --color-base-light: #F6F6F6;
  --color-bg-button: var(--color-base-light);
  --color-bg-gray: #eee;
  --color-border: #B7B7B7;
  --color-border-alt: #CBCBCB;
  --color-border-gray: #E8E8E8;
  --color-border-light: #ebebeb;
  --color-accent-rgb: 24, 119, 242;
  --color-main-rgb: 41, 41, 41;
}

:root {
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --layout-margin: var(--spacing-xxs);

  --fw-regular: 400;
  --fw-bold: 600;

  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-xl: 24px;
}

.u-text-center {
  text-align: center;
  justify-content: center;
}

.u-text-left {
  text-align: left;
  justify-content: flex-start;
}

.u-text-right {
  text-align: right;
  justify-content: flex-end;
}

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

body {
  width: 100%;
  max-width: 480px;
  min-width: 375px;
  color: var(--color-text-main);
  font-family: 'Inter', sans-serif;
  text-size-adjust: none;
  line-height: 24px;
  margin: 0 auto;
  background: var(--color-border-gray);
}

.block1,
.block_price-new,
.block_global {
  margin-left: var(--layout-margin);
  margin-right: var(--layout-margin);
}

.block_price-new {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 12px);
  padding: 24px;
  border-radius: 12px;
  margin-top: -15px;
  background: var(--color-bg-button);
}

.block_global {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  padding: 48px 24px;
  border-radius: 16px;
  margin-top: 8px;
  background: var(--color-bg-button);
}

.quantity {
  color: var(--color-text-main);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  font-style: normal;
  line-height: 124%;
  margin-top: 0;
}

.foot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  color: var(--color-text-main);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  font-style: normal;
  line-height: 100%;
  padding: 12px 24px;
  background: var(--color-border-gray);
}

.foot a {
  display: block;
  color: var(--color-text-main);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  font-style: normal;
  line-height: 100%;
  text-decoration-line: underline;
  transition: color 0.2s ease;
}

.foot a:hover {
  color: var(--color-accent);
}

#section2-items,
#quality-items,
#procedure-items {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl, 32px);
}

#quality-items,
#procedure-items {
  gap: var(--spacing-lg, 24px);
}