/* ============================================================
   stores-brands.css — layout for /stores and /brands.
   Featured-tile grid, A-Z jump nav, alphabetical sections.
   Graceful fallback: tiles without bio/logo still read fine.
   ============================================================ */

.stores-page h1,
.brands-page h1 {
    margin-bottom: 0.4rem;
}
.stores-lede {
    color: #555;
    font-size: 1rem;
    margin: 0 0 2rem;
}
.stores-lede strong {
    color: #222;
}

/* ----- Featured tile grid --------------------------------------
   Two-up on mobile, up to four-up on desktop. Tiles flex so bios
   of different lengths don't leave ragged heights; CTA sticks to
   the bottom via margin-top:auto on .store-tile-actions. -------- */
.store-tile-grid,
.brand-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin: 1rem 0 2.5rem;
}
@media (min-width: 1200px) {
    .store-tile-grid,
    .brand-tile-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.store-tile,
.brand-tile {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7ea;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.store-tile:hover,
.brand-tile:hover {
    border-color: #c7cbd0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.store-tile-main,
.brand-tile-main {
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1rem 0.6rem;
    text-decoration: none;
    color: inherit;
    flex: 1 1 auto;
}
.store-tile-main:hover,
.brand-tile-main:hover {
    text-decoration: none;
    color: inherit;
}

.store-tile-logo,
.brand-tile-logo {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 0.6rem;
}
.store-tile-logo img,
.brand-tile-logo-img {
    max-height: 56px;
    max-width: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
}
/* Initials-only fallback (for brands without a logo file). Matches the
   logo bounding box so tiles stay visually level. */
.brand-tile-logo-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: #f2f4f6;
    color: #555;
    font-weight: 600;
    font-size: 18px;
    border-radius: 8px;
}

.store-tile-name,
.brand-tile-name {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 0.4rem;
    color: #222;
}

.store-tile-bio,
.brand-tile-bio {
    font-size: 13px;
    line-height: 1.45;
    color: #555;
    margin: 0 0 0.7rem;
    flex-grow: 1;
}

.store-tile-count,
.brand-tile-count {
    font-size: 12px;
    color: #7e8683;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.store-tile-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.6rem 1rem 1rem;
    border-top: 1px solid #f2f4f6;
    flex-wrap: wrap;
    margin-top: auto;
}
.store-tile-cta,
.store-tile-visit {
    flex: 1 1 auto;
    text-align: center;
    padding: 0.5rem 0.75rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.store-tile-cta {
    background: #0066cc;
    color: #fff;
}
.store-tile-cta:hover {
    background: #0055aa;
    color: #fff;
    text-decoration: none;
}
.store-tile-visit {
    background: #fff;
    color: #444;
    border: 1px solid #d0d5db;
}
.store-tile-visit:hover {
    background: #f7f7f7;
    color: #111;
    text-decoration: none;
}
.store-tile-visit i {
    margin-left: 4px;
    font-size: 11px;
    opacity: 0.7;
}

/* ----- A-Z jump nav --------------------------------------------
   Sticky horizontal strip of letter-anchor links. Scroll-snap
   isn't worth the complexity — plain overflow-x:auto is fine. */
.az-section-wrap h2 {
    margin-top: 2.5rem;
}
.az-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0.4rem 0 1.2rem;
    margin: 0 0 1.5rem;
    border-bottom: 1px solid #eef0f3;
}
.az-jump a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    background: #f7f9fa;
    border: 1px solid #e5e7ea;
    border-radius: 6px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.az-jump a:hover {
    background: #eef0f3;
    border-color: #c7cbd0;
    color: #111;
    text-decoration: none;
}

.az-letter {
    margin: 1.5rem 0 2rem;
    scroll-margin-top: 80px; /* offset for fixed header when using #anchor */
}
.az-letter-heading {
    font-size: 1.6rem;
    font-weight: 700;
    color: #0066cc;
    margin: 0 0 0.75rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #eef0f3;
}
.az-store-list {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 1;
    column-gap: 1.5rem;
}
@media (min-width: 576px) { .az-store-list { columns: 2; } }
@media (min-width: 992px) { .az-store-list { columns: 3; } }
@media (min-width: 1400px) { .az-store-list { columns: 4; } }
.az-store-list li {
    break-inside: avoid;
    padding: 0.25rem 0;
}
.az-store-list a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    padding: 0.15rem 0;
}
.az-store-list a:hover {
    color: #0066cc;
    text-decoration: underline;
}
.az-count {
    color: #999;
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}


/* ============================================================
   Contact page trust-signal aside
   ============================================================ */
.contact-trust {
    margin-top: 1rem;
}
.contact-trust-box {
    background: #f7f9fa;
    border: 1px solid #e5e7ea;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
}
.contact-trust-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.9rem;
    color: #222;
}
.contact-trust-subtitle {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 1.25rem 0 0.4rem;
    color: #333;
}
.contact-trust-list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.15rem 0;
}
.contact-trust-list dt {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c7378;
    margin-top: 0.55rem;
    font-weight: 600;
}
.contact-trust-list dt:first-of-type { margin-top: 0; }
.contact-trust-list dd {
    margin: 0;
    font-size: 14px;
    color: #222;
    line-height: 1.5;
}
.contact-trust-list dd a { color: #0066cc; text-decoration: none; }
.contact-trust-list dd a:hover { text-decoration: underline; }
.contact-trust-compliance {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: #333;
}
.contact-trust-compliance li {
    padding: 3px 0;
}
.contact-trust-policy {
    margin: 1.25rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px dashed #d7dadd;
    font-size: 12px;
    color: #6c7378;
}
.contact-trust-policy a { color: #0066cc; text-decoration: none; }
.contact-trust-policy a:hover { text-decoration: underline; }


/* category-long-copy styling consolidated into core/assets/style.css
   (single source of truth, no warring rules). See ".category-long-copy"
   block there for the full set of typography + layout rules. */


/* ============================================================
   Related categories — chip list rendered above the Amazon block
   on category leaf pages. Cheap internal-link density boost +
   useful sibling navigation for shoppers drilling around a category.
   ============================================================ */
.related-categories {
    margin: 2rem 0 1.5rem;
}
.related-categories-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 0.75rem;
    color: #222;
}
.related-categories-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.related-categories-chips li { padding: 0; }
.related-categories-chips a {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    background: #f7f9fa;
    border: 1px solid #e5e7ea;
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    transition: background 0.1s, border-color 0.1s;
}
.related-categories-chips a:hover {
    background: #eef0f3;
    border-color: #c7cbd0;
    color: #0066cc;
    text-decoration: none;
}
.related-categories-count {
    font-size: 12px;
    color: #888;
    font-variant-numeric: tabular-nums;
}


/* Footer affiliate disclosure — sits beneath the copyright/terms row
   inside the same .container as the rest of the footer-bottom so it
   never causes horizontal-scroll on mobile. Required for UK ASA
   compliance + the Amazon Associates Operating Agreement. */
.footer-affiliate-disclosure {
    width: 100%;
    margin: 0 0 0.8rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    color: #a8adaf;
    line-height: 1.5;
    text-align: center;
}
.footer-affiliate-disclosure a {
    color: #c8ccce;
    text-decoration: underline;
}
.footer-affiliate-disclosure a:hover { color: #fff; }