/* Featured pillow collection. Inherits Silicraft's type and industrial palette. */
.pillow-feature--compact .pillow-feature__inner { display: block; }
.pillow-feature--compact .pillow-feature__copy h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); }
.pillow-feature__styles { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; }
.pillow-feature__styles a { border-block-end: 1px solid var(--line-strong); padding-block: 1.4rem; display: flex; gap: 1rem; align-items: center; color: var(--bone-100); font-size: 1.1rem; }
.pillow-feature__styles a > span:first-child { color: var(--signal-500); font: .8rem var(--font-mono); }
.pillow-feature__styles .pillow-arrow { margin-inline-start: auto; }
.pillow-feature__styles a:hover { color: var(--signal-500); }
@media (max-width: 800px) { .pillow-feature__styles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .pillow-feature__styles { grid-template-columns: minmax(0, 1fr); } }
.pillow-page, .pillow-feature { --pillow-paper: #eeeae2; --pillow-muted: #aeb5be; }
.pillow-page { max-width: 1280px; margin-inline: auto; padding: 0 clamp(1.25rem, 4vw, 3rem) clamp(4rem, 8vw, 7rem); }
.pillow-page *, .pillow-feature * { box-sizing: border-box; }
.pillow-page p, .pillow-feature p { line-height: 1.75; }
.pillow-page h1, .pillow-page h2, .pillow-page h3, .pillow-page h4, .pillow-feature h2 { color: var(--bone-100); text-wrap: balance; }
.pillow-page h2 { font-family: var(--font-heading); font-size: clamp(1.8rem, 3.4vw, 2.9rem); line-height: 1.15; margin: 0 0 1.2rem; letter-spacing: -.035em; }
.pillow-page h3 { font-family: var(--font-heading); font-size: 1.25rem; line-height: 1.35; }
.pillow-kicker { color: var(--signal-500); font-family: var(--font-heading); font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 1.2rem; }
.pillow-breadcrumb { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; padding-block: 1.65rem; font-size: .8rem; color: var(--pillow-muted); }
.pillow-breadcrumb a { color: inherit; text-underline-offset: .25rem; min-height: 32px; display: inline-flex; align-items: center; }
.pillow-breadcrumb [aria-current] { color: var(--bone-100); }
.pillow-hero { display: grid; grid-template-columns: 1.07fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding: clamp(1rem, 3vw, 2.5rem) 0 clamp(3rem, 7vw, 6rem); }
.pillow-hero__copy { min-width: 0; }
.pillow-hero__category { font-size: 1rem; font-weight: 700; margin: 0 0 .7rem; color: var(--bone-100); }
.pillow-hero h1 { font-family: var(--font-display); font-size: clamp(2.3rem, 4.7vw, 4rem); line-height: 1.08; letter-spacing: -.045em; margin: 0 0 1.7rem; overflow-wrap: break-word; }
.pillow-lead { color: var(--pillow-muted); font-size: 1.02rem; margin: 0; max-width: 58ch; }
.pillow-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; margin-block: 1.8rem; }
.pillow-actions .btn, .pillow-feature .btn { min-height: 48px; white-space: normal; text-align: start; }
.pillow-text-link { color: var(--bone-100); font-size: .9rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--ink-600); text-underline-offset: .4rem; display: inline-flex; align-items: center; justify-content: space-between; gap: .8rem; min-height: 44px; }
.pillow-text-link:hover { color: var(--signal-300); text-decoration-color: currentColor; }
.pillow-arrow { display: inline-block; flex: none; font-size: 1.25em; }
.pillow-hero__notes { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding: 0; margin: 1.5rem 0 0; list-style: none; font-size: .76rem; color: var(--pillow-muted); }
.pillow-hero__notes li { border-inline-start: 2px solid var(--signal-500); padding-inline-start: .6rem; }
.pillow-hero__visual { margin: 0; background: var(--pillow-paper); position: relative; }
.pillow-hero__visual picture, .pillow-feature__visual picture { display: block; }
.pillow-hero__visual img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.pillow-hero__visual figcaption { color: #42474b; background: var(--pillow-paper); font-size: .76rem; line-height: 1.6; padding: 1rem 1.25rem; border-top: 1px solid #d4d1c9; }
.pillow-section { padding-block: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--ink-700); scroll-margin-top: 100px; }
.pillow-section__header { max-width: 780px; margin-bottom: 2rem; }
.pillow-section__header > p:last-child { color: var(--pillow-muted); margin: 0; }
.pillow-styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink-700); border-inline-start: 1px solid var(--ink-700); }
.pillow-style { display: flex; flex-direction: column; padding: clamp(1.25rem, 2.4vw, 2rem); border-inline-end: 1px solid var(--ink-700); border-bottom: 1px solid var(--ink-700); background: var(--ink-900); min-width: 0; }
.pillow-style__visual { margin-bottom: 1.5rem; background: var(--pillow-paper); overflow: hidden; }
.pillow-style__visual img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.pillow-style__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.7rem; }
.pillow-style__number { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; letter-spacing: -.06em; color: var(--signal-500); }
.pillow-style__tag { color: var(--pillow-muted); font-size: .7rem; text-align: end; }
.pillow-style h3 { margin: 0 0 .7rem; font-size: 1.4rem; }
.pillow-style > p { color: var(--pillow-muted); margin: 0 0 1.5rem; font-size: .9rem; }
.pillow-style dl { margin: auto 0 1rem; font-size: .8rem; line-height: 1.55; }
.pillow-style dl > div { padding: .8rem 0; border-top: 1px solid var(--ink-700); }
.pillow-style dt { color: var(--steel-500); font-size: .7rem; margin-bottom: .25rem; }
.pillow-style dd { margin: 0; color: var(--steel-300); }
.pillow-style .pillow-text-link { margin-top: .3rem; }
.pillow-editorial { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); }
.pillow-benefits article { display: flex; gap: 1.4rem; padding-block: 1.5rem; border-bottom: 1px solid var(--ink-700); }
.pillow-benefits article:first-child { padding-top: 0; }
.pillow-benefits article:last-child { border-bottom: 0; padding-bottom: 0; }
.pillow-index { font-family: var(--font-heading); color: var(--signal-500); font-size: .8rem; padding-top: .3rem; }
.pillow-benefits h3 { margin: 0 0 .6rem; }
.pillow-benefits p { color: var(--pillow-muted); font-size: .92rem; margin: 0; }
.pillow-materials__clarification { border-inline-start: 3px solid var(--signal-500); padding: 1rem 1.35rem; background: var(--ink-900); color: var(--steel-300); font-size: .9rem; margin: 0 0 2rem; }
.pillow-table-wrap { width: 100%; }
.pillow-materials table { border-collapse: collapse; width: 100%; text-align: start; font-size: .9rem; line-height: 1.7; table-layout: fixed; }
.pillow-materials th, .pillow-materials td { border-bottom: 1px solid var(--ink-700); padding: 1.3rem; vertical-align: top; overflow-wrap: break-word; }
.pillow-materials thead th { background: var(--ink-900); font-size: .75rem; color: var(--pillow-muted); font-weight: 500; }
.pillow-materials th:first-child { width: 23%; }
.pillow-materials tbody th { color: var(--bone-100); font-weight: 600; text-align: start; }
.pillow-materials td { color: var(--pillow-muted); }
.pillow-note { color: var(--steel-400); font-size: .78rem; line-height: 1.7; margin: 1.3rem 0 0; }
.pillow-oem { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.pillow-oem article { border-top: 2px solid var(--ink-600); padding-top: 1.2rem; }
.pillow-oem h3 { margin: 0 0 .7rem; }
.pillow-oem p { margin: 0; color: var(--pillow-muted); font-size: .9rem; }
.pillow-process { margin-top: 3.5rem; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--ink-900); }
.pillow-process > h3 { margin: 0 0 1.5rem; }
.pillow-process ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; list-style: none; counter-reset: pillow-step; margin: 0; padding: 0; }
.pillow-process li { counter-increment: pillow-step; border-top: 1px solid var(--ink-600); padding-top: 1rem; }
.pillow-process li::before { content: "0" counter(pillow-step); display: block; color: var(--signal-500); font-size: .75rem; margin-bottom: .7rem; }
.pillow-process h4 { font-family: var(--font-heading); margin: 0 0 .5rem; font-size: 1rem; }
.pillow-process p { margin: 0; color: var(--pillow-muted); font-size: .86rem; }
.pillow-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 5rem); }
.pillow-faq details { border-bottom: 1px solid var(--ink-700); }
.pillow-faq details:first-child { border-top: 1px solid var(--ink-700); }
.pillow-faq summary { padding-block: 1.3rem; padding-inline-end: .5rem; cursor: pointer; color: var(--bone-100); font-size: .98rem; line-height: 1.6; }
.pillow-faq summary::marker { color: var(--signal-500); }
.pillow-faq details p { margin: 0 0 1.5rem; color: var(--pillow-muted); font-size: .92rem; }
.pillow-enquiry { background: var(--ink-900); border-top: 3px solid var(--signal-500); padding: clamp(1.5rem, 4vw, 3rem); display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 4rem); scroll-margin-top: 100px; }
.pillow-enquiry > div > p:not(.pillow-kicker) { color: var(--pillow-muted); font-size: .95rem; }
.pillow-enquiry .pillow-actions { margin-bottom: 0; }
.pillow-enquiry__brief ul { list-style: none; margin: 0; padding: 0; }
.pillow-enquiry__brief li { border-bottom: 1px solid var(--ink-700); padding-block: .85rem; color: var(--steel-300); font-size: .9rem; line-height: 1.6; }
.pillow-enquiry__brief li:first-child { padding-top: 0; }
.pillow-feature { padding: clamp(3rem, 6vw, 6rem) clamp(1.25rem, 4vw, 3rem); background: var(--ink-900); border-block: 1px solid var(--ink-700); }
.pillow-feature__inner { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: clamp(2rem, 6vw, 6rem); max-width: 1184px; margin-inline: auto; }
.pillow-feature__copy h2 { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.12; letter-spacing: -.035em; margin: 0 0 1.4rem; }
.pillow-feature__copy > p:not(.pillow-kicker) { color: var(--pillow-muted); max-width: 55ch; margin: 0 0 1.8rem; }
.pillow-feature__visual { display: block; color: #42474b; background: var(--pillow-paper); text-decoration: none; }
.pillow-feature__visual img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; display: block; }
.pillow-feature__visual span { font-size: .75rem; line-height: 1.6; display: block; padding: .9rem 1.2rem; border-top: 1px solid #d4d1c9; }
.pillow-page a:focus-visible, .pillow-page summary:focus-visible, .pillow-feature a:focus-visible { outline: 2px solid var(--signal-300); outline-offset: 5px; }
[dir="rtl"] .pillow-arrow { transform: scaleX(-1); }
[dir="rtl"] .pillow-page h1, [dir="rtl"] .pillow-page h2, [dir="rtl"] .pillow-feature h2 { font-family: var(--font-heading); letter-spacing: 0; line-height: 1.4; }
[lang="ja"] .pillow-hero h1, [lang="zh-Hans"] .pillow-hero h1, [lang="ko"] .pillow-hero h1 { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.35; letter-spacing: -.025em; }
@media (max-width: 960px) {
  .pillow-hero { gap: 2rem; }
  .pillow-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillow-oem { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillow-feature__inner { gap: 2.5rem; }
}
@media (max-width: 720px) {
  .pillow-hero, .pillow-editorial, .pillow-faq, .pillow-enquiry, .pillow-feature__inner { grid-template-columns: minmax(0, 1fr); }
  .pillow-hero__visual { max-width: 540px; width: 100%; }
  .pillow-process ol { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .pillow-faq > h2 { max-width: 24ch; }
  .pillow-materials th, .pillow-materials td { padding: .9rem .65rem; font-size: .8rem; }
  .pillow-materials th:first-child { width: 25%; }
  .pillow-feature__visual { max-width: 540px; width: 100%; }
}
@media (max-width: 480px) {
  .pillow-styles, .pillow-oem { grid-template-columns: minmax(0, 1fr); }
  .pillow-hero h1 { font-size: 2.5rem; }
  .pillow-materials table { font-size: .78rem; }
  .pillow-materials th, .pillow-materials td { padding: .8rem .4rem; }
  .pillow-style { padding: 1.5rem; }
  .pillow-actions { align-items: stretch; flex-direction: column; gap: .5rem; }
  .pillow-actions .btn { justify-content: center; }
  .pillow-actions .pillow-text-link { justify-content: center; }
}