/* MHT Patterns: pattern book block and single pattern page.
   Layout primitives (.wrap, .section, .btn, .chip, .gallery, .glance, .cta-card)
   and the colour tokens come from the theme's mht-components.css. */

/* Pattern book block */
.pattern-book .filters { display: flex; gap: 1rem 2rem; align-items: center; flex-wrap: wrap; margin-bottom: 2.5rem; }
.pattern-book .filters .filter-chips { margin: 0; }
.pattern-book .filters label { font-size: .88rem; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: .6rem; }
.pattern-book .filters select { width: auto; padding: .5rem 2.2rem .5rem .9rem; font-size: .9rem; border-radius: var(--r-pill); }
.pat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: clamp(1.5rem, 3vw, 2.25rem); }
.pat-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.pat-card:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 4px; border-radius: var(--r); }
.pat-card .swatch { display: block; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #fff; position: relative; }
.pat-card .swatch img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.pat-card:hover .swatch img { transform: scale(1.05); }
.pat-card .swatch .hover { position: absolute; inset: 0; opacity: 0; transition: opacity .35s var(--ease), transform .5s var(--ease); }
.pat-card:hover .swatch .hover, .pat-card:focus-visible .swatch .hover { opacity: 1; }
.pat-card .code { position: absolute; top: .7rem; left: .7rem; background: oklch(98.6% 0.002 250 / .92); border-radius: var(--r-pill); font-size: .72rem; font-weight: 600; letter-spacing: .08em; padding: .3rem .65rem; color: var(--ink); }
.pat-card .ttl { display: block; font-family: var(--heading); font-size: 1.4rem; color: var(--ink); line-height: 1.1; margin: .95rem 0 .3rem; }
.pat-meta { font-size: .88rem; color: var(--muted); display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; }
.pat-meta .sep { opacity: .5; }
.dots { display: inline-flex; gap: .25rem; }
.dots i { width: .85rem; height: .85rem; border-radius: 50%; border: 1px solid oklch(0% 0 0 / .15); display: inline-block; }
.pat-card .arrow-link { margin-top: .7rem; }
.pat-empty { padding: 3rem 0; color: var(--muted); text-align: center; }

/* Single pattern */
.pat-layout { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (max-width: 920px) { .pat-layout { grid-template-columns: 1fr; } }
.pat-stage { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); aspect-ratio: 4 / 3; position: relative; }
.pat-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pat-stage [hidden] { display: none !important; } /* the hidden attribute must beat the display rule above */
.pat-stage .floor { position: absolute; inset: 0; background: var(--panel); cursor: grab; touch-action: none; }
.pat-stage .floor.is-dragging { cursor: grabbing; }
.pat-stage .floor canvas { width: 100% !important; height: 100% !important; display: block; }
.pat-stage .floor.is-loading::after { content: "Building the floor…"; position: absolute; inset: 0; display: grid; place-items: center; font-size: .9rem; color: var(--muted); }
.thumbs { display: flex; gap: .6rem; margin-top: 1rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
.thumbs button { flex: none; width: 6.5rem; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; padding: 0; background: #fff; cursor: pointer; position: relative; transition: border-color .2s var(--ease); }
.thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumbs button:hover { border-color: var(--ink); }
.thumbs button[aria-selected="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.thumbs button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.thumbs button.floor-thumb { background: var(--char); color: #fff; }
.floor-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.floor-thumb .badge { position: absolute; top: .3rem; right: .3rem; display: flex; align-items: center; gap: .2rem; background: var(--char); color: #fff; font: 600 .56rem/1 var(--sans); letter-spacing: .04em; padding: .22rem .38rem .22rem .3rem; border-radius: var(--r-pill); }
.floor-thumb .badge svg { width: .7rem; height: .7rem; }
.floor-thumb .cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: .25rem; background: oklch(25% 0.006 250 / .84); color: #fff; font: 600 .58rem/1.2 var(--sans); padding: .3rem .35rem; text-align: left; white-space: nowrap; }
.floor-thumb .cap svg { width: .8rem; height: .8rem; flex: none; }
.stage-foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; margin-top: .9rem; font-size: .85rem; color: var(--muted); }
.pat-title h1 { font-family: var(--display); font-size: clamp(2.2rem, 4.2vw, 3.2rem); margin: .6rem 0 .8rem; }
.pat-title .lede { font-size: 1.08rem; }
.pat-title .lede p + p { margin-top: .8rem; }
.side-stack { display: grid; gap: 1.5rem; }
.glance.inline { grid-template-columns: repeat(2, 1fr); gap: 1rem 1.5rem; }
.tile-table { width: 100%; border: 0; border-collapse: collapse; font-size: .92rem; margin: .4rem 0 0; font-variant-numeric: tabular-nums; }
.tile-table th { text-align: left; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 0 .5rem .5rem 0; border-bottom: 1px solid var(--line); background: none; }
.tile-table td { padding: .6rem .5rem .6rem 0; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
.tile-table th, .tile-table td { border-left: 0; border-right: 0; border-top: 0; background: none; }
.tile-table td.num, .tile-table th.num { text-align: right; padding-right: 0; } /* the count column, not just whatever is last */
.zone { width: 1.55rem; height: 1.55rem; border-radius: 50%; background: var(--ink); color: #fff; font-size: .72rem; font-weight: 600; display: inline-grid; place-items: center; }
.sw { display: inline-block; width: .95rem; height: .95rem; border-radius: 3px; border: 1px solid oklch(0% 0 0 / .15); vertical-align: -2px; margin-right: .4rem; }
.tile-table h3, .side-stack h3 { font-family: var(--heading); font-size: 1.25rem; margin-bottom: .6rem; }
.dl-panel { background: var(--char); color: var(--char-text); border-radius: var(--r); padding: clamp(1.4rem, 2.5vw, 1.9rem); display: grid; gap: .7rem; }
.dl-panel h3 { color: #fff; font-family: var(--heading); font-size: 1.25rem; margin-bottom: .2rem; }
.dl-panel p { font-size: .9rem; color: var(--char-muted); margin: 0; }
.dl-panel .btn { justify-content: center; }
.dl-panel small { font-size: .8rem; color: var(--char-muted); line-height: 1.5; }
.side-stack > .btn { justify-content: center; }
.borders { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.border-card { border: 1px solid var(--line); border-radius: var(--r); background: #fff; padding: 1rem; }
.border-card img { width: 100%; height: 4.5rem; object-fit: cover; display: block; border-radius: var(--r-sm); }
.border-card strong { display: block; font-family: var(--heading); font-weight: 400; font-size: 1.1rem; color: var(--ink); margin-top: .8rem; }
.border-card span { font-size: .85rem; color: var(--muted); }
.border-card.ask { display: grid; place-content: center; text-align: center; background: var(--panel); border-style: dashed; }

/* Colourways and motif tile */
.cw-row { display: flex; gap: .55rem; flex-wrap: wrap; margin-top: 1.1rem; }
.cw { display: inline-flex; align-items: center; gap: .55rem; font: 500 .88rem var(--sans); color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); padding: .45rem .95rem .45rem .55rem; cursor: pointer; transition: border-color .2s var(--ease); }
.cw:hover { border-color: var(--ink); }
.cw[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cw:focus-visible, .enc:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.enc-label { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: .3rem; }
/* Dropdown pickers (border, encaustic tile) */
.pick-row { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
.pick { position: relative; flex: 1 1 14rem; }
.pick summary { list-style: none; display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem .5rem .9rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; font: 500 .9rem var(--sans); color: var(--ink); transition: border-color .2s var(--ease); }
.pick summary::-webkit-details-marker { display: none; }
.pick summary:hover, .pick[open] summary { border-color: var(--ink); }
.pick summary:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.pick summary .enc-label { margin-right: .1rem; }
.pick-cur { display: inline-flex; align-items: center; gap: .55rem; min-width: 0; flex: 1; }
.pick-cur span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-cur img { height: 1.5rem; width: 2.5rem; object-fit: cover; border-radius: 3px; border: 1px solid var(--line); flex: none; }
.pick[data-pick="encaustic"] .pick-cur img { width: 1.5rem; }
.pick-chev { margin-left: auto; flex: none; color: var(--muted); transition: transform .2s var(--ease); }
.pick[open] .pick-chev { transform: rotate(180deg); }
.pick-menu { position: absolute; left: 0; right: 0; top: calc(100% + .35rem); z-index: 30; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: .4rem; max-height: 20rem; overflow-y: auto; display: grid; gap: .1rem; min-width: 16rem; }
.pick-menu .bd, .pick-menu .enc { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .7rem; align-items: center; width: 100%; text-align: left; padding: .45rem .6rem; border: 0; border-radius: var(--r-sm); background: none; cursor: pointer; font: 500 .9rem var(--sans); color: var(--ink); }
.pick-menu .bd img, .pick-menu .enc img, .pick-menu .pick-plain { grid-row: 1 / 3; border-radius: 3px; border: 1px solid var(--line); }
.pick-menu .bd img { width: 3.6rem; height: 1.3rem; object-fit: cover; object-position: left; }
.pick-menu .enc img, .pick-menu .pick-plain, .pick-cur .pick-plain { width: 2.2rem; height: 2.2rem; object-fit: cover; }
.pick-cur .pick-plain { width: 1.5rem; height: 1.5rem; border-radius: 3px; border: 1px solid var(--line); }
.pick-plain { background: repeating-linear-gradient(45deg, var(--stone) 0 3px, #fff 3px 6px); }
.pick-menu .bd:hover, .pick-menu .enc:hover { background: var(--panel); }
.pick-menu [aria-pressed="true"] { background: var(--panel); box-shadow: inset 0 0 0 1px var(--ink); }
.pick-menu .bd:focus-visible, .pick-menu .enc:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
.pick-menu small { color: var(--muted); font-size: .78rem; font-weight: 400; }
.pick-more { display: block; padding: .6rem .6rem .3rem; font: 600 .85rem var(--sans); color: var(--accent-ink); text-decoration: none; }
.pick-more:hover { text-decoration: underline; }

/* Encaustic catalogue block */
.enc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.enc-card { margin: 0; }
.enc-card .tile { aspect-ratio: 1; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.enc-card .tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.enc-card figcaption { padding-top: .7rem; font-size: .9rem; color: var(--muted); }
.enc-card figcaption strong { display: block; color: var(--ink); font-family: var(--heading); font-weight: 400; font-size: 1.1rem; }

/* Order form dialog */
.mht-dialog { border: 0; border-radius: var(--r-lg); padding: clamp(1.75rem, 4vw, 2.5rem); width: min(32rem, calc(100% - 2rem)); box-shadow: var(--shadow-lg); color: var(--body); background: var(--paper); }
.mht-dialog::backdrop { background: oklch(20% 0.006 250 / .55); backdrop-filter: blur(3px); }
.mht-dialog h2 { font-family: var(--display); font-size: 1.9rem; margin: .5rem 0 .6rem; }
.mht-dialog p { font-size: .98rem; margin-bottom: 1.25rem; }
.mht-dialog .actions { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
.mht-dialog .fine { font-size: .82rem; color: var(--muted); margin: 1.1rem 0 0; }
.mht-dialog .err { color: oklch(45% 0.15 25); font-size: .9rem; }
.mht-dialog .hp { position: absolute; left: -9999px; }
.mht-dialog .sent { display: none; }
.mht-dialog[data-state="sent"] form { display: none; }
.mht-dialog[data-state="sent"] .sent { display: block; }
.mht-dialog[data-state="sent"] .sent p { color: var(--ink); font-size: 1.05rem; }