/* Compact category layout (owner, Nov 2 2026), white, from previews/category-compact.html; template product/category_compact.twig.
   Every photo is whole: js/category-compact.js puts the designs in rows where each photo keeps its own shape and the photos
   of a row share one height, so the row fills the width exactly (3px lines between them, as on the homepage). Before the
   script runs, the same rows come close by themselves (each tile grows by its photo's shape). No brown letters. */
.cw { --bg: #FFFFFF; --fg: #1E2B20; --muted: #5C695E; --line: #E4E6DE; --band: #F3F3ED; --tile: #EEF0E9; --green: #53754B; --lt: #A9C79A; --g: 3px; --hdr: 0px;
  background: var(--bg); color: var(--fg); font: 15px/1.5 'Figtree', system-ui, sans-serif; }
.cw a { color: inherit; text-decoration: none; }
.cw-caps { font: 600 10.5px/1.4 'Figtree', system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; }

/* ── the slim bar: title, sections or styles, tools; it stays under the menu ── */
.cw-bar { position: sticky; top: var(--hdr); z-index: 25; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px); border-bottom: 1px solid var(--line); }
.cw-bar__in { padding: 16px 24px 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 10px 36px; }
.cw-ttl { display: flex; flex-direction: column; line-height: 1; padding-bottom: 14px; min-width: 0; }
.cw-crumb { font: 500 10px 'Figtree', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-crumb a:hover { color: var(--fg); }
.cw-crumb svg, .cw-crumb img, .cw-crumb i { width: 11px; height: 11px; vertical-align: -1px; display: inline-block; font-size: 11px; }
.cw-ttl h1 { margin: 0; font: 500 clamp(28px, 2.4vw, 38px)/1 'Cormorant Garamond', Georgia, serif; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; color: var(--fg); }
.cw-count { font: 600 10.5px 'Figtree', sans-serif; letter-spacing: .22em; color: var(--green); margin-left: 14px; vertical-align: middle; }
.cw-tabs { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; align-self: stretch; align-items: flex-end; min-width: 0; }
.cw-tabs::-webkit-scrollbar { display: none; }
.cw-tab { flex: none; display: flex; align-items: center; gap: 7px; padding: 0 0 15px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); cursor: pointer; font: 600 11px 'Figtree', sans-serif; letter-spacing: .2em; text-transform: uppercase; transition: color .2s, border-color .2s; }
.cw-tab small { font-weight: 600; font-size: inherit; color: var(--green); letter-spacing: .06em; }
.cw-tab:hover { color: var(--fg); }
.cw-tab.on { color: var(--fg); border-bottom-color: var(--green); }
.cw-tab:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ── the photos ── */
.cw-wall { display: flex; flex-wrap: wrap; gap: var(--g); padding: var(--g) 0; }
.cw-wall.is-laid { display: block; }
.cw-row { display: flex; gap: var(--g); margin-bottom: var(--g); }
.cw-row:last-child { margin-bottom: 0; }
.cw-t { position: relative; display: block; overflow: hidden; background: var(--tile); color: #fff; isolation: isolate; flex: var(--r) 1 calc(var(--r) * 270px); aspect-ratio: var(--r); }
.cw-wall.is-laid .cw-t { flex: none; aspect-ratio: auto; }
.cw a.cw-t { color: #fff; }
/* a last row too short to fill the width ends with this sage block instead of white space */
.cw-fill { flex: none; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; padding: 24px clamp(20px, 3vw, 44px); background: var(--band); color: var(--fg); overflow: hidden; }
.cw-fill .cw-caps { color: var(--green); }
.cw-fill b { font: 500 clamp(22px, 2vw, 32px)/1.1 'Cormorant Garamond', Georgia, serif; letter-spacing: .04em; text-transform: uppercase; }
.cw-fill p { margin: 0; color: var(--muted); font-size: 14px; max-width: 40ch; }
.cw-fill .cw-lk { margin-top: 6px; }
.cw.has-fill .cw-help { display: none; }
.cw-t[hidden] { display: none; }
.cw-t > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.cw-t:hover > img { transform: scale(1.04); }
.cw-t::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 20, 16, 0) 55%, rgba(14, 20, 16, .68) 100%); pointer-events: none; }
.cw-cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 0 18px 16px; display: grid; gap: 4px; text-shadow: 0 1px 6px rgba(0, 0, 0, .45); }
.cw-cap b { font: 500 clamp(15px, 1.25vw, 21px)/1.1 'Cormorant Garamond', Georgia, serif; letter-spacing: .05em; text-transform: uppercase; }
.cw-cap > span { font: 600 10px 'Figtree', sans-serif; letter-spacing: .22em; text-transform: uppercase; opacity: .95; }
.cw-cap i { font-style: normal; color: var(--lt); opacity: 0; transition: opacity .3s; }
.cw-t:hover .cw-cap i { opacity: 1; }
.cw-best { position: absolute; z-index: 2; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(20, 28, 22, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font: 600 9.5px 'Figtree', sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.cw .cw-heart { position: absolute; z-index: 3; top: 8px; right: 8px; left: auto; bottom: auto; width: 32px; height: 32px; margin: 0; padding: 0; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); display: grid; place-items: center; color: #1E2B20; cursor: pointer; opacity: 0; transition: opacity .25s; }
.cw-t:hover .cw-heart, .cw .cw-heart:focus-visible, .cw .cw-heart[aria-pressed="true"] { opacity: 1; }
.cw .cw-heart svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.cw .cw-heart[aria-pressed="true"] svg { fill: var(--green); stroke: var(--green); }
.cw-wall.small .cw-cap { padding: 0 10px 9px; }
.cw-wall.small .cw-cap b { font-size: 13.5px; }
.cw-wall.small .cw-cap > span { font-size: 9px; letter-spacing: .12em; }
.cw-wall.small .cw-best { font-size: 8px; padding: 3px 7px; top: 7px; left: 7px; }
.cw-none { width: 100%; padding: 60px 20px; margin: 0; text-align: center; color: var(--muted); }
.cw-none a { color: var(--green); font-weight: 600; }
.cw-t.is-in { animation: cw-pop .45s ease both; }
@keyframes cw-pop { from { opacity: 0; transform: translateY(10px); } }

/* ── under the photos ── */
.cw-help { background: var(--band); }
.cw-help__in { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; padding: 26px 24px; }
.cw-help .cw-caps { color: var(--green); display: block; margin-bottom: 6px; }
.cw-help b { display: block; font: 500 clamp(24px, 2.2vw, 32px)/1.1 'Cormorant Garamond', Georgia, serif; letter-spacing: .04em; text-transform: uppercase; }
.cw-help__s { color: var(--muted); font-size: 14px; display: block; margin-top: 4px; }
.cw-lks { display: flex; gap: 10px; flex-wrap: wrap; }
.cw .cw-lk { display: inline-flex; align-items: center; min-height: 46px; padding: 0 24px; border: 1px solid var(--fg); color: var(--fg); font: 600 11px 'Figtree', sans-serif; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; transition: background .2s; }
.cw .cw-lk:hover { background: rgba(30, 43, 32, .08); }
.cw .cw-lk.fill { background: var(--green); border-color: var(--green); color: #fff; }
.cw .cw-lk.fill:hover { background: #45633F; }
.cw-about details { border-bottom: 1px solid var(--line); }
.cw-about summary { list-style: none; cursor: pointer; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; color: var(--fg); }
.cw-about summary::-webkit-details-marker { display: none; }
.cw-about summary::after { content: "+"; font: 300 26px/1 'Figtree', sans-serif; color: var(--green); }
.cw-about details[open] summary::after { content: "\2013"; }
.cw-about__tx { max-width: 820px; margin: 0 auto; padding: 0 24px 40px; color: var(--muted); }
.cw-about__tx h2 { font: 500 30px 'Cormorant Garamond', Georgia, serif; color: var(--fg); margin: 0 0 6px; }
.cw-about__tx h2 + h2, .cw-about__tx h3 { font: 500 21px 'Cormorant Garamond', Georgia, serif; color: var(--green); margin: 0 0 14px; }
.cw-about__tx h2 span, .cw-about__tx span[style] { color: inherit !important; font-weight: inherit !important; }
.cw-about__tx p { margin: 0 0 12px; font-size: inherit !important; }
.cw-about__tx a { color: var(--green); text-decoration: underline; }
.cw-extra { background: var(--bg); padding-top: 24px; }

/* ── phones: the bar folds to two short lines; two designs per row (one big with the size switch) ── */
@media (max-width: 760px) {
  .cw-bar__in { grid-template-columns: minmax(0, 1fr); padding: 10px 12px 0; gap: 8px; align-items: center; }
  .cw-ttl { padding-bottom: 0; }
  .cw-tabs:empty { margin-bottom: 0; }
  .cw-bar__in:has(.cw-tabs:empty) { padding-bottom: 10px; }
  .cw-crumb, .cw-count { display: none; }
  .cw-ttl h1 { font-size: 24px; letter-spacing: .03em; white-space: normal; }
  .cw-tabs { gap: 20px; margin: 0 -12px; padding: 0 12px; }
  .cw-tabs:empty { display: none; }
  .cw-tab { font-size: 10px; letter-spacing: .14em; padding: 0 0 11px; gap: 5px; }
  .cw-t { flex-basis: calc(var(--r) * 150px); }
  .cw .cw-heart { opacity: 1; width: 26px; height: 26px; top: 6px; right: 6px; }
  .cw .cw-heart svg { width: 13px; height: 13px; }
  .cw-cap { padding: 0 10px 10px; }
  .cw-cap i { display: none; }
  .cw-wall.small .cw-cap { padding: 0 8px 7px; }
  .cw-wall.small .cw-cap b { font-size: 12px; letter-spacing: .02em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .cw-wall.small .cw-cap > span { font-size: 8.5px; letter-spacing: .1em; }
  .cw-wall.small .cw-best { font-size: 7.5px; padding: 2px 6px; top: 6px; left: 6px; letter-spacing: .14em; }
  .cw-wall.small .cw-heart { width: 24px; height: 24px; top: 5px; right: 5px; }
  .cw-help__in { padding: 22px 16px; }
  .cw-help b { font-size: 22px; }
  .cw-lks { width: 100%; }
  .cw .cw-lk { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .cw-t.is-in { animation: none; } .cw-t > img { transition: none; } }

/* (owner, Nov 2 2026) the slimmer bar, approved from previews/category-bar-pavilions.html: no breadcrumb line (kept for Google,
   out of sight), title and tabs on one line, a thinner strip once the page scrolls; a tab row wider than the space fades at
   its edge and gets a small arrow; phones hide the bar while scrolling down and bring it back on the way up
   (js/category-compact.js sets .is-small and .is-hidden on .cw, and .more-l / .more-r on the tabs and the bar) */
.cw .cw-crumb { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); }
.cw .cw-bar { transition: transform .3s ease; }
.cw .cw-bar__in { position: relative; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; gap: 0 40px; padding: 0 24px; height: 66px; transition: height .25s ease; }
.cw .cw-ttl { flex-direction: row; align-items: center; padding: 0; }
.cw .cw-ttl h1 { font-size: 30px; transition: font-size .25s ease; }
.cw .cw-count { margin: 0 0 0 14px; white-space: nowrap; transition: opacity .2s; }
.cw .cw-tabs { align-self: stretch; align-items: stretch; gap: 30px; scroll-behavior: smooth; }
.cw .cw-tab { padding: 0; height: 100%; align-items: center; }
.cw .cw-tabs.more-r { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.cw .cw-tabs.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 85%, transparent); }
.cw .cw-tabs.more-l:not(.more-r) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%); mask-image: linear-gradient(90deg, transparent, #000 10%); }
.cw-arrow { display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--fg); place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(30, 43, 32, .12); }
.cw-arrow svg { width: 14px; height: 14px; }
.cw-arrow.r { right: 14px; }
.cw-arrow.l { left: var(--cw-l, 300px); }
.cw-bar.more-r .cw-arrow.r, .cw-bar.more-l .cw-arrow.l { display: grid; }
.cw-arrow:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.cw.is-small .cw-bar__in { height: 50px; }
.cw.is-small .cw-ttl h1 { font-size: 22px; }
.cw.is-small .cw-count { opacity: 0; display: inline-block; width: 0; margin: 0; overflow: hidden; }
.cw.is-small .cw-arrow { width: 26px; height: 26px; }
@media (max-width: 760px) {
  .cw .cw-bar__in { grid-template-columns: minmax(0, 1fr); height: auto; padding: 0 12px; gap: 0; }
  .cw .cw-ttl { height: 46px; }
  .cw .cw-ttl h1 { font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cw .cw-count, .cw.is-small .cw-count { display: inline; opacity: 1; width: auto; font-size: 9.5px; margin-left: 10px; }
  .cw .cw-tabs { height: 40px; gap: 22px; margin: 0 -12px; padding: 0 12px; }
  .cw .cw-tab { padding: 0; }
  .cw-arrow, .cw-bar.more-r .cw-arrow.r, .cw-bar.more-l .cw-arrow.l { display: none; }
  .cw.is-small .cw-bar__in { height: auto; }
  .cw.is-small .cw-ttl h1 { font-size: 24px; }
  .cw.is-hidden .cw-bar { transform: translateY(calc(-100% - 2px)); }
}
@media (prefers-reduced-motion: reduce) { .cw .cw-bar, .cw .cw-bar__in, .cw .cw-ttl h1 { transition: none; } }