/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[13].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"Rubik","arguments":[{"subsets":["latin","cyrillic"],"variable":"--font-rubik","display":"swap"}],"variableName":"rubik"} ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* arabic */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/_next/static/media/32c80fb7588b7a2e-s.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/_next/static/media/60181e10ad16e354-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/_next/static/media/c1b11e140b58cf5a-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* hebrew */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/_next/static/media/99e31c27a1524300-s.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/_next/static/media/5b25d60b4670300e-s.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/_next/static/media/0a86735c6520d94f-s.p.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: 'Rubik Fallback';src: local("Arial");ascent-override: 89.06%;descent-override: 23.81%;line-gap-override: 0.00%;size-adjust: 104.98%
}.__className_aea418 {font-family: 'Rubik', 'Rubik Fallback';font-style: normal
}.__variable_aea418 {--font-rubik: 'Rubik', 'Rubik Fallback'
}

/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
:root {
  --bg: #f5f7fb;
  --bg-soft: #ffffff;
  --text: #1f2533;
  --muted: #6a7388;
  --brand: #ff5f5f;
  --brand-soft: #ffe5e5;
  --line: #e4e8f0;
  --shadow: 0 8px 24px rgba(31, 37, 51, 0.08);
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
}

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  background: radial-gradient(circle at top right, #ffeef0 0%, var(--bg) 45%), var(--bg);
  color: var(--text);
}

body {
  font-family: var(--font-rubik), "Rubik", sans-serif;
}

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

main {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 12px 12px 40px;
}

.card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.section-title {
  margin: 0 0 12px;
  font-size: 1.2rem;
  overflow-wrap: anywhere;
}

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

.grid > * {
  min-width: 0;
}

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

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

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

.home-page {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.home-about {
  padding: clamp(12px, 3.2vw, 16px);
}

.home-about__title {
  margin: 0 0 10px;
  font-size: clamp(2rem, 7vw, 2.8rem);
  line-height: 1.05;
}

.home-about__media {
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #fff;
  margin-bottom: 12px;
  overflow: hidden;
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 1;
}

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

.home-about__item {
  margin: 0;
  font-size: clamp(1rem, 3.2vw, 1.2rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.home-quick-links-card {
  padding: clamp(10px, 3vw, 14px);
}

.home-quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.home-quick-links__item {
  display: grid;
  justify-items: center;
  grid-gap: 8px;
  gap: 8px;
  min-width: 0;
}

.home-quick-links__icon {
  width: clamp(46px, 14vw, 62px);
  height: clamp(46px, 14vw, 62px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-soft);
  font-size: clamp(18px, 5.4vw, 24px);
}

.home-quick-links__label {
  text-align: center;
  font-size: clamp(11px, 3.2vw, 12px);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.product-card {
  overflow: hidden;
  width: 100%;
  min-width: 0;
}

.product-card__media {
  aspect-ratio: 1 / 1;
}

.product-card__body {
  padding: 12px;
  min-width: 0;
}

.product-card__type {
  font-size: 12px;
  color: var(--muted);
}

.product-card__title {
  margin: 4px 0 8px;
  font-size: 16px;
  overflow-wrap: anywhere;
}

.product-card__description {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.product-card__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
}

.product-card__price {
  font-size: 18px;
  white-space: nowrap;
}

.product-card__button {
  margin: 0;
  max-width: 100%;
}

.button,
button {
  border: 0;
  border-radius: 999px;
  padding: 12px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.button.primary,
button.primary {
  background: var(--brand);
  color: #fff;
}

.button.secondary,
button.secondary {
  background: var(--brand-soft);
  color: #9d3131;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  font: inherit;
  background: #fff;
}

label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.form-group {
  margin-bottom: 12px;
}

.text-muted {
  color: var(--muted);
}

.site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 30;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.site-header__inner {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 12px;
}

.site-nav {
  padding: 10px 12px;
}

.site-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.site-nav__brand {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.site-nav__links {
  order: 3;
  width: 100%;
  display: none;
  margin-top: 2px;
  grid-template-columns: 1fr;
  gap: 8px;
}

.site-nav__links.is-open {
  display: grid;
}

.site-nav__link {
  text-align: center;
  padding: 11px 8px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
}

.site-nav__link.is-active {
  background: var(--brand-soft);
  color: #9d3131;
  font-weight: 700;
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.site-nav__cart svg {
  width: 20px;
  height: 20px;
}

.site-nav__cart.is-active {
  background: var(--brand-soft);
  color: #9d3131;
  border-color: #ffc9c9;
}

.site-nav__cart-badge {
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  position: absolute;
  top: 2px;
  right: 2px;
  padding: 0 5px;
  line-height: 1;
}

.site-nav__toggle {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  display: grid;
  align-content: center;
  justify-items: center;
  grid-gap: 5px;
  gap: 5px;
  padding: 0;
}

.site-nav__toggle span {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--text);
}

@media (min-width: 640px) {
  .home-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  main {
    padding: 20px 18px 56px;
  }

  .grid.cols-2 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-nav {
    padding: 10px;
  }

  .site-nav__bar {
    flex-wrap: nowrap;
    gap: 14px;
  }

  .site-nav__links {
    order: 0;
    width: auto;
    margin-top: 0;
    align-items: center;
    justify-content: center;
    gap: 10px;
    display: flex;
    flex: 1 1;
  }

  .site-nav__link {
    padding: 10px 14px;
    white-space: nowrap;
  }

  .site-nav__toggle {
    display: none;
  }

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

@media (max-width: 430px) {
  .home-about__media {
    aspect-ratio: 2 / 1;
  }

  .product-card__footer {
    grid-template-columns: 1fr;
  }

  .product-card__button {
    width: 100%;
  }
}
.catalog-layout {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.filter-accordion {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 10px;
}

.filter-accordion > summary {
  cursor: pointer;
  list-style: none;
  font-weight: 500;
}

.filter-accordion > summary::-webkit-details-marker {
  display: none;
}

.filter-accordion__content {
  margin-top: 10px;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.filter-options-list {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
}

.filter-option {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  text-align: left;
  font-size: 14px;
  line-height: 1.2;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-option.active {
  border-color: #ffc9c9;
  background: var(--brand-soft);
  color: #9d3131;
}

.color-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(31, 37, 51, 0.2);
  flex-shrink: 0;
}

@media (min-width: 960px) {
  .catalog-layout {
    grid-template-columns: 280px 1fr;
    align-items: start;
  }
}

