/*
 * Sales Listings go-live build (2026-08-17): "The Card Yard" visual language, per the design handoff
 * (design_handoff_card_yard/README.md + Sales Listings Concepts.dc.html, section id="c1"). Not constrained to the
 * site's existing .ea-* dashboard design system (an explicit design-brief decision); this is its own self-contained
 * component vocabulary, shared across browse, listing detail, the create/edit wizard, my-sales, and subscribe pages.
 * Served directly by nginx from /css/, same convention as every other stylesheet in public/css/.
 */

.cy, .cy *, .cy *::before, .cy *::after { box-sizing: border-box; }

.cy {
    font-family: 'Roboto', sans-serif;
    color: #34383d;
    background: #fdf1e6;
    overflow-x: hidden;
}

.cy a { color: inherit; text-decoration: none; }
.cy a:hover { color: #0f5c3f; }

.cy-wrap { max-width: 1280px; margin: 0 auto; padding: 28px 20px 60px; }

.cy-heading {
    font-family: 'Lato', sans-serif; font-weight: 900; color: #0f5c3f; margin: 0 0 18px; font-size: 28px;
}

/* Filter/sort chip row */
.cy-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; max-width: 100%; }
.cy-chip-select {
    appearance: none; -webkit-appearance: none; font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 700;
    padding: 6px 28px 6px 12px; border-radius: 16px; background: #eef6e4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2334383d'/%3E%3C/svg%3E") no-repeat right 10px center;
    border: 1px solid #cfe3ba; color: #34383d; cursor: pointer; max-width: 100%;
}
.cy-sort-select {
    appearance: none; -webkit-appearance: none; margin-left: auto; font-family: 'Roboto', sans-serif; font-size: 12px;
    font-weight: 700; padding: 6px 28px 6px 12px; border-radius: 16px; background: #34383d
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23fff'/%3E%3C/svg%3E") no-repeat right 10px center;
    border: none; color: #fff; cursor: pointer; max-width: 100%;
}
@media (max-width: 640px) {
    .cy-filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
    .cy-chip-select, .cy-sort-select { flex: none; }
    .cy-sort-select { margin-left: 0; }
}

/* Colour swatch quick-filter row */
.cy-swatches { display: flex; gap: 8px; margin-bottom: 18px; align-items: center; }
.cy-swatch {
    width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .12); display: inline-block;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.cy-swatch-clear { background: #fff; border: 2px solid #79b23c; }
.cy-swatch-count { font-size: 11px; color: #787f87; margin-left: 2px; }

/* Desktop card grid */
.cy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .cy-grid { grid-template-columns: repeat(2, 1fr); } }

.cy-card { display: none; perspective: 1400px; cursor: pointer; }
.cy-card-flip {
    position: relative; height: 280px; transform-style: preserve-3d; transition: transform .6s;
}
.cy-card-flip.cy-card-flipped { transform: rotateY(180deg); }

.cy-card-face {
    position: absolute; inset: 0; backface-visibility: hidden; border-radius: 14px; display: flex; flex-direction: column;
}
.cy-card-front {
    background: #fff; border: 1px solid #e6e9eb; overflow: hidden; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .2);
}
.cy-card-back { background: #0f5c3f; color: #fff; padding: 14px; transform: rotateY(180deg); }

.cy-card-photo { position: relative; height: 130px; background: #eef6e4; }
.cy-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.cy-no-photo {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: repeating-linear-gradient(45deg, #eef6e4, #eef6e4 8px, #e1efd3 8px, #e1efd3 16px);
}
.cy-no-photo-label { font-family: 'Roboto Mono', monospace; font-size: 10px; color: #5d8f2c; letter-spacing: .05em; }

.cy-price-badge {
    position: absolute; top: 8px; right: 8px; background: #e8862e; color: #fff; font-family: 'Lato', sans-serif;
    font-weight: 900; font-size: 13px; padding: 4px 9px; border-radius: 8px;
}
.cy-cert-badge {
    position: absolute; top: 8px; left: 8px; background: #0f5c3f; color: #fff; font-size: 9px; font-weight: 700;
    padding: 4px 7px; border-radius: 6px;
}

.cy-card-body { padding: 10px 12px; flex: 1; display: flex; flex-direction: column; }
.cy-card-name { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 15px; color: #34383d; }
.cy-card-meta { font-size: 11px; color: #787f87; margin: 3px 0 8px; }
.cy-view-btn-outline {
    margin-top: auto; text-align: center; border: 1.5px solid #34383d; border-radius: 8px; padding: 6px 0;
    font-size: 12px; font-weight: 700; display: block;
}
.cy-view-btn-solid {
    text-align: center; background: #e8862e; color: #fff; border-radius: 8px; padding: 7px 0; font-size: 12px;
    font-weight: 700; display: block;
}

.cy-back-price { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 20px; }
.cy-back-meta { font-size: 11px; color: #bfe0c9; margin: 8px 0; line-height: 1.5; }
.cy-back-pedigree { font-size: 11px; font-style: italic; color: #eef6e4; flex: 1; }

/* Mobile list (no flip, per the design handoff's own mobile mockup) */
.cy-list { display: none; flex-direction: column; gap: 12px; }
.cy-list-row { background: #fff; border: 1px solid #e6e9eb; border-radius: 14px; display: flex; }
.cy-list-photo {
    width: 88px; height: 96px; flex: none; position: relative; background: #eef6e4; border-radius: 14px 0 0 14px;
    overflow: hidden;
}
.cy-list-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cy-list-body { padding: 10px 12px 12px; flex: 1; min-width: 0; }
.cy-list-top { display: flex; justify-content: space-between; gap: 8px; min-width: 0; }
.cy-list-name { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 14px; min-width: 0; overflow-wrap: break-word; }
.cy-list-price { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 13px; color: #e8862e; white-space: nowrap; }
.cy-list-meta { font-size: 10px; color: #787f87; margin: 3px 0 8px; }

@media (max-width: 640px) {
    .cy-grid { display: none; }
    .cy-list { display: flex; }
}
@media (min-width: 641px) { .cy-card { display: block; } }

/* Listing detail */
.cy-detail { max-width: 920px; margin: 0 auto; background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid #e6e9eb; }
.cy-detail-hero { position: relative; height: 340px; background: #eef6e4; }
.cy-detail-hero img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.cy-status-chip {
    position: absolute; top: 10px; left: 10px; color: #fff; font-size: 11px; font-weight: 700; padding: 4px 9px;
    border-radius: 8px;
}
.cy-status-available { background: #79b23c; }
.cy-status-under-offer { background: #e8862e; }
.cy-status-other { background: #787f87; }
/* .cy-detail-hero .cy-back-link (two classes), not .cy-back-link alone: needs to out-specificity this file's own '.cy a { color:
   inherit; }' (one class + one element) above, which otherwise wins and repaints this link the page's dark body text colour instead
   of white, unreadable against the dark translucent chip background below. */
.cy-detail-hero .cy-back-link {
    position: absolute; top: 10px; right: 10px; background: rgba(52, 56, 61, .72); color: #fff; font-size: 11px;
    font-weight: 700; padding: 6px 11px; border-radius: 8px;
}
.cy-detail-hero .cy-back-link:hover { color: #fff; background: rgba(52, 56, 61, .9); }
.cy-detail-price {
    position: absolute; bottom: -14px; right: 14px; background: #e8862e; color: #fff; font-family: 'Lato', sans-serif;
    font-weight: 900; font-size: 20px; padding: 8px 14px; border-radius: 10px; box-shadow: 0 8px 16px -6px rgba(0, 0, 0, .4);
}
.cy-detail-body { padding: 26px 20px 20px; }
.cy-detail-name { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 22px; color: #34383d; }
.cy-detail-name .cy-cert-badge { position: static; margin-left: 8px; vertical-align: middle; }
.cy-detail-locale { font-size: 13px; color: #787f87; margin: 4px 0 14px; }
.cy-detail-actions { display: flex; gap: 8px; margin-bottom: 16px; }
.cy-btn-call {
    flex: 1; text-align: center; background: #79b23c; color: #fff; font-weight: 700; font-size: 14px; padding: 12px 0;
    border-radius: 10px; display: block;
}
.cy-btn-email {
    flex: 1; text-align: center; border: 1.5px solid #34383d; color: #34383d; font-weight: 700; font-size: 14px;
    padding: 12px 0; border-radius: 10px; display: block;
}
.cy-stat-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.cy-stat-chip {
    font-size: 11px; font-weight: 700; background: #eef6e4; border: 1px solid #cfe3ba; border-radius: 14px; padding: 5px 10px;
}
.cy-description { font-size: 13px; line-height: 1.6; color: #4a4f57; margin: 0 0 16px; white-space: pre-line; }
.cy-pedigree-panel { background: #fdf1e6; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.cy-pedigree-label { font-size: 11px; font-weight: 700; color: #8a5a2c; margin-bottom: 4px; }
.cy-pedigree-text { font-size: 12px; color: #34383d; }
.cy-pedigree-link { font-size: 11px; font-weight: 700; color: #0f5c3f; display: inline-block; margin-top: 4px; }

/* Fleece characteristics, promoted into the detail body itself (2026-08-21, owner request: fleece is the industry's premier value
   outcome, so it shouldn't be just another cy-section competing with contact/event/progeny further down the page) instead of a plain
   cy-section. Amber/gold panel to stand out against the white detail body, same accent family the fleece micron sparkline on
   animal_profile_pet.html already uses (#C9A227-ish gold), not the green cy-pedigree-panel/cy-upsell family, so fleece reads as its
   own distinct thing rather than blending into the general "info panel" look. */
.cy-fleece-highlight { background: #fbf6ec; border: 1px solid #e7d9b8; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.cy-fleece-highlight-title {
    font-family: 'Lato', sans-serif; font-weight: 900; font-size: 12px; color: #8a5a2c; text-transform: uppercase;
    letter-spacing: .04em; margin-bottom: 8px;
}
.cy-fleece-highlight-text { font-size: 13px; line-height: 1.6; color: #4a4f57; margin: 0 0 4px; white-space: pre-line; }

.cy-contact-locked {
    background: #eef6e4; border: 1px dashed #cfe3ba; border-radius: 10px; padding: 16px; text-align: center; margin-bottom: 16px;
}
.cy-contact-locked-icon { font-size: 22px; }
.cy-contact-locked-text { font-size: 12px; color: #34383d; margin: 6px 0 10px; }
.cy-guest-signup-btn {
    font-size: 12px; font-weight: 700; background: #79b23c; color: #fff; border-radius: 8px; padding: 8px 0;
    display: block; border: none; width: 100%; cursor: pointer;
}

/* Detail page: full-width sections below the brochure, one per real-Perl-page section (contact, fleece, event results,
   progeny), widened/deepened (2026-08-18, owner request) so this box can hold everything the old Perl page showed
   instead of the original compact 480px summary card. */
.cy-section { border-top: 1px solid #e6e9eb; padding: 22px 20px; }
.cy-section-title {
    font-family: 'Lato', sans-serif; font-weight: 900; font-size: 13px; color: #0f5c3f; text-transform: uppercase;
    letter-spacing: .04em; margin: 0 0 14px;
}
.cy-section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 640px) { .cy-section-grid { grid-template-columns: 1fr; } }

.cy-kv-row { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px solid #f2f2f2; font-size: 13px; }
.cy-kv-row:last-child { border-bottom: none; }
.cy-kv-label { flex: 0 0 130px; color: #787f87; font-weight: 700; }
.cy-kv-value { flex: 1; color: #34383d; }

.cy-fleece-photo { max-width: 240px; border-radius: 10px; margin-top: 10px; display: block; }
.cy-map-embed { margin-top: 14px; border-radius: 10px; overflow: hidden; border: 1px solid #e6e9eb; }
.cy-map-embed iframe { width: 100%; height: 240px; display: block; border: 0; }

.cy-table-scroll { overflow-x: auto; }
.cy-progeny-table { width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.cy-progeny-table th {
    font-weight: 700; color: #787f87; text-transform: uppercase; font-size: 10px;
    letter-spacing: .03em; padding: 6px 10px; border-bottom: 2px solid #eef6e4;
}
.cy-progeny-table td { padding: 8px 10px; border-bottom: 1px solid #f2f2f2; }
.cy-progeny-table tr:hover td { background: #fdf9f2; }
/* /css/style.css has its own site-wide 'td, th { text-align: center !important; }' default (line ~3248), which beats a plain
   text-align: left here regardless of specificity, since only an !important declaration can ever beat another !important one. Needs
   its own !important at higher specificity to win, matching how that same stylesheet overrides its own default elsewhere for named
   columns (eg. 'td.name { text-align: left !important; }'). */
.cy-progeny-table th:first-child, .cy-progeny-table td:first-child { text-align: left !important; }

.cy-service-note { font-size: 12px; color: #787f87; padding: 16px 20px; background: #fdf9f2; }

/* Detail page: hero-photo lightbox trigger plus the "Photos" thumbnail strip section, both opening the shared #cy-lightbox overlay
   (view.html's inline script). Bounded to a handful of real uploaded photos per animal (profile plus fleece today, a third upload
   type planned), never an arbitrary-length gallery. */
.cy-hero-photo-btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.cy-hero-photo-btn img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.cy-hero-expand-hint {
    position: absolute; bottom: 10px; left: 10px; background: rgba(52, 56, 61, .72); color: #fff; font-size: 11px;
    font-weight: 700; padding: 5px 10px; border-radius: 8px;
}

.cy-photo-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.cy-photo-thumb {
    width: 96px; height: 96px; border-radius: 10px; overflow: hidden; border: 1px solid #e6e9eb; padding: 0;
    cursor: pointer; background: #eef6e4; position: relative;
}
.cy-photo-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.cy-photo-thumb-label {
    position: absolute; bottom: 0; left: 0; right: 0; background: rgba(52, 56, 61, .72); color: #fff; font-size: 9px;
    font-weight: 700; text-align: center; padding: 3px 0;
}

.cy-lightbox {
    position: fixed; inset: 0; background: rgba(23, 26, 29, .92); z-index: 1000; display: flex; align-items: center;
    justify-content: center;
}
.cy-lightbox[hidden] { display: none; }
/* min-width/min-height: 0 override the flex item default of auto, which otherwise refuses to shrink this stage below the image's own
   intrinsic size, the well-known flexbox min-size trap; without it, a wide source photo overflows past 90vw/82vh on a narrow phone
   screen instead of being scaled down, taking the arrows/close button/dots off-screen with it. */
.cy-lightbox-stage { max-width: 90vw; max-height: 82vh; min-width: 0; min-height: 0; position: relative; }
.cy-lightbox-slide { margin: 0; display: none; text-align: center; }
.cy-lightbox-slide.cy-lightbox-slide-active { display: block; }
.cy-lightbox-slide img { max-width: 90vw; max-height: 74vh; display: block; border-radius: 10px; margin: 0 auto; }
.cy-lightbox-slide figcaption { color: #fff; font-size: 12px; font-weight: 700; margin-top: 8px; }
.cy-lightbox-close, .cy-lightbox-prev, .cy-lightbox-next {
    position: absolute; background: rgba(255, 255, 255, .12); color: #fff; border: none; border-radius: 50%;
    width: 40px; height: 40px; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.cy-lightbox-close:hover, .cy-lightbox-prev:hover, .cy-lightbox-next:hover { background: rgba(255, 255, 255, .24); }
.cy-lightbox-close { top: 18px; right: 18px; }
.cy-lightbox-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.cy-lightbox-next { right: 18px; top: 50%; transform: translateY(-50%); }
.cy-lightbox-dots { position: absolute; bottom: -34px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.cy-lightbox-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .4); border: none; padding: 0; cursor: pointer; }
.cy-lightbox-dot.cy-lightbox-dot-active { background: #fff; }
@media (max-width: 640px) {
    .cy-lightbox-prev, .cy-lightbox-next { width: 34px; height: 34px; }
    .cy-lightbox-prev { left: 6px; }
    .cy-lightbox-next { right: 6px; }
}

/* Not-currently-available page */
.cy-unavailable { max-width: 420px; margin: 60px auto; text-align: center; background: #fff; border-radius: 16px; padding: 40px 24px; border: 1px solid #e6e9eb; }
.cy-unavailable-title { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 20px; margin: 0 0 10px; }
.cy-unavailable-text { font-size: 14px; color: #4a4f57; margin: 0 0 20px; line-height: 1.6; }
.cy-unavailable-btn {
    display: inline-block; background: #79b23c; color: #fff; font-weight: 700; font-size: 14px; padding: 12px 24px;
    border-radius: 10px;
}

/* Shared form controls (wizard, saved-search, my-sales) */
.cy-panel { background: #fff; border: 1px solid #e6e9eb; border-radius: 16px; padding: 20px; margin-bottom: 18px; }
.cy-field { margin-bottom: 16px; }
.cy-field label { display: block; font-size: 12px; font-weight: 700; color: #34383d; margin-bottom: 6px; }
.cy-field input[type="text"], .cy-field input[type="email"], .cy-field input[type="tel"], .cy-field input[type="number"],
.cy-field input[type="date"], .cy-field textarea, .cy-field select {
    width: 100%; font-family: 'Roboto', sans-serif; font-size: 14px; padding: 10px 12px; border: 1px solid #e6e9eb;
    border-radius: 8px; background: #fff; color: #34383d;
}
.cy-field textarea { resize: vertical; min-height: 80px; }
.cy-char-count { font-size: 11px; color: #8a8f96; text-align: right; margin-top: 4px; }
.cy-btn-primary {
    background: #e8862e; color: #fff; font-weight: 700; font-size: 14px; padding: 12px 22px; border-radius: 10px;
    border: none; cursor: pointer; display: inline-block;
}
.cy-btn-secondary {
    background: #fff; color: #34383d; font-weight: 700; font-size: 14px; padding: 12px 22px; border-radius: 10px;
    border: 1.5px solid #34383d; cursor: pointer; display: inline-block;
}
.cy-btn-danger {
    background: #fff; color: #b23c3c; font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 8px;
    border: 1.5px solid #e2b0b0; cursor: pointer; display: inline-block;
}
.cy-upsell {
    background: #eef6e4; border: 1px solid #cfe3ba; border-radius: 12px; padding: 14px 16px; font-size: 13px;
    color: #34383d; margin-bottom: 16px;
}
.cy-upsell strong { color: #0f5c3f; }
.cy-included-chip {
    display: inline-block; background: #0f5c3f; color: #fff; font-size: 11px; font-weight: 700; padding: 4px 9px;
    border-radius: 8px;
}
.cy-error { color: #b23c3c; font-size: 13px; margin-bottom: 12px; }
.cy-steps { display: flex; gap: 6px; margin-bottom: 20px; }
.cy-step { flex: 1; height: 4px; border-radius: 2px; background: #e6e9eb; }
.cy-step-done, .cy-step-active { background: #79b23c; }

/* Wizard layout + live preview */
.cy-wizard-layout { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.cy-wizard-form { flex: 1 1 420px; min-width: 0; }
.cy-wizard-preview { flex: 0 0 300px; position: sticky; top: 20px; }
.cy-wizard-preview-label {
    font-size: 11px; font-weight: 700; color: #8a8f96; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px;
}
.cy-preview-faces { display: flex; gap: 12px; }
.cy-preview-face { width: 140px; height: 200px; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.cy-preview-front { background: #fff; border: 1px solid #e6e9eb; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .2); }
.cy-preview-back { background: #0f5c3f; color: #fff; padding: 10px; }
.cy-preview-photo { position: relative; height: 90px; background: #eef6e4; }
.cy-preview-photo img { width: 100%; height: 100%; object-fit: cover; display: none; }
.cy-preview-price {
    position: absolute; top: 6px; right: 6px; background: #e8862e; color: #fff; font-family: 'Lato', sans-serif;
    font-weight: 900; font-size: 11px; padding: 3px 7px; border-radius: 7px;
}
.cy-preview-body { padding: 8px 9px; flex: 1; }
.cy-preview-name { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 12px; }
.cy-preview-meta { font-size: 9px; color: #787f87; margin: 2px 0 6px; }
.cy-preview-tagline { font-size: 10px; color: #4a4f57; }
.cy-preview-back-price { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 16px; }
.cy-preview-back-meta { font-size: 9px; color: #bfe0c9; margin: 6px 0; line-height: 1.4; }
.cy-radio-row { display: flex; gap: 14px; margin-bottom: 6px; }
.cy-radio-row label { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 13px; }
.cy-drafts-list, .cy-listing-row { background: #fff; border: 1px solid #e6e9eb; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cy-listing-row-name { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 14px; }
.cy-listing-row-meta { font-size: 12px; color: #787f87; }
.cy-listing-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cy-status-pill { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 10px; display: inline-block; color: #fff; }
.cy-wizard-nav { display: flex; gap: 8px; margin-top: 20px; }
@media (max-width: 760px) { .cy-wizard-preview { position: static; flex-basis: 100%; } }