@layer reset, tokens, shell, blocks, narrow;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; }
  img { max-inline-size: 100%; block-size: auto; display: block; }
  button { font: inherit; }
  table { border-collapse: collapse; }
}

@layer tokens {
  :root {
    --yl-pop: #ff1dc3;      /* лого: маджента */
    --yl-pop-deep: #d4009e;
    --yl-gum: #ff82d9;      /* лого: светлая обводка */
    --yl-blush: #ffe5e7;    /* лого: розовая тень */
    --yl-mint: #56e5dc;     /* баннер: бирюза */
    --yl-lime: #ccf328;     /* плашки стора */
    --yl-plum: #5a1745;     /* баннер: слива, затемнена */
    --yl-night: #33152c;    /* футер */
    --yl-ink: #2a1626;
    --yl-soft: #6f5568;
    --yl-rule: #f1d7e7;
    --yl-sheet: #ffffff;
    --yl-wrap: 1320px;
    --yl-r: 16px;
    --yl-head: "Oswald", "Arial Narrow", sans-serif;
    --yl-body: "Quicksand", "Segoe UI", sans-serif;
  }
}

@layer shell {
  body { background: var(--yl-sheet); color: var(--yl-ink); font: 500 17px/1.6 var(--yl-body); }
  a { color: var(--yl-pop-deep); }
  h1, h2, h3 { font-family: var(--yl-head); font-weight: 600; line-height: 1.15; color: var(--yl-ink); }
  main > section, main > nav, main > article, main > div { margin-inline: auto; max-inline-size: var(--yl-wrap); padding-inline: 24px; }

  .yl-topline { background: var(--yl-plum); color: #fff; text-align: center; }
  .yl-topline p { margin: 0; padding: 7px 16px; font: 600 14px/1.3 var(--yl-head); letter-spacing: .03em; text-transform: uppercase; }

  .yl-head { position: sticky; inset-block-start: 0; z-index: 30; background: #fff; border-block-end: 1px solid var(--yl-rule); }
  .yl-head__row { max-inline-size: var(--yl-wrap); margin-inline: auto; padding: 8px 24px; display: flex; align-items: center; gap: 22px; }
  .yl-head__logo img { inline-size: 112px; block-size: auto; }
  .yl-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; }
  .yl-nav a { font: 500 17px/1 var(--yl-head); text-transform: uppercase; color: var(--yl-ink); text-decoration: none; padding: 10px 0; display: inline-block; letter-spacing: .02em; }
  .yl-nav a:hover, .yl-nav a[aria-current] { color: var(--yl-pop); }
  .yl-head__cta { margin-inline-start: auto; }
  .yl-burger { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
  .yl-burger span { display: block; inline-size: 26px; block-size: 3px; background: var(--yl-plum); margin-block: 5px; border-radius: 2px; }

  .yl-scoop { background: none; border: 0; padding: 0; line-height: 0; cursor: pointer; inline-size: min(300px, 100%); transition: transform .15s; }
  .yl-scoop img { inline-size: 100%; block-size: auto; }
  .yl-scoop:hover { transform: translateY(-2px); }
  .yl-scoop:focus-visible { outline: 3px solid var(--yl-mint); outline-offset: 3px; border-radius: 40px; }
  .yl-scoop--head { inline-size: 196px; }
  .yl-scoop--card { inline-size: 100%; margin-block-start: auto; }

  .yl-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 0; margin: 18px 0 6px; font-size: 14px; }
  .yl-crumbs li + li::before { content: "›"; margin-inline-end: 8px; color: var(--yl-soft); }
  .yl-crumbs a { color: var(--yl-soft); display: inline-block; padding: 6px 0; }

  .yl-stripe { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; padding: 0 12px; margin-block-start: 64px; }
  .yl-stripe i { block-size: 12px; }
  .yl-stripe i:nth-child(3n+1) { background: var(--yl-mint); }
  .yl-stripe i:nth-child(3n+2) { background: var(--yl-lime); }
  .yl-stripe i:nth-child(3n) { background: var(--yl-pop); }
  .yl-foot { background: var(--yl-night); color: #f4e6ef; }
  .yl-foot__cols { max-inline-size: 1200px; margin-inline: auto; padding: 36px 24px 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
  .yl-foot__h { color: #fff; font: 700 30px/1.15 var(--yl-head); margin: 0 0 12px; }
  .yl-foot ul { list-style: none; margin: 0; padding: 0; }
  .yl-foot li a, .yl-foot p a { color: #f4e6ef; text-decoration: none; font-size: 15px; display: inline-block; padding: 5px 0; }
  .yl-foot li a:hover { color: var(--yl-gum); }
  .yl-foot address { font-style: normal; font-size: 15px; line-height: 1.6; }
  .yl-foot__mail img { inline-size: 150px; margin-block-start: 10px; background: #fff; border-radius: 12px; padding: 4px 10px; }
  .yl-foot__line { max-inline-size: 1200px; margin: 0 auto; padding: 18px 24px 26px; border-block-start: 1px solid #5d3a54; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #c9adc0; }

  .yl-dock { display: none; }
}

@layer blocks {
  /* хиро-баннер коллекции */
  .yl-hero { padding-inline: 0; max-inline-size: none; }
  .yl-hero__pic img { inline-size: 100%; aspect-ratio: 5 / 1; object-fit: cover; }
  .yl-hero__band { max-inline-size: var(--yl-wrap); margin-inline: auto; padding: 26px 24px 8px; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px 40px; align-items: center; }
  .yl-hero__band h1 { font-size: 42px; margin: 0 0 10px; }
  .yl-hero__band p { margin: 0; max-inline-size: 760px; }
  .yl-hero__buy { text-align: center; min-inline-size: 0; }
  .yl-hero__note { font-size: 14px; color: var(--yl-soft); margin-block-start: 8px; }

  /* доска персонажей */
  .yl-board h2, .yl-coll__h, .yl-like h2, .yl-revs h2, .yl-cast h2 { font-size: 40px; text-align: center; margin: 56px 0 8px; }
  .yl-board__sub { text-align: center; color: var(--yl-soft); margin: 0 0 12px; }
  .yl-board__ser { font: 600 20px/1.2 var(--yl-head); text-align: center; margin: 26px 0 12px; }
  .yl-board__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
  .yl-board__grid--list { grid-template-columns: repeat(5, 1fr); margin-block-end: 10px; }
  .yl-board__grid a, .yl-board__off { display: block; background: var(--yl-plum); padding: 6px 6px 8px; border-radius: 6px; text-decoration: none; position: relative; }
  .yl-board__plate { display: block; color: #fff; text-align: center; font: 500 15px/1.2 var(--yl-head); padding: 3px 2px 7px; }
  .yl-board__grid img { border-radius: 3px; aspect-ratio: 1; object-fit: cover; background: #fff; }
  .yl-board__off { opacity: .78; }
  .yl-board__off em { position: absolute; inset-block-start: 44px; inset-inline-end: 12px; background: #fff; color: var(--yl-plum); font: 600 12px/1 var(--yl-body); padding: 5px 10px; border-radius: 20px; font-style: normal; white-space: nowrap; }

  /* коллекция */
  .yl-shelf { display: grid; grid-template-columns: 270px 1fr; gap: 28px; align-items: start; margin-block-start: 18px; }
  .yl-filter { border: 1px solid var(--yl-rule); border-radius: 22px; padding: 18px 22px; position: sticky; inset-block-start: 110px; }
  .yl-filter__h { font: 600 30px/1.15 var(--yl-head); margin: 0 0 6px; }
  .yl-filter fieldset { border: 0; padding: 0; margin: 14px 0 0; }
  .yl-filter legend { font: 600 22px/1.2 var(--yl-head); margin-block-end: 8px; }
  .yl-filter label { display: flex; gap: 10px; align-items: center; padding: 6px 0; cursor: pointer; font-size: 16px; }
  .yl-filter input { inline-size: 20px; block-size: 20px; accent-color: var(--yl-pop); }
  .yl-shelf__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-block-end: 14px; }
  .yl-sort select { margin-inline-start: 8px; padding: 9px 14px; border: 1px solid var(--yl-ink); border-radius: 30px; font: 600 15px var(--yl-body); background: #fff; }
  .yl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .yl-card { display: flex; flex-direction: column; border: 1px solid var(--yl-rule); border-radius: var(--yl-r); padding: 14px; background: #fff; }
  .yl-card.yl-gone { display: none; }
  .yl-card__pic img { aspect-ratio: 1; object-fit: contain; }
  .yl-card__name { font: 600 16px/1.3 var(--yl-body); margin: 10px 0 8px; }
  .yl-card__name a { color: var(--yl-ink); text-decoration: none; }
  .yl-card__meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
  .yl-price { font: 700 23px/1 var(--yl-head); color: var(--yl-ink); }
  .yl-stars { color: #f2c11d; letter-spacing: 1px; }
  .yl-card__rate small { color: var(--yl-soft); margin-inline-start: 4px; }
  .yl-card__av { margin: 8px 0 12px; }
  .yl-tag { font: 600 13px/1 var(--yl-body); padding: 5px 10px; border-radius: 20px; display: inline-block; }
  .yl-tag--ok { background: #e3fbf9; color: #0d6f69; }
  .yl-tag--low { background: var(--yl-blush); color: #b0005f; }
  .yl-tag--pre { background: #f4fcd3; color: #4d5e00; }

  /* новинка (статья) */
  .yl-news { max-inline-size: 980px; margin-block-start: 60px; }
  .yl-news__kick { font: 600 15px var(--yl-head); color: var(--yl-pop); text-transform: uppercase; margin: 0; }
  .yl-news h2 { font-size: 34px; margin: 6px 0 14px; }
  .yl-news__pic { margin-block: 18px; border-radius: 10px; }
  .yl-news__get { font-weight: 700; }
  .yl-more { display: inline-block; font: 600 17px var(--yl-head); text-transform: uppercase; padding: 8px 0; }

  /* таблица персонажей (fandom) */
  .yl-cast > p { text-align: center; color: var(--yl-soft); }
  .yl-table { inline-size: 100%; max-inline-size: 980px; margin: 16px auto 0; font-size: 15px; }
  .yl-table th { background: var(--yl-plum); color: #fff; font: 500 15px var(--yl-head); text-align: start; padding: 10px 12px; letter-spacing: .03em; }
  .yl-table td { padding: 9px 12px; border-block-end: 1px solid var(--yl-rule); vertical-align: top; }
  .yl-table tbody tr:nth-child(even) { background: #fff6fb; }

  /* отзывы */
  .yl-revs__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-block-start: 16px; }
  .yl-rev { margin: 0; border: 1px solid var(--yl-rule); border-radius: var(--yl-r); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
  .yl-rev__top b { display: block; font-family: var(--yl-head); font-weight: 500; font-size: 19px; }
  .yl-rev blockquote { margin: 0; font-size: 15.5px; flex: 1; }
  .yl-rev figcaption { font-size: 13.5px; color: var(--yl-soft); }

  /* текст в духе вики-раздела */
  .yl-wiki { max-inline-size: 980px; margin-block-start: 56px; }
  .yl-wiki h2 { font-size: 40px; margin: 0 0 10px; }
  .yl-wiki h3 { font: italic 600 25px/1.2 var(--yl-head); border-block-end: 2px solid var(--yl-gum); padding-block-end: 6px; margin: 30px 0 10px; }
  .yl-wiki__fig { margin: 18px 0; }
  .yl-wiki__fig img { border-radius: 10px; }

  .yl-faq { max-inline-size: 980px; margin-block-start: 48px; }
  .yl-faq h2 { font-size: 34px; }
  details { border-block-end: 1px solid var(--yl-rule); }
  summary { cursor: pointer; padding: 14px 0; font: 600 18px/1.3 var(--yl-body); list-style-position: inside; }
  details p { margin: 0 0 14px; }

  .yl-like__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-block-start: 18px; }

  .yl-close { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: center; margin-block-start: 60px; }
  .yl-close img { border-radius: 14px; }
  .yl-close h2 { font-size: 36px; margin: 0 0 8px; }

  /* категории */
  .yl-catban img { inline-size: 100%; aspect-ratio: 3 / 1; object-fit: cover; border-radius: 14px; }
  .yl-cathead h1 { font-size: 44px; margin: 22px 0 6px; }
  .yl-cathead p { max-inline-size: 860px; margin: 0; }

  /* карточка куклы */
  .yl-pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; margin-block-start: 10px; }
  .yl-gal > input { position: absolute; opacity: 0; pointer-events: none; }
  .yl-gal__stage { border: 1px solid var(--yl-rule); border-radius: var(--yl-r); overflow: hidden; }
  .yl-gal__big { display: none; }
  .yl-gal__big img { aspect-ratio: 1; object-fit: contain; inline-size: 100%; }
  .yl-gal > input:nth-of-type(1):checked ~ .yl-gal__stage .yl-gal__big:nth-child(1),
  .yl-gal > input:nth-of-type(2):checked ~ .yl-gal__stage .yl-gal__big:nth-child(2),
  .yl-gal > input:nth-of-type(3):checked ~ .yl-gal__stage .yl-gal__big:nth-child(3),
  .yl-gal > input:nth-of-type(4):checked ~ .yl-gal__stage .yl-gal__big:nth-child(4),
  .yl-gal > input:nth-of-type(5):checked ~ .yl-gal__stage .yl-gal__big:nth-child(5) { display: block; }
  .yl-gal__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-block-start: 10px; }
  .yl-gal__thumbs label { cursor: pointer; border: 2px solid var(--yl-rule); border-radius: 10px; overflow: hidden; }
  .yl-gal__thumbs img { aspect-ratio: 1; object-fit: cover; }
  .yl-pdp__ser { font: 600 15px var(--yl-head); text-transform: uppercase; color: var(--yl-pop); margin: 0; }
  .yl-pdp h1 { font-size: 38px; margin: 6px 0 10px; }
  .yl-pdp__rate { margin: 0 0 10px; color: var(--yl-soft); }
  .yl-pdp__price { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
  .yl-pdp__price .yl-price { font-size: 38px; }
  .yl-pdp__info .yl-scoop { inline-size: min(360px, 100%); }
  .yl-pdp__fine { font-size: 13.5px; color: var(--yl-soft); }
  .yl-infobox { border: 2px solid var(--yl-gum); border-radius: 10px; inline-size: min(380px, 100%); margin-block-start: 16px; font-size: 15px; }
  .yl-infobox caption { background: var(--yl-pop); color: #fff; font: 600 19px var(--yl-head); padding: 8px; border-radius: 8px 8px 0 0; }
  .yl-infobox th { text-align: start; padding: 7px 12px; inline-size: 38%; color: var(--yl-soft); font-weight: 600; }
  .yl-infobox td { padding: 7px 12px; }
  .yl-infobox tr + tr { border-block-start: 1px solid var(--yl-rule); }
  .yl-story { display: grid; grid-template-columns: 1.6fr 1fr; gap: 34px; margin-block-start: 44px; }
  .yl-story h2 { font-size: 32px; margin: 0 0 10px; }
  .yl-story li { margin-block-end: 6px; }
  .yl-box { background: var(--yl-blush); border-radius: var(--yl-r); padding: 18px 22px; align-self: start; }
  .yl-box h3 { margin: 0 0 8px; font-size: 24px; }
  .yl-box ul { margin: 0; padding-inline-start: 20px; }
  .yl-again { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--yl-plum); color: #fff; border-radius: var(--yl-r); padding: 22px 30px; margin-block-start: 44px; }
  .yl-again h2 { color: #fff; margin: 0; font-size: 30px; }
  .yl-again p { margin: 4px 0 0; }

  /* статьи, сервисные */
  .yl-art, .yl-svc { max-inline-size: 900px; }
  .yl-art h1, .yl-svc h1 { font-size: 44px; margin: 20px 0 12px; }
  .yl-art h2, .yl-svc h2 { font-size: 28px; margin: 30px 0 8px; }
  .yl-art__lede { font-size: 19px; }
  .yl-art figure, .yl-svc figure { margin: 22px 0; }
  .yl-art figure img, .yl-svc figure img { border-radius: 12px; }
  .yl-inline { display: grid; grid-template-columns: 180px 1fr; gap: 18px; border: 2px solid var(--yl-gum); border-radius: var(--yl-r); padding: 16px; margin: 20px 0; }
  .yl-inline h2 { font-size: 22px; margin: 2px 0 6px; }
  .yl-inline h2 a { color: var(--yl-ink); }
  .yl-inline p { margin: 0 0 8px; font-size: 15.5px; }
  .yl-inline__k { font: 600 13px var(--yl-head); text-transform: uppercase; color: var(--yl-pop); }
  .yl-inline__p { font-weight: 700; }
  .yl-steps li { margin-block-end: 10px; }
  .yl-pair h2 { text-align: center; }
  .yl-pair .yl-like__row { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; }
  .yl-svc__addr { font-style: normal; background: var(--yl-blush); border-radius: 12px; padding: 14px 18px; display: inline-block; }
  .yl-svc__date { color: var(--yl-soft); font-size: 14px; }
  .yl-404 { text-align: center; padding-block: 60px; }
  .yl-404 h1 { font-size: 46px; }
}

@layer narrow {
  @media (max-width: 1200px) {
    .yl-grid { grid-template-columns: repeat(3, 1fr); }
    .yl-board__grid { grid-template-columns: repeat(4, 1fr); }
  }
  @media (max-width: 1060px) {
    .yl-burger { display: block; margin-inline-start: auto; }
    .yl-head__cta { display: none; }
    .yl-nav { display: none; position: absolute; inset-inline: 0; inset-block-start: 100%; background: #fff; border-block-end: 3px solid var(--yl-pop); padding: 8px 24px 14px; }
    .yl-head.nav-sugared .yl-nav { display: block; }
    .yl-nav ul { flex-direction: column; }
    .yl-dock { display: flex; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40; background: var(--yl-night); color: #fff; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
    .yl-dock__txt { display: flex; flex-direction: column; font-size: 14px; line-height: 1.25; min-inline-size: 0; }
    .yl-dock__txt b { font-family: var(--yl-head); font-weight: 500; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .yl-scoop--dock { inline-size: 180px; flex: none; }
    body:has(.yl-dock) { padding-block-end: 80px; }
    .yl-shelf { grid-template-columns: 1fr; }
    .yl-filter { position: static; display: flex; flex-wrap: wrap; gap: 0 28px; }
    .yl-filter__h { inline-size: 100%; }
    .yl-pdp, .yl-story, .yl-close { grid-template-columns: 1fr; }
    .yl-revs__list { grid-template-columns: repeat(2, 1fr); }
    .yl-like__row { grid-template-columns: repeat(2, 1fr); }
    .yl-hero__band { grid-template-columns: 1fr; }
    .yl-hero__buy { text-align: start; }
  }
  @media (max-width: 640px) {
    body { font-size: 16px; }
    main > section, main > nav, main > article, main > div { padding-inline: 16px; }
    .yl-head__row { padding: 6px 16px; }
    .yl-head__logo img { inline-size: 84px; }
    .yl-hero__pic img { aspect-ratio: 2.4 / 1; }
    .yl-hero__band { padding: 18px 16px 4px; }
    .yl-hero__band h1 { font-size: 30px; }
    .yl-board h2, .yl-coll__h, .yl-like h2, .yl-revs h2, .yl-cast h2, .yl-wiki h2 { font-size: 30px; margin-block-start: 40px; }
    .yl-board__grid, .yl-board__grid--list { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .yl-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .yl-card { padding: 10px; }
    .yl-card__name { font-size: 14.5px; }
    .yl-card__meta { flex-direction: column; align-items: flex-start; }
    .yl-price { font-size: 20px; }
    .yl-revs__list { grid-template-columns: 1fr; }
    .yl-table thead { display: none; }
    .yl-table, .yl-table tbody, .yl-table tr, .yl-table td { display: block; inline-size: 100%; }
    .yl-table tr { border: 1px solid var(--yl-rule); border-radius: 10px; margin-block-end: 10px; padding: 6px 4px; }
    .yl-table td { border: 0; padding: 4px 10px; }
    .yl-table td:first-child { font-weight: 700; }
    .yl-cathead h1, .yl-art h1, .yl-svc h1 { font-size: 32px; }
    .yl-catban img { aspect-ratio: 2 / 1; }
    .yl-pdp h1 { font-size: 28px; }
    .yl-inline { grid-template-columns: 92px 1fr; gap: 12px; }
    .yl-pair .yl-like__row { grid-template-columns: repeat(2, 1fr); }
    .yl-foot__cols { grid-template-columns: 1fr; gap: 18px; }
    .yl-stripe { gap: 6px; }
    .yl-again { padding: 18px; }
    .yl-hero { padding-inline: 0; }
  }
}