/* liviatchen.com catalogue pages (catalog.php, item.php) and the home page's
   "popular now" strip. Same cream/gold language as the rest of the site; the
   card mirrors the blog card (rounded 18px, sand border, lift on hover). */
:root {
    --gold: #C9A84C; --gold-light: #E2CC7E; --gold-deep: #A68A2A; --gold-pale: #F8F0DA;
    --pink-pale: #FBF2F5; --white: #FFFFFF; --cream: #FDFBF7; --warm: #FAF6EF;
    --sand: #F0EAE0; --sand-dark: #E4DCCF; --text: #3A3228; --text-soft: #6B6157; --text-faint: #9A9088;
}
.catalog-page { background: var(--cream); color: var(--text); font-family: 'Rubik', sans-serif; }
.cat-main { max-width: 1120px; margin: 0 auto; padding: 36px 20px 80px; }
.cat-head { text-align: center; margin: 12px 0 28px; }
.cat-kicker { color: #B98A98; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; margin-bottom: 10px; }
.cat-title { font-family: 'Frank Ruhl Libre', serif; font-weight: 700; font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 12px; color: var(--text); }
.cat-sub { color: var(--text-soft); max-width: 560px; margin: 0 auto; line-height: 1.7; }

.cat-types { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 26px; }
.cat-pill { border: 1px solid var(--sand-dark); background: var(--white); color: var(--text-soft); border-radius: 50px; padding: 8px 16px; font-family: inherit; font-size: .84rem; cursor: pointer; transition: all .25s; }
.cat-pill:hover { border-color: var(--gold-light); color: var(--text); }
.cat-pill.is-active { background: var(--gold); border-color: var(--gold); color: var(--white); font-weight: 600; }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
.cat-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--sand); border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit; transition: all .35s; }
.cat-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(58,50,40,.10); border-color: var(--gold-light); }
.cat-card-img { aspect-ratio: 1 / 1; background: var(--white); overflow: hidden; position: relative; }
.cat-badge { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 1; background: var(--gold); color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .06em; padding: 5px 11px; border-radius: 999px; box-shadow: 0 4px 12px rgba(58,50,40,.16); }
.item-badge { position: static; display: inline-block; margin-bottom: 12px; }
.item-interest { color: var(--gold-deep); font-weight: 600; margin: -16px 0 24px; font-size: .95rem; }
.cat-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-card-body { padding: 14px 16px 18px; }
.cat-card-type { color: var(--text-faint); font-size: .74rem; letter-spacing: .04em; margin-bottom: 6px; }
.cat-card-title { font-family: 'Frank Ruhl Libre', serif; font-size: 1.05rem; font-weight: 700; margin: 0; line-height: 1.35; }

.cat-empty { text-align: center; color: var(--text-soft); padding: 48px 12px; line-height: 1.7; }
.cat-error { color: #A06680; }
.cat-more-wrap { text-align: center; margin-top: 30px; }
.cat-more { background: var(--gold); color: var(--white); border: 2px solid var(--gold); border-radius: 50px; padding: 12px 30px; font-family: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; transition: all .3s; }
.cat-more:hover { background: var(--white); color: var(--gold-deep); }
.cat-more:disabled { opacity: .6; cursor: default; }

/* item page */
.item-back { display: inline-block; color: var(--gold-deep); text-decoration: none; font-size: .88rem; margin-bottom: 22px; }
.item-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 800px) { .item-wrap { grid-template-columns: 1fr; gap: 24px; } }
.item-media { background: var(--white); border: 1px solid var(--sand); border-radius: 22px; overflow: hidden; }
.item-media img { width: 100%; display: block; aspect-ratio: 1 / 1; object-fit: cover; }
.item-title { font-family: 'Frank Ruhl Libre', serif; font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.3rem); margin: 6px 0 14px; line-height: 1.2; }
.item-desc { color: var(--text-soft); line-height: 1.8; margin: 0 0 22px; font-size: 1.02rem; }
.item-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 0 0 28px; padding: 0; }
.item-facts > div { background: var(--warm); border-radius: 12px; padding: 10px 14px; }
.item-facts dt { font-size: .72rem; color: var(--text-faint); letter-spacing: .06em; margin-bottom: 3px; }
.item-facts dd { margin: 0; font-weight: 600; }
.item-ask { background: var(--white); border: 1px solid var(--sand); border-radius: 18px; padding: 22px 22px 24px; }
.item-ask h2 { font-family: 'Frank Ruhl Libre', serif; font-size: 1.35rem; margin: 0 0 6px; }
.item-ask p { color: var(--text-soft); line-height: 1.65; margin: 0 0 16px; font-size: .92rem; }
.item-ask label { display: block; font-size: .82rem; color: var(--text-soft); margin-bottom: 12px; }
.item-ask input, .item-ask textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 5px; padding: 11px 14px; border: 1px solid var(--sand-dark); border-radius: 12px; font-family: inherit; font-size: .95rem; background: var(--cream); }
.item-ask input:focus, .item-ask textarea:focus { outline: none; border-color: var(--gold); background: var(--white); }
.item-ask-error { color: #A06680 !important; font-size: .85rem !important; }
.item-ask-done { color: var(--gold-deep) !important; font-weight: 600; }
.item-wa { display: inline-block; margin-inline-start: 14px; color: var(--text-soft); font-size: .86rem; text-decoration: underline; }

/* home page strip */
.popular-section { padding: 70px 20px; background: var(--white); text-align: center; }
.popular-section .cat-grid { max-width: 1080px; margin: 26px auto 0; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.popular-section .cat-all { display: inline-block; margin-top: 26px; border: 1px solid var(--gold); color: var(--gold-deep); border-radius: 50px; padding: 11px 26px; text-decoration: none; font-size: .88rem; font-weight: 500; transition: all .3s; }
.popular-section .cat-all:hover { background: var(--gold); color: var(--white); }

.cat-metals { margin-top: -14px; }
.cat-pill-metal { font-size: .78rem; padding: 6px 13px; background: var(--warm); }

.cat-sort { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: -10px 0 18px; font-size: .84rem; color: var(--text-soft); }
.cat-sort select { font-family: inherit; font-size: .84rem; padding: 7px 12px; border: 1px solid var(--sand-dark); border-radius: 50px; background: var(--white); color: var(--text); }
.home-cats { max-width: 1080px; margin: 26px auto 22px; }


.cat-hint { text-align: center; color: var(--text-soft); margin: -6px 0 26px; font-size: .95rem; }

/* category tiles - atmosphere photographs, the caption BELOW the picture (owner) */
.cat-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; margin: 0 0 26px; }
@media (max-width: 760px) { .cat-cats { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.cat-cat { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; background: none; cursor: pointer; font-family: inherit; text-decoration: none; color: var(--text); text-align: center; }
.cat-cat img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 18px; background: var(--sand); transition: transform .35s, box-shadow .35s; }
.cat-cat span { font-family: 'Frank Ruhl Libre', serif; font-weight: 700; font-size: 1.1rem; line-height: 1.3; }
.cat-cat:hover img { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(58,50,40,.14); }
.cat-cat.is-active img { outline: 3px solid var(--gold); outline-offset: 2px; }
.cat-cat.is-active span { color: var(--gold-deep); }
.cat-cat:focus-visible { outline: none; }
.cat-cat:focus-visible img { outline: 3px solid var(--gold-deep); outline-offset: 2px; }
.cat-groups .cat-cat span { font-size: 1.25rem; }
@media (max-width: 760px) { .cat-groups { grid-template-columns: 1fr; } .cat-groups .cat-cat img { aspect-ratio: 5 / 2; } }

/* sets: one card per suite, a mosaic of its pieces */
.cat-set-mosaic { display: grid; gap: 2px; background: var(--sand); aspect-ratio: 1 / 1; overflow: hidden; }
.cat-set-mosaic.n1 { grid-template-columns: 1fr; }
.cat-set-mosaic.n2 { grid-template-columns: 1fr 1fr; }
.cat-set-mosaic.n3, .cat-set-mosaic.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.cat-set-mosaic.n3 img:first-child { grid-row: span 2; }
.cat-set-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--white); }
.item-set { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--sand); }
.item-set-title { font-family: 'Frank Ruhl Libre', serif; font-weight: 700; font-size: 1.6rem; margin: 0 0 6px; }
.item-set .cat-sub { margin: 0 0 18px; }
.item-set .cat-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* item image: open and enlarge */
.item-zoom { display: block; width: 100%; border: 0; padding: 0; background: none; cursor: zoom-in; position: relative; font-family: inherit; }
.item-zoom img { width: 100%; display: block; aspect-ratio: 1 / 1; object-fit: cover; }
.item-zoom-hint { position: absolute; bottom: 12px; inset-inline-end: 12px; width: 38px; height: 38px; border-radius: 50%; background: rgba(253,251,247,.92); color: var(--text); display: grid; place-items: center; font-size: 1.1rem; box-shadow: 0 4px 14px rgba(58,50,40,.15); }
.lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(30,26,22,.94); display: grid; place-items: center; }
.lightbox-stage { width: 100%; height: 100%; display: grid; place-items: center; overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pinch-zoom; }
.lightbox-stage img { max-width: 96vw; max-height: 92vh; object-fit: contain; cursor: zoom-in; transition: transform .3s; border-radius: 6px; }
.lightbox-stage img.is-zoomed { transform: scale(2); cursor: zoom-out; }
.lightbox-close { position: fixed; top: 16px; inset-inline-start: 16px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(253,251,247,.92); color: var(--text); font-size: 1.1rem; cursor: pointer; z-index: 1; }
body.lb-open { overflow: hidden; }

/* An author display: value would beat the hidden attribute; keep hidden hidden. */
.catalog-page [hidden], .popular-section [hidden], .popular-section[hidden] { display: none !important; }