/* ============================================================
   REY CERA — shared styles for tile category / landing pages
   Warm Stone palette, mobile-first responsive.
   ============================================================ */
:root {
    --bg-main: #fdfcfa; --bg-card: #fffdfb; --bg-alt: #f6f2ec;
    --text-main: #2c2823; --text-muted: #8a8073; --border: #e9e2d6;
    --accent: #a56a4f; --gold: #7e846a;
    --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--bg-main); color: var(--text-main); line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, iframe { max-width: 100%; }
a { color: var(--accent); }

/* Nav */
.navbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 5%; border-bottom: 1px solid var(--border); background: rgba(253,252,250,0.9); backdrop-filter: saturate(180%) blur(6px); position: sticky; top: 0; z-index: 100; }
.nav-logo img { max-width: 108px; border-radius: 8px; }
.nav-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { display: inline-block; text-decoration: none; font-weight: 600; font-size: 0.74rem; letter-spacing: 1px; text-transform: uppercase; padding: 10px 18px; border-radius: 7px; border: 1px solid var(--border); color: var(--text-main); background: transparent; cursor: pointer; transition: all .25s ease; }
.btn:hover { background: var(--bg-alt); border-color: var(--text-muted); }
.btn-solid { background: var(--text-main); color: #fff; border-color: var(--text-main); }
.btn-solid:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-accent:hover { opacity: .9; }

/* Breadcrumb */
.crumb { max-width: 1100px; margin: 0 auto; padding: 18px 20px 0; font-size: 0.82rem; color: var(--text-muted); }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

/* Hero */
.page-hero { max-width: 1100px; margin: 0 auto; padding: 26px 20px 10px; }
.eyebrow { display: inline-block; background: var(--bg-card); color: var(--text-muted); padding: 7px 16px; border-radius: 50px; font-size: 0.68rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; border: 1px solid var(--border); margin-bottom: 18px; }
.page-hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08; letter-spacing: -0.4px; margin-bottom: 16px; }
.page-hero h1 em { font-style: italic; color: var(--accent); }
.lead { color: var(--text-muted); font-size: 1.12rem; max-width: 760px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* Content */
.wrap { max-width: 1100px; margin: 0 auto; padding: 40px 20px; }
.section-title { font-family: var(--serif); font-weight: 600; font-size: 2rem; margin: 40px 0 6px; position: relative; padding-bottom: 14px; }
.section-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 48px; height: 2px; background: var(--accent); }
.section-sub { color: var(--text-muted); margin-bottom: 22px; }
.prose p { color: var(--text-main); margin-bottom: 16px; }
.prose strong { color: var(--text-main); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 8px 0 10px; }
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; box-shadow: 0 6px 22px -16px rgba(44,40,35,0.18); }
.card h3 { font-family: var(--sans); font-size: 1.02rem; font-weight: 700; margin-bottom: 8px; }
.card p { color: var(--text-muted); font-size: 0.95rem; margin: 0; }
.card.link-card { text-decoration: none; color: inherit; display: block; transition: transform .2s, border-color .2s; }
.card.link-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.card.link-card .go { color: var(--accent); font-weight: 600; font-size: 0.9rem; margin-top: 10px; display: inline-block; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 10px; }
.chip { background: var(--bg-alt); border: 1px solid var(--border); color: var(--text-main); padding: 8px 15px; border-radius: 50px; font-size: 0.9rem; font-weight: 500; }

ul.ticks { list-style: none; padding: 0; margin: 6px 0 14px; }
ul.ticks li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--text-main); }
ul.ticks li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* Contact / showroom */
.showroom { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: stretch; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 16px; padding: 28px; margin-top: 20px; }
.showroom h3 { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; margin-bottom: 10px; }
.showroom .map { min-height: 240px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.contact-row { margin: 12px 0; }
.contact-row .lbl { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-weight: 700; }
.contact-row a { color: var(--text-main); text-decoration: none; font-weight: 600; }
.contact-row a:hover { color: var(--accent); }

/* FAQ */
.faq-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 18px 22px; margin-bottom: 12px; }
.faq-item h3 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.faq-item p { color: var(--text-muted); font-size: 0.96rem; margin: 0; }

/* Related links */
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 10px; }

/* Dealer Network page: map below the dealer list (populated live by dealer-network.js) */
.dealer-map { width: 100%; height: 380px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-alt); margin-top: 24px; }
@media (max-width: 760px) { .dealer-map { height: 280px; } }

/* Per-dealer card enrichment: phone/rating/Google-profile link (filled in
   once the dealer's own Places lookup resolves) and that dealer's main photo
   from their own Google Business Profile (left as an empty placeholder box
   when Google has no photo for that listing — see #dealer-network-list .card
   below for why the box always reserves this space either way). */
.dealer-profile { font-size: 0.82rem; color: var(--text-muted); margin: 6px 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; min-height: 1.2em; }
.dealer-profile a { color: var(--accent); font-weight: 600; text-decoration: none; }
.dealer-profile a:hover { text-decoration: underline; }
.dealer-rating { color: var(--gold); font-weight: 600; }
.dealer-photos { margin: 8px 0; border-radius: 8px; overflow: hidden; background: var(--bg-alt); }
.dealer-photos img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Every card in the Dealer Network grid is forced to the same fixed size,
   regardless of how much a given dealer's data fills in (address length,
   whether phone/rating/photo resolved) — name and address are clamped to 2
   lines, the photo slot has a fixed height whether or not it ends up with an
   image, and the "View on Google Maps" link is pinned to the bottom via
   margin-top:auto so short cards don't look front-loaded. */
#dealer-network-list.grid { align-items: stretch; }
#dealer-network-list .card { display: flex; flex-direction: column; height: 420px; overflow: hidden; }
#dealer-network-list .card h3,
#dealer-network-list .card p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#dealer-network-list .card .dealer-photos { height: 120px; flex: 0 0 auto; }
#dealer-network-list .card .dealer-card-cta { color: var(--accent); font-weight: 600; font-size: 0.88rem; text-decoration: none; display: inline-block; margin-top: auto; padding-top: 8px; }
.dealer-badge { display: inline-block; background: var(--accent); color: #fff; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 10px; border-radius: 50px; margin-bottom: 8px; }

/* Product photo gallery (populated live from the Product Gallery admin tool).
   Sized for a large catalog (1000s of SKUs) — a dense grid of small cards
   rather than a handful of showcase tiles. */
.gallery-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.gallery-filters select { padding: 8px 12px; border-radius: 50px; border: 1px solid var(--border); background: var(--bg-alt); color: var(--text-main); font-size: 0.85rem; font-family: var(--sans); cursor: pointer; }
.gallery-filters select:focus { border-color: var(--accent); outline: none; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin: 8px 0 10px; }
.gallery-empty { grid-column: 1 / -1; color: var(--text-muted); font-size: 0.92rem; padding: 20px 0; }
.gallery-card { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; box-shadow: 0 3px 10px -8px rgba(44,40,35,0.25); cursor: pointer; transition: transform .15s, border-color .15s; text-align: left; padding: 0; }
.gallery-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.gallery-thumb { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--bg-alt); }
.gallery-count { position: absolute; top: 5px; right: 5px; background: rgba(28,24,20,0.68); color: #fff; font-size: 0.62rem; font-weight: 700; padding: 1px 6px; border-radius: 50px; line-height: 1.5; }
.gallery-info { padding: 6px 7px; }
.gallery-info h3 { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gallery-info p { color: var(--text-muted); font-size: 0.62rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gallery-price { color: var(--accent); font-size: 0.66rem; font-weight: 700; margin-top: 2px; }

/* Lightbox: full product view with all photos */
.lightbox-overlay { position: fixed; inset: 0; background: rgba(28,24,20,0.92); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.lightbox-overlay[hidden] { display: none; }
.lightbox-box { max-width: 900px; width: 100%; }
.lightbox-stage { position: relative; background: var(--bg-alt); border-radius: 12px; overflow: hidden; }
.lightbox-stage img { width: 100%; max-height: 70vh; object-fit: contain; display: block; }
.lightbox-caption { color: #fff; text-align: center; margin-top: 16px; }
.lightbox-caption h3 { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; margin: 0 0 4px; }
.lightbox-caption p { color: #d8d0c4; font-size: 0.92rem; margin: 0; }
.lightbox-caption .lightbox-price { color: var(--accent); font-weight: 700; margin-top: 4px; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: #fff; border: 0; width: 42px; height: 42px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; }
.lightbox-nav:hover { background: var(--accent); }
.lightbox-prev { left: 12px; } .lightbox-next { right: 12px; }
.lightbox-close { position: absolute; top: -46px; right: 0; background: transparent; color: #fff; border: 0; font-size: 1.6rem; cursor: pointer; line-height: 1; }
.lightbox-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.lightbox-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.35); cursor: pointer; }
.lightbox-dots span.active { background: var(--accent); }

/* Footer */
.footer { text-align: center; padding: 40px 20px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.9rem; background: var(--bg-card); margin-top: 40px; }
.footer a { color: var(--text-muted); text-decoration: none; }
.footer a:hover { color: var(--accent); }

/* PDF catalog cards + "Share on WhatsApp" (see whatsapp-share.js) */
.catalog-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.catalog-info { display: flex; align-items: center; gap: 14px; min-width: 0; }
.catalog-icon { font-size: 1.8rem; flex: 0 0 auto; }
.catalog-name { font-family: var(--sans); font-size: 1rem; font-weight: 700; margin: 0 0 2px; color: var(--text-main); }
.catalog-meta { color: var(--text-muted); font-size: 0.82rem; margin: 0; }
.catalog-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-whatsapp-share {
    display: inline-flex; align-items: center; gap: 8px;
    background: #25D366; color: #fff; border: 1px solid #25D366;
    font-family: var(--sans); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.2px;
    padding: 10px 16px; border-radius: 7px; cursor: pointer; transition: all .2s ease;
}
.btn-whatsapp-share:hover { background: #1ebc59; border-color: #1ebc59; }
.btn-whatsapp-share:disabled { opacity: .6; cursor: default; }
.btn-whatsapp-share svg { flex: 0 0 auto; }
@media (max-width: 520px) {
    .catalog-card { flex-direction: column; align-items: flex-start; }
    .catalog-actions { width: 100%; }
    .catalog-actions .btn-whatsapp-share, .catalog-actions .btn { flex: 1; justify-content: center; }
}

@media (max-width: 760px) {
    .navbar { padding: 14px 18px; }
    .showroom { grid-template-columns: 1fr; padding: 22px; }
    .section-title { font-size: 1.7rem; }
    .lead { font-size: 1.02rem; }
    .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
    .lightbox-nav { width: 36px; height: 36px; font-size: 1rem; }
    .lightbox-close { top: -40px; font-size: 1.4rem; }
}