[hidden] { display: none !important; }
:root { --ink: #242a2c; --gold: #b78327; --line: #dfe3df; --page-gutter: 32px; --gallery-columns: 2; }
body:not(.owner) { font-family: 'Avenir Next', Avenir, 'Segoe UI', sans-serif; color: var(--ink); background: #eef1ef; }
.brandbar { height: 82px; max-width: none; padding-inline: var(--page-gutter); }
.brand { flex: 1; justify-content: flex-start; gap: 26px; }
.brand img { width: 186px; max-height: 62px; }
.brand span { font: 27px Georgia, 'Times New Roman', serif; text-transform: none; border-left: 1px solid #c8d2c9; padding-left: 26px; }
.sandbox-label { color: #7b817d; font-size: 9px; margin-left: 5px; }
.brandbar > .book { margin-left: 28px; border: 1px solid #e8b653; border-radius: 3px; color: #25352b; background: #e8b653; font-size: 12px; font-weight: 700; padding-inline: 20px; }
.brandbar > .book:hover { background: #f4cb7a; }
#siteHeader { border-bottom: 1px solid #e2e5e0; box-shadow: 0 3px 14px #202b2410; }
#discovery { max-height: 180px; }
.tabs { background: #203e32; border: 0; gap: 28px; justify-content: center; justify-content: safe center; padding-inline: var(--page-gutter); }
.tabs button { background: transparent; color: #e0e4e1; font-size: 13px; min-height: 43px; padding: 10px 15px; border-bottom: 3px solid transparent; }
.tabs button:hover { background: #355343; color: #fff; }
.tabs button[aria-current=page] { color: #fff; border-bottom-color: #e8b653; background: #2d4b3c; }
#rail { padding: 10px var(--page-gutter) 0; gap: 18px; max-width: none; background: #f8faf8; }
#rail button { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 9px; height: 61px; width: auto; min-width: 115px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; padding: 0 4px 9px; overflow: visible; }
#rail img { width: 52px; height: 42px; object-fit: cover; border-radius: 3px; }
#rail span { position: static; font-size: 11px; font-weight: 500; line-height: 14px; color: #4e5955; background: none; padding: 0; white-space: nowrap; }
#rail .selected { border-bottom-color: var(--gold); }
#rail .selected span { color: #805e22; font-weight: 700; }
#rail button:hover img { outline: 1px solid #b8c4b9; outline-offset: 2px; }
#main { max-width: none; padding: 24px var(--page-gutter) 52px; }
.feed-heading { margin-bottom: 20px; align-items: center; border-bottom: 1px solid #ccd5ce; padding-bottom: 16px; }
.feed-heading > div:first-child { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; }
.feed-heading h1 { font: 36px/1.12 Georgia, 'Times New Roman', serif; margin: 0 0 7px; }
.feed-heading #count { font-size: 12px; color: #737e77; }
.heading-actions { gap: 10px; }
.heading-actions .icon { border: 1px solid #dbe2db; border-radius: 50%; background: #fff; }
.heading-actions .icon:hover { background: #edf2ee; }
#feed { gap: 24px; grid-template-columns: repeat(var(--gallery-columns),minmax(0,1fr)); }
#feed.photo-feed { display: block; }
.photo-batch { column-count: var(--gallery-columns); column-gap: 24px; }
.photo-batch .space-card { display: inline-block; vertical-align: top; width: 100%; margin-bottom: 24px; break-inside: avoid; }
.space-card { padding-bottom: 12px; background: #fff; border: 1px solid #dce3dc; border-radius: 4px; overflow: hidden; }
.space-card .card-meta { padding: 13px 14px 0; }
.space-card .card-caption { margin-inline: 14px; padding-right: 0; height: 3em; -webkit-line-clamp: 2; }
.space-card .photo-features { margin-inline: 14px; }
.space-media { border-radius: 4px; background: #e4eae5; outline: 1px solid #24382b12; }
.card-meta { padding-top: 15px; }
.space-card .card-meta > div { display: flex; flex-direction: column; gap: 4px; }
.space-card .view-attributes { order: -1; font-size: 10px; font-weight: 600; text-transform: uppercase; color: #426450; border-left: 3px solid #b78327; padding-left: 8px; }
.space-card .card-meta h2 { font: 22px/1.18 Georgia, 'Times New Roman', serif; margin: 0; overflow-wrap: anywhere; }
.card-caption { font-size: 13px; color: #617065; line-height: 1.5; margin-top: 6px; }
.card-meta .heart { border: 1px solid #e5e9e3; border-radius: 50%; width: 40px; min-height: 40px; padding: 8px; flex: none; }
.card-meta .heart:hover { border-color: #b78327; background: #fbf6ec; }
.card-meta .heart.saved { background: #fbf4e4; border-color: #e6cea3; }
.dots { height: 24px; margin-top: 5px; gap: 7px; }
.dots:empty { display: none; }
.photo-features { display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 5px; margin-top: 12px; color: #425b4c; font-size: 11px; line-height: 1.5; }
.photo-features:empty { display: none; }
.space-card .photo-features { height: 3em; overflow: hidden; row-gap: 0; }
.space-card .photo-features:empty { display: flex; }
.photo-features span { display: inline-flex; align-items: center; gap: 7px; }
.photo-features span:before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #ad7b24; flex: none; }
.edge { background: #ffffffe8; border: 0; width: 34px; height: 42px; border-radius: 3px; opacity: .85; box-shadow: 0 2px 8px #14241a14; }
.callout { background: #203e32; color: #fff; border: 0; border-block: 1px solid #476653; padding: 38px 0; margin-block: 8px 32px; box-shadow: 0 0 0 100vmax #203e32; clip-path: inset(0 -100vmax); gap: 30px; }
.callout h2 { font: 36px/1.12 Georgia, 'Times New Roman', serif; color: #fff; max-width: 560px; margin: 0; }
.callout p { margin-top: 12px; font-size: 14px; line-height: 1.5; color: #d6e3d9; max-width: 500px; }
.callout .callout-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #e9c57c; margin: 0 0 12px; }
.callout .book { flex: none; background: #e8b653; border-color: #e8b653; color: #25352b; border-radius: 3px; font-size: 14px; font-weight: 700; min-height: 52px; padding: 14px 24px; }
.callout .book:hover { background: #f4cb7a; border-color: #f4cb7a; }
.callout .book:focus-visible { outline-color: #fff; }
.section-heading { font: 24px Georgia, 'Times New Roman', serif; padding: 10px 0 14px; border-bottom: 1px solid var(--line); }
#feed.catalog-grid { gap: 28px 24px; grid-template-columns: repeat(var(--gallery-columns),minmax(0,1fr)); }
.product-card .card-meta h2 { font: 19px/1.2 Georgia, 'Times New Roman', serif; }
.product-card .card-meta p { margin-top: 5px; font-size: 11px; }
.product-image { height: 238px; border-radius: 4px; }
.product-image img { padding: 8px; }
.swatch-image img { padding: 0; }
.sheet-head h2 { font: 25px Georgia, 'Times New Roman', serif; }
.sheet-head { border-top: 3px solid #c29a44; }
#viewerDetails h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
footer { max-width: none; padding: 38px var(--page-gutter); background: #e0e9e2; border-top-color: #c1d1c5; }
footer nav { gap: 25px; }
footer nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.bottom-nav { box-shadow: 0 -4px 20px #24382e0a; }
.bottom-nav button { font-family: 'Avenir Next', Avenir, 'Segoe UI', sans-serif; }
.bottom-nav button.active { color: #97722e; }
picture:has(img.loaded) { background: #f4f5f2 !important; }
.carousel {
  width: 100%;
  height: auto;
  aspect-ratio: var(--aspect, 1.3);
  max-height: min(720px, calc(100svh - 230px));
}
.photo-button { min-height: 0; }
.product-image picture:has(img.loaded) { background: #fff !important; }
.product-image { border: 1px solid #edf0e8; }
#feed.swatch-grid { grid-template-columns: repeat(var(--gallery-columns), minmax(0, 1fr)); }
.swatch-image { height: auto; aspect-ratio: 1; }
.swatch-image img { object-fit: cover; }
.swatch-detail { display: flex; align-items: center; gap: 18px; margin-top: 24px; }
.swatch-detail picture { flex: 0 0 100px; width: 100px; height: 100px; }
#swatchToggle[aria-pressed=true] { color: #9c6a13; background: #fbf3e2; }
@media(min-width:1200px) { :root { --gallery-columns: 3; } }
@media(min-width:1700px) { :root { --gallery-columns: 4; --page-gutter: 40px; } }
@media(min-width:2400px) { :root { --page-gutter: 48px; } }
@media (max-width: 700px) {
  :root { --gallery-columns: 1; --page-gutter: 16px; }
  .brandbar { height: 59px; padding: 8px 16px; gap: 9px; }
  .brand { flex: none; }
  .brand img { width: 116px; max-height: 40px; }
  .brand span { display: none; }
  .brandbar > .book { margin-left: auto; min-height: 37px; padding: 6px 10px; font-size: 0; }
  .brandbar > .book:before { font-size: 12px; }
  .sandbox-label { font-size: 8px; margin-left: 0; }
  .tabs { gap: 8px; padding-inline: 12px; }
  .tabs button { font-size: 10px; min-height: 40px; padding: 9px 2px; }
  #rail { padding: 8px 16px 0; gap: 12px; }
  #rail button { height: 57px; min-width: 98px; width: auto; gap: 7px; }
  #rail img { width: 43px; height: 36px; }
  #rail span { font-size: 10px; line-height: 14px; }
  #main { padding: 17px 16px 32px; }
  .feed-heading { margin-bottom: 16px; padding-bottom: 12px; }
  .feed-heading > div:first-child { display: block; }
  .feed-heading h1 { font-size: 29px; margin-bottom: 6px; }
  .feed-heading #count { font-size: 11px; }
  .heading-actions { gap: 5px; }
  .heading-actions .icon { width: 38px; min-height: 38px; padding: 8px; }
  .space-card .card-meta h2 { font-size: 21px; }
  .space-card .view-attributes { font-size: 9px; }
  .card-meta .heart { width: 38px; min-height: 38px; }
  .card-caption { font-size: 12px; }
  .callout { padding: 28px 0; gap: 20px; }
  .callout h2 { font-size: 30px; max-width: 330px; }
  .callout p { font-size: 13px; }
  .callout .book { width: 100%; }
  .photo-features { font-size: 10px; margin-top: 10px; }
  .photo-batch .space-card { margin-bottom: 20px; }
  .product-card .card-meta h2 { font-size: 16px; }
  .product-card .card-meta p { font-size: 10px; }
  .product-card .card-meta .heart { border: 0; width: 30px; min-height: 34px; padding: 5px; }
  .section-heading { font-size: 22px; }
  #feed.catalog-grid { gap: 25px 14px; grid-template-columns: repeat(2,minmax(0,1fr)); }
  footer { padding: 30px 20px; }
  .carousel { min-height: 0; max-height: min(470px, calc(100svh - 335px)); }
  .space-card .card-meta { padding-top: 12px; }
  .product-image { height: 185px; }
  #feed.swatch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swatch-image { height: auto; }
}
/* Catalog variants keep a stable frame while preserving each source image. */
.product-card { min-width: 0; }
.product-stage { position: relative; background: #fff; }
.product-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: 4px; }
.product-carousel::-webkit-scrollbar, .product-thumbnails::-webkit-scrollbar { display: none; }
.product-carousel .product-image { flex: 0 0 100%; width: 100%; height: 260px; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; padding: 14px 50px; background: #fff; }
.product-carousel .product-image picture { width: 100%; height: 100%; display: block; background: #fff !important; }
.product-carousel .product-image img { width: 100%; height: 100%; object-fit: contain; }
.product-arrow { position: absolute; top: calc(50% - 20px); width: 40px; height: 40px; display: grid; place-items: center; background: #ffffffed; border: 1px solid #d0d8cf; border-radius: 50%; color: #35583b; box-shadow: 0 2px 6px #0000000d; }
.product-arrow.previous { left: 8px; }.product-arrow.next { right: 8px; }
.product-arrow:disabled { visibility: hidden; }
.product-view-meta { display: flex; justify-content: space-between; gap: 10px; align-items: center; min-height: 42px; font-size: 13px; padding: 6px 2px; }
.product-view-label { color: #35583b; font-weight: 600; }
.product-view-count { white-space: nowrap; color: #626960; font-variant-numeric: tabular-nums; }
.product-thumbnails { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 3px 1px 7px; }
.product-thumbnails button { flex: 0 0 48px; width: 48px; height: 48px; padding: 3px; background: #fff; border: 1px solid #d6ddd5; border-radius: 4px; }
.product-thumbnails button[aria-pressed="true"] { border: 2px solid #386143; background: #f0f5ef; padding: 2px; }
.product-thumbnails img { width: 100%; height: 100%; object-fit: contain; }
.product-media-detail .product-image { height: min(52dvh, 480px); }
.product-media-detail .product-thumbnails button { flex-basis: 56px; width: 56px; height: 56px; }
@media (max-width: 700px) {
 .product-carousel .product-image { height: 195px; padding: 7px 44px; }
 .product-media-detail .product-image { height: min(48dvh, 390px); }
 .product-view-meta { font-size: 12px; }
}
@media (hover: none) and (pointer: coarse) { .product-arrow { display: none; } .product-carousel .product-image { padding: 14px; } }
@media (prefers-reduced-motion: reduce) { .product-carousel { scroll-behavior: auto; } }