@layer reset, base, shell, blocks, pages;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  img { max-inline-size: 100%; block-size: auto; display: block; }
  button { font: inherit; color: inherit; }
}

@layer base {
  :root {
    --coral: #eb615e;
    --coral-ink: #b8403d;
    --coral-mist: #fde9e8;
    --ink: #2e2a2b;
    --ink-soft: #5d5658;
    --paper: #f6f6f6;
    --chalk: #ffffff;
    --sun: #f7c544;
    --teal: #2fa89e;
    --sky: #4a97d6;
    --leaf: #6cb85c;
    --plum: #9468c0;
    --rule: #e4dfdf;
    --r-lg: 22px;
    --r-md: 14px;
    --shadow: 0 6px 22px rgb(46 42 43 / .09);
    --f-head: "Fredoka", "Trebuchet MS", sans-serif;
    --f-hand: "Amatic SC", "Comic Sans MS", cursive;
    --f-body: "Lexend", "Segoe UI", sans-serif;
    --wrap: 1240px;
  }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body { font-family: var(--f-body); font-size: 16px; line-height: 1.65; color: var(--ink); background: var(--chalk); font-weight: 350; }
  h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 600; line-height: 1.15; letter-spacing: -.005em; }
  a { color: var(--coral-ink); text-underline-offset: 3px; }
  a:hover { color: var(--coral); }
  :focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 6px; }
  .shell { inline-size: min(100% - 32px, var(--wrap)); margin-inline: auto; }
  .hand { font-family: var(--f-hand); font-weight: 700; letter-spacing: .02em; }
  .vh { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .price-stamp { all: unset; cursor: pointer; display: inline-block; line-height: 0; border-radius: 99px; transition: transform .15s, filter .15s; }
  .price-stamp img { inline-size: 100%; block-size: auto; }
  .price-stamp:hover { transform: translateY(-2px); filter: saturate(1.15) brightness(1.03); }
  .price-stamp:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
}

@layer shell {
  .ribbon { background: var(--ink); color: #fff; font-size: 13.5px; }
  .ribbon__in { display: flex; align-items: center; justify-content: center; gap: 10px; min-block-size: 38px; text-align: center; padding-block: 6px; }
  .ribbon img { inline-size: 24px; block-size: 24px; border-radius: 50%; }
  .ribbon b { color: var(--sun); font-weight: 500; }

  .mast { background: var(--coral); color: #fff; }
  .mast__in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding-block: 12px; }
  .mast__logo { display: block; inline-size: 98px; background: #fff; border-radius: 50%; padding: 3px; margin-block: -2px -30px; position: relative; z-index: 3; filter: drop-shadow(0 4px 10px rgb(0 0 0 / .18)); }
  .mast__logo img { inline-size: 98px; block-size: auto; }
  .mast__say { font-family: var(--f-hand); font-size: 30px; line-height: 1.05; font-weight: 700; }
  .mast__say small { display: block; font-family: var(--f-body); font-size: 13px; font-weight: 400; opacity: .92; letter-spacing: .01em; }
  .mast__cta { inline-size: 250px; }
  .mast__cta .price-stamp { box-shadow: 0 0 0 3px #fff; }
  .burger { display: none; background: none; border: 2px solid #fff; border-radius: 12px; inline-size: 48px; block-size: 44px; cursor: pointer; padding: 0; }
  .burger span { display: block; inline-size: 22px; block-size: 2.5px; background: #fff; margin: 5px auto; border-radius: 2px; }

  .aisle { background: #fff; border-block-end: 1px solid var(--rule); box-shadow: 0 2px 0 rgb(46 42 43 / .03); }
  .aisle ul { display: flex; justify-content: flex-end; gap: 4px; padding-block: 0; }
  .aisle a { display: block; padding: 15px 14px; color: var(--ink); text-decoration: none; font-family: var(--f-head); font-weight: 500; font-size: 16px; border-block-end: 3px solid transparent; }
  .aisle a:hover, .aisle a[aria-current="page"] { color: var(--coral-ink); border-block-end-color: var(--coral); }

  .crumbs { font-size: 13.5px; color: var(--ink-soft); padding-block: 18px 4px; }
  .crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; }
  .crumbs li + li::before { content: "\203A"; margin-inline-end: 6px; color: var(--coral); }
  .crumbs a { color: var(--ink-soft); }

  .helpers { background: var(--paper); border-block: 1px solid var(--rule); }
  .helpers ul { display: grid; grid-template-columns: repeat(4, 1fr); }
  .helpers li + li { border-inline-start: 1px solid var(--rule); }
  .helpers a { display: grid; justify-items: center; gap: 6px; padding: 26px 12px; text-decoration: none; color: var(--ink); font-family: var(--f-head); font-weight: 500; text-align: center; }
  .helpers svg { inline-size: 34px; block-size: 34px; stroke: var(--coral); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .helpers a:hover { color: var(--coral-ink); }

  .foot { background: var(--coral); color: #fff; position: relative; margin-block-start: 58px; }
  .foot::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: -40px; block-size: 42px; background: var(--coral);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 42' preserveAspectRatio='none'%3E%3Cpath d='M0 26C200 2 380 2 600 20s420 20 600-8v30H0z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 42' preserveAspectRatio='none'%3E%3Cpath d='M0 26C200 2 380 2 600 20s420 20 600-8v30H0z'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
  .foot.after-helpers { margin-block-start: 44px; }
  .foot__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 34px; padding-block: 34px 30px; }
  .foot__brand img { inline-size: 132px; }
  .foot__brand p { font-size: 14.5px; margin-block-start: 12px; max-inline-size: 290px; }
  .foot h2 { font-size: 18px; margin-block-end: 12px; font-weight: 600; }
  .foot ul { list-style: none; padding: 0; display: grid; gap: 7px; font-size: 14.5px; }
  .foot a { color: #fff; text-decoration: none; }
  .foot a:hover { text-decoration: underline; color: #fff; }
  .foot__base { border-block-start: 1px solid rgb(255 255 255 / .35); padding-block: 16px 22px; font-size: 13px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 26px; }
  .foot__base p { max-inline-size: 760px; }

  @media (max-width: 980px) {
    .mast__say { display: none; }
    .mast__in { grid-template-columns: auto 1fr auto; }
    .mast__cta { inline-size: 210px; justify-self: end; }
    .burger { display: block; }
    .aisle { display: none; }
    .aisle.is-open { display: block; }
    .aisle ul { flex-direction: column; padding-block: 8px 12px; padding-inline-start: 110px; }
    .aisle a { padding: 10px 6px; border: 0; }
    .foot__grid { grid-template-columns: 1fr 1fr; }
    .helpers ul { grid-template-columns: repeat(2, 1fr); }
    .helpers li:nth-child(3) { border-inline-start: 0; }
    .helpers li:nth-child(n+3) { border-block-start: 1px solid var(--rule); }
  }
  @media (max-width: 560px) {
    .mast__in { gap: 12px; }
    .mast__logo, .mast__logo img { inline-size: 76px; }
    .mast__cta { inline-size: 170px; }
    .aisle ul { padding-inline-start: 16px; }
    .foot__grid { grid-template-columns: 1fr; }
  }
}

@layer blocks {
  .sect { padding-block: 56px; }
  .sect--paper { background: var(--paper); }
  .sect__head { text-align: center; margin-block-end: 30px; }
  .sect__head h2 { font-size: clamp(26px, 3.2vw, 36px); }
  .sect__head p { color: var(--ink-soft); margin-block-start: 8px; }
  .sect__head .hand { display: block; color: var(--coral); font-size: 28px; line-height: 1; margin-block-end: 4px; }

  .splash { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--coral); color: #fff; min-block-size: 470px; }
  .splash__words { display: grid; align-content: center; gap: 18px; padding: 48px clamp(20px, 5vw, 64px); }
  .splash__words .hand { font-size: 34px; color: var(--sun); line-height: 1; }
  .splash h1 { font-size: clamp(32px, 4.2vw, 52px); }
  .splash__words p { font-size: 17.5px; max-inline-size: 460px; }
  .splash__go { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
  .pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 99px; padding: 11px 24px; font-family: var(--f-head); font-weight: 600; text-decoration: none; background: #fff; color: var(--coral-ink); border: 2px solid #fff; }
  .pill:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
  .pill--line { background: transparent; color: #fff; }
  .pill--coral { background: var(--coral); color: #fff; border-color: var(--coral); }
  .pill--coral:hover { background: var(--coral-ink); border-color: var(--coral-ink); }
  .splash__pic { position: relative; overflow: hidden; }
  .splash__pic img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 40% 50%; }
  .splash__pic figcaption { position: absolute; inset-inline-end: 18px; inset-block-end: 18px; background: #fff; color: var(--ink); border-radius: 99px; padding: 6px 16px 6px 6px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; box-shadow: var(--shadow); }
  .splash__pic figcaption img { inline-size: 34px; block-size: 34px; border-radius: 50%; }

  .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-block-start: 26px; }
  .duo a { display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: var(--paper); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: var(--ink); border: 2px solid var(--rule); }
  .duo a:hover { border-color: var(--coral); }
  .duo div { padding: 18px 22px; }
  .duo .hand { font-size: 26px; color: var(--coral); line-height: 1; }
  .duo h2 { font-size: 22px; margin-block: 4px 6px; }
  .duo p { font-size: 14px; color: var(--ink-soft); }
  .duo img { inline-size: 100%; block-size: 100%; object-fit: cover; min-block-size: 170px; }

  .dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 30px; list-style: none; padding: 0; }
  .dots a { display: grid; justify-items: center; gap: 10px; text-decoration: none; color: var(--ink); inline-size: 150px; text-align: center; }
  .dots__disc { inline-size: 126px; block-size: 126px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; border: 5px solid var(--c, var(--coral)); background: #fff; transition: transform .2s; }
  .dots__disc img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .dots a:hover .dots__disc { transform: translateY(-4px) rotate(-3deg); }
  .dots b { font-family: var(--f-head); font-weight: 600; font-size: 17px; line-height: 1.2; }
  .dots small { color: var(--ink-soft); font-size: 13px; }

  .shelf { position: relative; overflow: hidden; padding-inline: 2px; }
  .shelf__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 20px) / 4); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 18px; scrollbar-width: thin; }
  .shelf__track > * { scroll-snap-align: start; }
  .shelf__btn { position: absolute; inset-block-start: 38%; inline-size: 46px; block-size: 46px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; font-size: 22px; cursor: pointer; z-index: 2; box-shadow: var(--shadow); }
  .shelf__btn:hover { background: var(--coral); }
  .shelf__btn--prev { inset-inline-start: 6px; }
  .shelf__btn--next { inset-inline-end: 6px; }

  .tile { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; box-shadow: 0 2px 0 rgb(46 42 43 / .04); transition: box-shadow .2s, transform .2s; }
  .tile:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
  .tile__pic { display: block; aspect-ratio: 1; background: #fff; padding: 14px; border-block-end: 1px solid var(--rule); position: relative; }
  .tile__pic img { inline-size: 100%; block-size: 100%; object-fit: contain; }
  .tile__flag { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; background: var(--sun); color: var(--ink); font-size: 12px; font-weight: 500; border-radius: 99px; padding: 2px 10px; }
  .tile__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
  .tile__line { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--coral-ink); font-weight: 500; }
  .tile h3 { font-size: 17px; font-weight: 500; line-height: 1.3; }
  .tile h3 a { color: var(--ink); text-decoration: none; }
  .tile h3 a:hover { color: var(--coral-ink); }
  .tile__txt { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
  .tile__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-block-start: auto; padding-block-start: 6px; }
  .tile__price { font-family: var(--f-head); font-weight: 600; font-size: 19px; }
  .tile__price small { font-family: var(--f-body); font-weight: 400; font-size: 12px; color: var(--ink-soft); }
  .tile .price-stamp { inline-size: 100%; margin-block-start: 10px; }
  .stars { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); }
  .stars i { --pct: 90%; inline-size: 84px; block-size: 15px; display: inline-block; background: linear-gradient(90deg, var(--sun) var(--pct), #d9d4d4 var(--pct));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 18'%3E%3Cg%3E%3Cpath id='s' d='M9 0l2.7 5.6 6.1.8-4.4 4.3 1 6.1L9 13.9 3.6 16.8l1-6.1L.2 6.4l6.1-.8z'/%3E%3Cuse href='%23s' x='20.5'/%3E%3Cuse href='%23s' x='41'/%3E%3Cuse href='%23s' x='61.5'/%3E%3Cuse href='%23s' x='82'/%3E%3C/g%3E%3C/svg%3E") 0 0/100% 100%;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 18'%3E%3Cg%3E%3Cpath id='s' d='M9 0l2.7 5.6 6.1.8-4.4 4.3 1 6.1L9 13.9 3.6 16.8l1-6.1L.2 6.4l6.1-.8z'/%3E%3Cuse href='%23s' x='20.5'/%3E%3Cuse href='%23s' x='41'/%3E%3Cuse href='%23s' x='61.5'/%3E%3Cuse href='%23s' x='82'/%3E%3C/g%3E%3C/svg%3E") 0 0/100% 100%; }

  .whys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; list-style: none; padding: 0; }
  .whys li { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-md); padding: 20px; }
  .whys__ico { inline-size: 48px; block-size: 48px; border-radius: 50%; background: var(--c); display: grid; place-items: center; color: #fff; font-family: var(--f-head); font-weight: 600; font-size: 20px; }
  .whys h3 { font-size: 18px; }
  .whys p { font-size: 14px; color: var(--ink-soft); margin-block-start: 4px; }

  .band { background: var(--ink); color: #fff; text-align: center; padding-block: 34px; }
  .band .hand { color: var(--sun); font-size: 28px; display: block; line-height: 1; }
  .band h2 { font-size: clamp(22px, 3vw, 34px); font-weight: 500; margin-block-start: 6px; }
  .band h2 b { color: var(--coral); font-weight: 600; }

  .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .pair article { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-lg); overflow: hidden; background: var(--c); color: #fff; min-block-size: 320px; }
  .pair img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .pair div { padding: 28px 24px; display: grid; align-content: center; gap: 10px; }
  .pair h3 { font-size: 26px; }
  .pair p { font-size: 15px; }
  .pair .pill { justify-self: start; margin-block-start: 6px; }

  .tale { display: grid; grid-template-columns: 1fr 1.25fr; gap: 26px; align-items: stretch; }
  .tale__card { background: var(--sun); border-radius: var(--r-lg); padding: 34px; display: grid; gap: 14px; justify-items: center; text-align: center; }
  .tale__card img { inline-size: 170px; }
  .tale__card h2 { font-size: 30px; }
  .tale__card p { max-inline-size: 440px; }
  .tale__text { background: #fff; border-radius: var(--r-lg); padding: 34px; display: grid; gap: 14px; align-content: center; background-image: radial-gradient(circle at 92% 12%, var(--coral-mist) 0 70px, transparent 71px); }
  .tale__text h3 { font-size: 24px; }
  .tale__slogan { inline-size: min(100%, 460px); }

  .ages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; list-style: none; padding: 0; }
  .ages a { display: grid; gap: 10px; justify-items: center; text-align: center; text-decoration: none; color: var(--ink); padding: 22px 16px; border-radius: var(--r-lg); background: #fff; border: 2px dashed var(--c); }
  .ages a:hover { background: var(--coral-mist); }
  .ages svg { inline-size: 64px; block-size: 64px; stroke: var(--c); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .ages b { background: var(--c); color: #fff; border-radius: 99px; padding: 3px 16px; font-family: var(--f-head); font-weight: 600; }
  .ages span { font-size: 14px; color: var(--ink-soft); }

  .stock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; padding: 0; }
  .stock a { display: grid; gap: 12px; text-decoration: none; color: var(--ink); justify-items: center; text-align: center; }
  .stock img { border-radius: var(--r-md); aspect-ratio: 375 / 270; object-fit: cover; inline-size: 100%; }
  .stock b { font-family: var(--f-head); font-size: 18px; font-weight: 600; }
  .stock span { background: var(--ink); color: #fff; font-size: 12px; letter-spacing: .12em; font-weight: 500; border-radius: 99px; padding: 6px 18px; }
  .stock a:hover span { background: var(--coral); }

  .love__ribbon { inline-size: min(100%, 520px); margin: 0 auto 26px; }
  .notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; padding: 0; }
  .notes li { background: #fff; border-radius: var(--r-md); padding: 22px; border: 1px solid var(--rule); display: grid; gap: 10px; align-content: start; position: relative; }
  .notes li::before { content: "\201C"; position: absolute; inset-inline-end: 16px; inset-block-start: -6px; font-family: Georgia, serif; font-size: 70px; color: var(--coral-mist); line-height: 1; }
  .notes h3 { font-size: 17px; font-weight: 600; }
  .notes blockquote { font-size: 14.5px; color: var(--ink-soft); }
  .notes footer { font-size: 13px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; border-block-start: 1px dashed var(--rule); padding-block-start: 10px; }
  .notes footer a { font-weight: 500; }

  .jot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; list-style: none; padding: 0; }
  .jot a { display: grid; gap: 10px; text-decoration: none; color: var(--ink); }
  .jot img { border-radius: var(--r-md); aspect-ratio: 16 / 10; object-fit: cover; inline-size: 100%; }
  .jot b { font-family: var(--f-head); font-weight: 600; font-size: 19px; line-height: 1.25; }
  .jot span { font-size: 14px; color: var(--ink-soft); }
  .jot a:hover b { color: var(--coral-ink); }

  .strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
  .strip img { aspect-ratio: 1; object-fit: cover; border-radius: 12px; inline-size: 100%; }

  .prose2 { columns: 2 320px; column-gap: 44px; }
  .prose2 p { margin-block-end: 14px; break-inside: avoid-column; }
  .prose2 h3 { font-size: 19px; margin-block-end: 8px; break-after: avoid; }

  .closer { display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center; background: var(--coral-mist); border-radius: var(--r-lg); padding: 26px 32px; }
  .closer > img { inline-size: 96px; }
  .closer h2 { font-size: 26px; }
  .closer p { color: var(--ink-soft); }
  .closer .price-stamp { inline-size: 280px; }

  @media (max-width: 980px) {
    .splash { grid-template-columns: 1fr; }
    .splash__pic { max-block-size: 360px; order: -1; }
    .duo, .pair, .tale { grid-template-columns: 1fr; }
    .whys, .ages, .stock { grid-template-columns: repeat(2, 1fr); }
    .notes, .jot { grid-template-columns: 1fr 1fr; }
    .shelf__track { grid-auto-columns: calc((100% - 20px) / 2.2); }
    .strip { grid-template-columns: repeat(3, 1fr); }
    .closer { grid-template-columns: auto 1fr; }
    .closer .price-stamp { grid-column: 1 / -1; justify-self: start; }
  }
  @media (max-width: 560px) {
    .sect { padding-block: 40px; }
    .duo a, .pair article { grid-template-columns: 1fr; }
    .duo img { max-block-size: 180px; }
    .pair img { max-block-size: 220px; }
    .whys, .notes, .jot { grid-template-columns: 1fr; }
    .ages, .stock { grid-template-columns: 1fr 1fr; gap: 12px; }
    .shelf__track { grid-auto-columns: 78%; }
    .shelf__btn { display: none; }
    .dots { gap: 18px 10px; }
    .dots a { inline-size: 140px; }
    .dots__disc { inline-size: 104px; block-size: 104px; }
    .closer { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .closer .price-stamp { justify-self: center; inline-size: 100%; max-inline-size: 300px; }
  }
}

@layer pages {
  .aisle-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--paper); border-radius: var(--r-lg); overflow: hidden; margin-block-start: 10px; }
  .aisle-top > div { padding: 30px 34px; display: grid; gap: 10px; align-content: center; }
  .aisle-top .hand { color: var(--coral); font-size: 28px; line-height: 1; }
  .aisle-top h1 { font-size: clamp(28px, 3.4vw, 42px); color: var(--coral-ink); }
  .aisle-top p { color: var(--ink-soft); }
  .aisle-top img { inline-size: 100%; block-size: 100%; object-fit: cover; min-block-size: 220px; clip-path: ellipse(100% 120% at 100% 50%); }
  .sorter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-block: 28px 18px; }
  .sorter p { color: var(--ink-soft); font-size: 14px; }
  .sorter__btns { display: flex; gap: 6px; flex-wrap: wrap; }
  .sorter button { border: 1.5px solid var(--rule); background: #fff; border-radius: 99px; padding: 6px 16px; cursor: pointer; font-size: 14px; }
  .sorter button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
  .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; padding: 0; }
  .aisle-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-block-start: 48px; padding: 34px; border-radius: var(--r-lg); border: 2px dashed var(--rule); }
  .aisle-guide h2 { font-size: 24px; margin-block-end: 10px; }
  .aisle-guide p + p { margin-block-start: 10px; }
  .aisle-guide ul:not(.others) { padding-inline-start: 18px; display: grid; gap: 6px; }
  .others { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin-block-start: 14px; }
  .others a { display: inline-block; border-radius: 99px; padding: 8px 18px; background: var(--paper); text-decoration: none; color: var(--ink); font-family: var(--f-head); font-weight: 500; }
  .others a:hover { background: var(--coral); color: #fff; }

  .pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; margin-block-start: 12px; }
  .viewer__main { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-lg); aspect-ratio: 1; padding: 22px; display: grid; place-items: center; }
  .viewer__main img { inline-size: 100%; block-size: 100%; object-fit: contain; }
  .viewer__thumbs { display: flex; gap: 10px; margin-block-start: 12px; flex-wrap: wrap; list-style: none; padding: 0; }
  .viewer__thumbs button { inline-size: 74px; block-size: 74px; border: 2px solid var(--rule); border-radius: 12px; background: #fff; padding: 4px; cursor: pointer; }
  .viewer__thumbs button[aria-current="true"] { border-color: var(--coral); }
  .viewer__thumbs img { inline-size: 100%; block-size: 100%; object-fit: contain; }
  .buybox { display: grid; gap: 14px; align-content: start; }
  .buybox__brand { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--coral-ink); font-weight: 500; }
  .buybox__brand img { inline-size: 34px; }
  .buybox h1 { font-size: clamp(26px, 3vw, 36px); }
  .buybox__lede { font-size: 17px; }
  .buybox__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; border-block: 1px solid var(--rule); padding-block: 12px; }
  .buybox__price strong { font-family: var(--f-head); font-weight: 600; font-size: 30px; }
  .buybox__price small { color: var(--ink-soft); font-size: 13px; }
  .picks { border: 0; padding: 0; margin: 0; }
  .picks legend { font-family: var(--f-head); font-weight: 600; margin-block-end: 8px; }
  .picks div { display: flex; flex-wrap: wrap; gap: 8px; }
  .picks button { border: 1.5px solid var(--rule); background: #fff; border-radius: 12px; padding: 7px 14px; cursor: pointer; font-size: 14px; text-align: start; line-height: 1.3; }
  .picks button span { display: block; font-size: 12px; color: var(--ink-soft); }
  .picks button[aria-pressed="true"] { border-color: var(--coral); background: var(--coral-mist); }
  .ticks { list-style: none; padding: 0; display: grid; gap: 9px; }
  .ticks li { padding-inline-start: 30px; position: relative; font-size: 15px; }
  .ticks li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 4px; inline-size: 19px; block-size: 19px; border-radius: 50%; background: var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
  .buybox .price-stamp { inline-size: min(100%, 440px); }
  .assure { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; list-style: none; padding: 0; font-size: 13px; color: var(--ink-soft); }
  .assure li { background: var(--paper); border-radius: 12px; padding: 10px 12px; }
  .assure b { display: block; color: var(--ink); font-weight: 500; }
  .folds { margin-block-start: 44px; display: grid; gap: 12px; }
  .folds details { border: 1px solid var(--rule); border-radius: var(--r-md); background: #fff; }
  .folds summary { cursor: pointer; padding: 16px 22px; font-family: var(--f-head); font-weight: 600; font-size: 19px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
  .folds summary::-webkit-details-marker { display: none; }
  .folds summary::after { content: "+"; font-size: 26px; color: var(--coral); line-height: 1; }
  .folds details[open] summary::after { content: "\2013"; }
  .folds .fold-in { padding: 0 22px 20px; display: grid; gap: 10px; }
  .spec { display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; font-size: 14.5px; }
  .spec dt { color: var(--ink-soft); }
  .joytip { display: grid; grid-template-columns: 70px 1fr; gap: 16px; align-items: center; background: var(--coral-mist); border-radius: var(--r-md); padding: 18px 20px; margin-block-start: 26px; }
  .joytip img { inline-size: 70px; }
  .joytip b { font-family: var(--f-hand); font-size: 26px; color: var(--coral-ink); display: block; line-height: 1; }

  .readme { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; margin-block-start: 12px; }
  .readme article > * + * { margin-block-start: 16px; }
  .readme h1 { font-size: clamp(30px, 3.6vw, 44px); }
  .readme h2 { font-size: 26px; margin-block-start: 34px; }
  .readme .lede { font-size: 18px; color: var(--ink-soft); }
  .readme figure img { border-radius: var(--r-lg); }
  .readme figcaption { font-size: 13px; color: var(--ink-soft); margin-block-start: 6px; }
  .readme ol, .readme ul { padding-inline-start: 22px; display: grid; gap: 8px; }
  .readme aside { display: grid; gap: 16px; align-content: start; position: sticky; inset-block-start: 20px; }
  .readme aside section { border: 1px solid var(--rule); border-radius: var(--r-md); padding: 18px; }
  .readme aside h2 { font-size: 18px; margin: 0 0 10px; }
  .readme aside ul { list-style: none; padding: 0; }
  .mini { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; text-decoration: none; color: var(--ink); font-size: 14px; line-height: 1.35; }
  .mini img { inline-size: 64px; block-size: 64px; object-fit: contain; border: 1px solid var(--rule); border-radius: 10px; background: #fff; }
  .callout { background: var(--paper); border-inline-start: 5px solid var(--coral); padding: 16px 20px; border-radius: 0 var(--r-md) var(--r-md) 0; }
  .pick-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 18px; align-items: center; border: 1px solid var(--rule); border-radius: var(--r-md); padding: 14px; }
  .pick-row > img { inline-size: 110px; block-size: 110px; object-fit: contain; }
  .pick-row h3 { font-size: 18px; }
  .pick-row .price-stamp { inline-size: 230px; }

  .lost { text-align: center; padding-block: 70px; display: grid; justify-items: center; gap: 14px; }
  .lost img { inline-size: 150px; }
  .lost h1 { font-size: 40px; }

  @media (max-width: 980px) {
    .grid4 { grid-template-columns: repeat(3, 1fr); }
    .pdp, .readme, .aisle-guide { grid-template-columns: 1fr; }
    .readme aside { position: static; }
    .aisle-top { grid-template-columns: 1fr; }
    .aisle-top img { clip-path: none; max-block-size: 220px; order: -1; }
  }
  @media (max-width: 640px) {
    .grid4 { grid-template-columns: 1fr 1fr; gap: 12px; }
    .tile__body { padding: 12px; }
    .tile__txt { display: none; }
    .tile__meta { flex-wrap: wrap; }
    .assure { grid-template-columns: 1fr; }
    .pick-row { grid-template-columns: 80px 1fr; }
    .pick-row > img { inline-size: 80px; block-size: 80px; }
    .pick-row .price-stamp { grid-column: 1 / -1; inline-size: 100%; max-inline-size: 300px; }
    .aisle-top > div { padding: 22px; }
    .aisle-guide { padding: 22px; }
  }
}