/* More furniture in the door designer (docs/slices/more-furniture-2026-10-02.md): since 9 Oct 2026 a slim banner straight
   after the order on a door page (docs/slices/order-flow-2026-10-09.md, slice 2), and the steps above Dean's designer on
   the Design page. Scoped under .hhi-page so the site's own
   link and list rules (.hhi-page a, .hhi-page ul) do not win. */
.hhi-page .more-furniture{margin:24px 0 36px;padding:24px;background:#efede7;border-radius:var(--hhi-radius,10px)}
/* Dean's four tiles (5 Oct 2026; docs/slices/more-furniture-tiles-2026-10-05.md): a white card each with its name under
   it, four across at every width down to 360px. */
.hhi-page .more-furniture .more-furniture-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 22px;padding:0;list-style:none}
.hhi-page .more-furniture .more-furniture-tile{margin:0;padding:0}
.hhi-page .more-furniture .more-furniture-tile a{display:flex;flex-direction:column;gap:8px;color:var(--hhi-ink,#24232c);text-decoration:none}
.hhi-page .more-furniture .more-furniture-tile-pic{display:grid;aspect-ratio:1;padding:8%;gap:6%;background:#fff;border:1px solid var(--hhi-line,#dedbd6);border-radius:8px;overflow:hidden}
.hhi-page .more-furniture .more-furniture-tile-pic[data-count="2"]{grid-template-columns:1fr 1fr}
.hhi-page .more-furniture .more-furniture-tile-pic[data-count="3"],.hhi-page .more-furniture .more-furniture-tile-pic[data-count="4"]{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.hhi-page .more-furniture .more-furniture-tile-pic img{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}
/* Three extras: the third centred under the first two (the critic, 5 Oct 2026). */
.hhi-page .more-furniture .more-furniture-tile-pic[data-count="3"] img:last-child{grid-column:1/-1}
/* The frame photos fill their card; every other tile is a cut-out on the white, the toplight door included (Karo,
   5 Oct 2026: a photo there was not uniform with the others). */
.hhi-page .more-furniture [data-tile="frames"] .more-furniture-tile-pic{padding:0}
.hhi-page .more-furniture [data-tile="frames"] img{object-fit:cover}
.hhi-page .more-furniture .more-furniture-tile-name{font-size:14px;line-height:1.3;text-align:center;text-wrap:balance}
.hhi-page .more-furniture .more-furniture-tile a:hover .more-furniture-tile-pic{border-color:var(--hhi-indigo,#332483)}

.hhi-page .more-furniture h3{margin:0 0 6px;font-size:18px;font-weight:600;line-height:1.35;color:var(--hhi-ink,#24232c)}
.hhi-page .more-furniture p{margin:0 0 18px;font-size:14px;line-height:1.6;color:var(--hhi-ink,#24232c)}
.hhi-page .more-furniture .more-furniture-cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border:1.5px solid var(--hhi-indigo,#332483);border-radius:6px;background:#fff;color:var(--hhi-indigo,#332483);font-size:15px;font-weight:600;text-decoration:none;transition:background-color .2s ease}
.hhi-page .more-furniture .more-furniture-cta:hover{background:#eeebf8}
.hhi-page .more-furniture .more-furniture-cta:focus-visible{outline:3px solid var(--hhi-indigo,#332483);outline-offset:3px}
.hhi-page .more-furniture .more-furniture-small{margin:12px 0 0;font-size:13px;color:var(--hhi-muted,#615f69)}
@media (prefers-reduced-motion:reduce){.hhi-page .more-furniture .more-furniture-cta{transition:none}}
/* The slim banner (Karo's choice of 9 Oct 2026: "Keeps Dean's four tiles from 5 Oct, small and in one row, with one
   line and the outlined Open the door designer button"). One column in a narrow options column; from 600px of column
   the tiles sit on the left and the words and button beside them. Text floors: 12px labels and small print, the line
   14px on a computer and 16px on a phone (design-system.md). 600, not 520 (Karo, 30 Oct 2026: the button "clips the tile
   it sits within"): beside the 280px of tiles the words get the column less 340px, and the framed button keeps its
   label on one line at 250px, so from 520 to 590 it ran past the panel and the page scrolled sideways. Below 600 the
   words and button stack under the tiles. A longer label needs this raised with it. */
.hhi-page .shop-product-options .more-furniture{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"tiles" "head" "line" "cta" "small";align-items:start;gap:0;margin:20px 0 32px;padding:16px 20px}
.hhi-page .shop-product-options .more-furniture .more-furniture-tiles{grid-area:tiles;grid-template-columns:repeat(4,minmax(0,64px));gap:8px;justify-content:start;margin:0 0 12px}
.hhi-page .shop-product-options .more-furniture .more-furniture-tile a{gap:4px}
.hhi-page .shop-product-options .more-furniture .more-furniture-tile-pic{border-radius:6px}
.hhi-page .shop-product-options .more-furniture .more-furniture-tile-name{font-size:12px;line-height:1.2}
.hhi-page .shop-product-options .more-furniture h3{grid-area:head;margin:0 0 2px;font-size:16px;line-height:1.3}
.hhi-page .shop-product-options .more-furniture p:not(.more-furniture-small){grid-area:line;margin:0 0 10px;font-size:14px;line-height:1.45}
.hhi-page .shop-product-options .more-furniture .more-furniture-cta{grid-area:cta;justify-self:start;font-size:14px;padding:0 16px}
.hhi-page .shop-product-options .more-furniture .more-furniture-small{grid-area:small;margin:8px 0 0;font-size:12px;line-height:1.4;text-wrap:pretty}
@container (min-width:600px){
 .hhi-page .shop-product-options .more-furniture{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"tiles head" "tiles line" "tiles cta" "small small";column-gap:20px}
 .hhi-page .shop-product-options .more-furniture .more-furniture-tiles{margin:0}
}
@media (max-width:760px){.hhi-page .shop-product-options .more-furniture p:not(.more-furniture-small){font-size:16px}}

/* The Design page: what the designer opened on, and the steps left for the customer's choices. */
.hhi-page .start-steps{margin:0 0 28px;padding:20px 24px;background:#efede7;border-radius:var(--hhi-radius,10px)}
.hhi-page .start-steps h2{margin:0 0 6px;font-size:17px;font-weight:600;line-height:1.35;color:var(--hhi-ink,#24232c)}
.hhi-page .start-steps [data-start-lead]{margin:0 0 12px;font-size:15px;line-height:1.55;color:var(--hhi-ink,#24232c)}
.hhi-page .start-steps ol{display:grid;gap:8px;margin:0 0 12px;padding:0;list-style:none;counter-reset:step}
.hhi-page .start-steps li{counter-increment:step;display:grid;grid-template-columns:30px 1fr;align-items:start;margin:0;font-size:15px;line-height:1.55;color:var(--hhi-ink,#24232c)}
/* Ink, not the indigo kept for actions and selected states (bar rule 21; the critic, 2 Oct 2026). */
.hhi-page .start-steps li::before{content:counter(step);display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--hhi-ink,#24232c);color:#fff;font-size:12px;font-weight:600}
.hhi-page .start-steps b{font-weight:600}
.hhi-page .start-steps .hhi-caption{margin:0;font-size:13px;color:var(--hhi-muted,#615f69)}
/* Its own line and a 44px target (design-system.md: every tap target at least 44px). */
.hhi-page .start-steps [data-start-back]{display:inline-flex;align-items:center;min-height:44px;font-size:15px;color:var(--hhi-indigo,#332483)}
/* Phones: a little less padding and gap, so the tiles are as large as in Dean's picture and their names wrap less. */
@media (max-width:760px){.hhi-page .more-furniture{padding:16px}}
/* Body text 16px on phones (design-system.md). */
@media (max-width:760px){.hhi-page .more-furniture p:not(.more-furniture-small){font-size:16px}.hhi-page .start-steps [data-start-lead],.hhi-page .start-steps li{font-size:16px}}