:root {
    --background: #ffffff;
    --surface: #fff7f9;
    --text: #222333;
    --muted: #737582;
    --accent: #de4678;
    --border: #ece8eb;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: min(1120px, 92%);
    margin: 0 auto;
}

.site-header {
    border-bottom: 1px solid var(--border);
    background: white;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 74px;
    gap: 24px;
}

.brand {
    font-weight: 750;
    font-size: 23px;
    white-space: nowrap;
}

.heart {
    color: var(--accent);
    margin-right: 5px;
}

nav {
    display: flex;
    gap: 26px;
    font-size: 14px;
}

nav a:hover {
    color: var(--accent);
}

.intro {
    padding: 43px 0 30px;
    text-align: center;
}

h1 {
    font-size: clamp(28px, 4vw, 40px);
    margin: 0 0 8px;
}

h2 {
    font-size: 22px;
    margin: 0 0 16px;
}

h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

p {
    margin: 0 0 12px;
}

.muted,
.intro p {
    color: var(--muted);
    font-size: 14px;
}

.page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 28px;
    align-items: start;
}

.main-column {
    min-width: 0;
}

.section {
    margin-bottom: 34px;
}

.zodiac-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 11px;
}

.zodiac-item {
    padding: 17px 5px;
    text-align: center;
    border: 1px solid #EDE0E5;
    background: #FFFDFC;
    border-radius: 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    transition: border-color .2s;
}

/* A selected sign has a persistent border. Touch devices must not
   retain hover styling after a tap or browser back navigation. */
.zodiac-item.active {
    border-color: #C64A7B;
    background: #FFF8FB;
}

@media (hover: hover) and (pointer: fine) {
    .zodiac-item:hover {
        border-color: #C64A7B;
    }
}

.zodiac-symbol {
    font-size: 29px;
    color: var(--accent);
    line-height: 1.5;
}

.card {
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: white;
}

.featured-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 17px;
}

.featured-symbol {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fce8ef;
    color: var(--accent);
    font-size: 28px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 17px;
}

label {
    display: block;
    font-size: 13px;
    font-weight: 600;
}

select {
    display: block;
    width: 100%;
    padding: 12px;
    margin-top: 7px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 7px;
    font: inherit;
}

button {
    width: 100%;
    background: var(--accent);
    color: white;
    border: 0;
    border-radius: 8px;
    padding: 13px 18px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 14px;
}

button:hover {
    background: #c92d61;
}

.ad-slot {
    min-height: 180px;
    margin: 25px 0 34px;
    border-radius: 7px;
    background: #f2eff1;
    color: #77727a;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}

.ad-slot small {
    font-size: 10px;
    letter-spacing: 1px;
}

.ad-slot span {
    font-size: 14px;
}

.ad-banner {
    min-height: 100px;
}

.sidebar-ad {
    min-height: 280px;
    margin-top: 0;
}

.site-footer {
    border-top: 1px solid var(--border);
    padding: 30px 0;
    margin-top: 40px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

@media (max-width: 850px) {
    .page-layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        display: none;
    }

    .zodiac-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .header-inner {
        flex-wrap: wrap;
        justify-content: center;
        padding: 13px 0;
    }
}

@media (max-width: 480px) {
    .container {
        width: 92%;
    }

    .intro {
        padding: 30px 0 24px;
    }

    .brand {
        font-size: 21px;
    }

    nav {
        gap: 15px;
        font-size: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .zodiac-grid {
        gap: 8px;
    }

    .zodiac-item {
        padding: 12px 3px;
    }

    .zodiac-symbol {
        font-size: 25px;
    }

    .card {
        padding: 18px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    h2 {
        font-size: 20px;
    }
}


/* Daily prediction tabs */

.day-tabs {
    display: flex;
    gap: 8px;
    margin: 16px 0;
}

.day-tabs a {
    padding: 9px 22px;
    background: #fff7f9;
    color: #555;
    border: 1px solid #ece8eb;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
}

.day-tabs a.active {
    background: #de4678;
    border-color: #de4678;
    color: #fff;
}

.rating {
    color: #de4678;
    font-size: 17px;
    font-weight: 600;
}

.rating strong {
    color: #222333;
}


/* Visual five-star rating */

.star-rating {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0 20px;
}

.star-rating strong {
    font-size: 16px;
    color: #222333;
}

.stars-visual {
    position: relative;
    display: inline-block;
    font-size: 26px;
    line-height: 1;
    letter-spacing: 2px;
    white-space: nowrap;
}

.stars-background {
    color: #e4e4e7;
}

.stars-foreground {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: #e5a22d;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .stars-visual {
        font-size: 23px;
    }
}


/* Dedicated compatibility pages */

.compatibility-hero {
    padding: 32px 20px;
    text-align: center;
}

.compatibility-signs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

.compatibility-sign {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #de4678;
    font-size: 42px;
}

.compatibility-sign small {
    color: #222333;
    font-size: 14px;
    margin-top: 6px;
    font-weight: 600;
}

.compatibility-heart {
    color: #de4678;
    font-size: 26px;
}

.compatibility-back {
    color: #de4678;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.compatibility-back:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .compatibility-signs {
        gap: 16px;
    }

    .compatibility-sign {
        font-size: 34px;
    }

    .compatibility-hero {
        padding: 22px 12px;
    }
}


/* =============================================
   PHASE 6A — Mobile polish and consistent icons
   ============================================= */

/* Remove the default blue touch flash, but retain keyboard focus. */
a, button, select, input, textarea, label {
    -webkit-tap-highlight-color: transparent;
}

/* Visible focus remains important for keyboard accessibility. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

/* Keep color emoji as a fallback on the compatibility detail page. */
.compatibility-sign {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

/* Consistent, platform-independent colored SVG circles on the homepage. */
.zodiac-grid .zodiac-symbol {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 5px;
    font-size: initial;
    line-height: normal;
}

.zodiac-grid .zodiac-icon {
    display: block;
    width: 42px;
    height: 42px;
    flex: none;
}

.zodiac-icon-bg { fill: var(--accent); }
.zodiac-item:nth-child(1) .zodiac-icon-bg  { fill: #e85252; }
.zodiac-item:nth-child(2) .zodiac-icon-bg  { fill: #fa7747; }
.zodiac-item:nth-child(3) .zodiac-icon-bg  { fill: #f5a623; }
.zodiac-item:nth-child(4) .zodiac-icon-bg  { fill: #f4bf35; }
.zodiac-item:nth-child(5) .zodiac-icon-bg  { fill: #f0cf35; }
.zodiac-item:nth-child(6) .zodiac-icon-bg  { fill: #82b75b; }
.zodiac-item:nth-child(7) .zodiac-icon-bg  { fill: #58b878; }
.zodiac-item:nth-child(8) .zodiac-icon-bg  { fill: #278f83; }
.zodiac-item:nth-child(9) .zodiac-icon-bg  { fill: #3286c9; }
.zodiac-item:nth-child(10) .zodiac-icon-bg { fill: #7656ad; }
.zodiac-item:nth-child(11) .zodiac-icon-bg { fill: #a04cbd; }
.zodiac-item:nth-child(12) .zodiac-icon-bg { fill: #d94678; }

@media (max-width: 480px) {
    .zodiac-grid .zodiac-symbol { width: 42px; height: 42px; }
    .zodiac-grid .zodiac-icon { width: 38px; height: 38px; }
}

/* Compact the space above the horoscope on phones, without
   changing the four-column sign grid or desktop layout. */
@media (max-width: 480px) {
    .intro { padding: 22px 0 16px; }
    .section { margin-bottom: 26px; }
    .ad-slot { margin-top: 18px; margin-bottom: 26px; }
}


/* Phase 6A: Larger zodiac SVG icons; preserve card styling. */
.zodiac-grid .zodiac-symbol {
    width: 56px;
    height: 56px;
}

.zodiac-grid .zodiac-icon {
    width: 54px;
    height: 54px;
}

@media (max-width: 480px) {
    .zodiac-grid .zodiac-symbol {
        width: 50px;
        height: 50px;
    }

    .zodiac-grid .zodiac-icon {
        width: 48px;
        height: 48px;
    }
}

/* Custom WebP artwork for all 12 zodiac cards. */
.zodiac-grid .zodiac-custom-icon {
    display: block;
    width: 54px;
    height: 54px;
    object-fit: contain;
    flex: none;
}

@media (max-width: 480px) {
    .zodiac-grid .zodiac-custom-icon {
        width: 48px;
        height: 48px;
    }
}

/* Custom WebP preview beside selected signs in native compatibility selects. */
.compatibility-select-wrap {
    position: relative;
    display: block;
}

.compatibility-select-wrap .compatibility-sign-select {
    margin-top: 7px;
}

.compatibility-select-wrap .compatibility-selected-icon {
    position: absolute;
    z-index: 1;
    left: 10px;
    top: calc(50% + 3.5px);
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    object-fit: contain;
    pointer-events: none;
}

.compatibility-select-wrap .compatibility-selected-icon[hidden] {
    display: none;
}

.compatibility-select-wrap.has-custom-icon .compatibility-sign-select {
    padding-left: 46px;
}


/* Phase 6A: Custom WebP artwork on compatibility result pages. */
.compatibility-sign .compatibility-zodiac-art {
    display: block;
    width: 86px;
    height: 86px;
    object-fit: contain;
}

@media (max-width: 480px) {
    .compatibility-sign .compatibility-zodiac-art {
        width: 70px;
        height: 70px;
    }
}


/* Phase 6B: Internal links to published compatibility guides only. */
.published-guides-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.published-guide-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    transition: border-color .2s;
}

@media (hover: hover) and (pointer: fine) {
    .published-guide-link:hover {
        border-color: var(--accent);
    }
}

.published-guide-images {
    display: flex;
    align-items: center;
    flex: none;
    gap: 2px;
}

.published-guide-images img {
    display: block;
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.published-guide-heart {
    color: var(--accent);
    font-size: 13px;
}

.published-guide-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.4;
}

.published-guide-copy strong {
    font-size: 13px;
}

.published-guide-copy small {
    color: var(--muted);
    font-size: 11px;
}

.published-guide-arrow {
    margin-left: auto;
    color: var(--accent);
    font-size: 24px;
    line-height: 1;
}

@media (max-width: 600px) {
    .published-guides-grid {
        grid-template-columns: 1fr;
    }
}


/* Phase 8.8 — homepage-only Daily Love Journey cards.
   Retains the existing explore_love_life.css styles and all other site components. */
.daily-love-journey .love-explore-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}
.daily-love-journey .love-explore-art { aspect-ratio: 8 / 5; }
.daily-love-journey .love-explore-content { padding: 14px 13px 16px; }
.daily-love-journey .love-explore-title { font-size: 15px; }
.daily-love-journey .love-explore-description { font-size: 12.5px; }
.daily-love-journey .daily-journey-frequency {
    display: block;
    align-self: flex-start;
    margin-bottom: 4px;
    color: #b93d6b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}
@media (max-width: 700px) and (min-width: 521px) {
    .daily-love-journey .love-explore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .daily-love-journey .love-explore-grid { grid-template-columns: 1fr; }
    .daily-love-journey .love-explore-art { aspect-ratio: 8 / 5; }
    .daily-love-journey .love-explore-content { padding: 13px 16px 15px; }
    .daily-love-journey .love-explore-title { font-size: 16px; }
}


/* LoveBlazer Phase 10.4A — Homepage reading overlays and compact discovery */
.daily-love-journey .love-explore-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
@media (max-width: 980px) and (min-width: 521px) {
  .daily-love-journey .love-explore-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
.daily-love-journey .love-explore-tarot-art {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:linear-gradient(135deg,#fff4f7 0%,#f6deea 100%); color:#9d547d;
  overflow:hidden; min-height:110px;
}
.love-explore-tarot-symbol {font-size:20px; line-height:1;}
.love-explore-tarot-cards {display:flex; align-items:center; justify-content:center; gap:5px;}
.love-explore-tarot-cards span {
  display:grid; place-items:center; width:44px; height:63px; border:2px solid #f8e8de;
  border-radius:7px; background:linear-gradient(140deg,#b37a9a,#794c77);
  box-shadow:0 5px 14px #8a57753d; color:#fff4ec; font-size:24px;
}
.love-explore-tarot-cards span:nth-child(2) {transform:translateY(-5px);}
.lb-related-head {display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:13px 0;}
.lb-related-head h3 {margin:0;}
.lb-related-head p {margin:0;}
.lb-related-grid {margin-bottom:18px;}
.lb-all-guides {border:1px solid var(--border);border-radius:12px;background:#fffafd;overflow:hidden;}
.lb-all-guides summary {cursor:pointer;list-style:none;padding:16px 18px;font-weight:700;color:#9a4267;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.lb-all-guides summary::-webkit-details-marker {display:none;}
/* The chevron alone rotates on expand; keep summary copy upright. */
.lb-all-guides-inner {padding:5px 14px 16px;}
.lb-all-guides:focus-within {outline-offset:3px;}
/* Modal is deliberately user-initiated, never a page-load interstitial. */
.lb-reading-dialog {position:fixed;inset:0;border:0;padding:0;width:min(980px,94vw);height:min(850px,92dvh);max-width:none;max-height:none;border-radius:18px;background:white;box-shadow:0 20px 90px #32102d4d;overflow:hidden;}
.lb-reading-dialog::backdrop {background:rgba(32,15,31,.55);}
.lb-reading-dialog-shell {height:100%;min-height:0;display:flex;flex-direction:column;}
.lb-reading-dialog-bar {display:flex;justify-content:space-between;align-items:center;flex:none;min-height:58px;padding:9px 14px 9px 22px;background:#fff8fb;border-bottom:1px solid #f1e0e8;gap:12px;}
#lb-reading-dialog-title {font-weight:700;font-size:14px;color:#713d5a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lb-reading-dialog .lb-reading-dialog-close {display:grid;place-items:center;flex:none;width:42px;height:42px;min-width:42px;padding:0;margin:0;border:1px solid #ebcad9;border-radius:50%;background:#fff;color:#733857;font-size:28px;font-weight:400;line-height:1;cursor:pointer;}
.lb-reading-dialog .lb-reading-dialog-close:hover {background:#fff0f5;}
#lb-reading-frame {width:100%;height:100%;min-height:0;border:0;background:white;flex:1;display:block;}
@media (max-width:520px) {
  .daily-love-journey .love-explore-grid {grid-template-columns:1fr;}
  .day-tabs {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:10px 0;}
  .day-tabs a {text-align:center;padding:8px 9px;font-size:13px;border-radius:9px;}
  .lb-related-head {display:block;}
  .lb-related-grid {grid-template-columns:1fr;}
  .lb-reading-dialog {inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;border-radius:0;}
  .lb-reading-dialog-bar {min-height:54px;padding:6px 10px 6px 15px;}
}
@media (prefers-reduced-motion:reduce) { .love-explore-tarot-cards span:nth-child(2){transform:none;} }


/* Phase 10.4B — compact mobile readings and polished compatibility expander. */
.lb-all-guides {
  border: 1px solid #efdce4;
  border-radius: 13px;
  background: #fff9fb;
  overflow: hidden;
}
.lb-all-guides > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 17px;
  cursor: pointer;
  list-style: none;
  color: #813d5e;
  user-select: none;
}
.lb-all-guides > summary::marker { content: ''; }
.lb-all-guides > summary::-webkit-details-marker { display: none; }
.lb-all-guides-summary-copy { display:flex; flex-direction:column; gap:2px; min-width:0; }
.lb-all-guides-summary-copy strong { font-size: 14px; line-height:1.35; }
.lb-all-guides-summary-copy small { color:#8b7882; font-size:11px; line-height:1.4; font-weight:400; }
.lb-all-guides-chevron {
  display:block;
  flex:none;
  width: 34px;
  height: 34px;
  border: 1px solid #ead5de;
  background: #fff;
  border-radius: 50%;
  position:relative;
  transition: transform .2s ease, background .2s ease;
}
.lb-all-guides-chevron::after {
  content:'';
  position:absolute;
  top:11px;
  left:12px;
  width:8px;
  height:8px;
  border-right:2px solid #aa5077;
  border-bottom:2px solid #aa5077;
  transform:rotate(45deg);
}
.lb-all-guides[open] .lb-all-guides-chevron { transform:rotate(180deg); background:#fff0f5; }
.lb-all-guides > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.lb-all-guides-inner { padding: 4px 12px 16px; }

@media (max-width: 600px) {
  /* Two cards across: a clearer 2x2 grid for the four daily readings. */
  .daily-love-journey .love-explore-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .daily-love-journey .love-explore-card { border-radius:12px; min-width:0; }
  .daily-love-journey .love-explore-art { aspect-ratio: 8 / 5; min-height:0; }
  .daily-love-journey .love-explore-content {
    padding:10px 10px 12px;
    gap:5px;
  }
  .daily-love-journey .daily-journey-frequency {
    font-size:10px;
    margin-bottom:0;
    line-height:1.35;
  }
  .daily-love-journey .love-explore-title {
    font-size:14px;
    line-height:1.34;
    overflow-wrap:anywhere;
  }
  .daily-love-journey .love-explore-description {
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    font-size:11px;
    line-height:1.45;
  }
  .daily-love-journey .love-explore-action {
    font-size:11px;
    gap:3px;
    padding-top:6px;
    line-height:1.4;
  }
  .daily-love-journey .love-explore-action span {font-size:15px;}
  .daily-love-journey .love-explore-tarot-art { min-height:0; }
  .daily-love-journey .love-explore-tarot-symbol { font-size:13px; }
  .daily-love-journey .love-explore-tarot-cards span {
    width:28px;
    height:39px;
    font-size:16px;
    border-radius:5px;
  }
  .lb-all-guides > summary { padding:13px 12px; }
  .lb-all-guides-summary-copy strong { font-size:13px; }
}
@media (prefers-reduced-motion:reduce) {
  .lb-all-guides-chevron { transition:none; }
}


/* Phase 12.5D — space breadcrumb separators on article and game pages. */
nav.lb-breadcrumb { word-spacing: .35em; overflow-wrap: anywhere; }
nav.lb-breadcrumb a { margin-inline-end: .45em; }
nav.lb-breadcrumb a:not(:first-child) { margin-inline-start: .35em; }
nav.lf-breadcrumb span[aria-hidden="true"] { display: inline-block; margin-inline: .65em; }

/* Phase 12.5D refinement: minimal single Home action on matching/weekly pages. */
.site-header nav .lb-minimal-home {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; min-height: 38px; padding: 7px 13px;
  border: 1px solid var(--border); border-radius: 20px;
  background: var(--surface); color: var(--text); font-size: 13px;
  font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.site-header nav .lb-minimal-home:hover { border-color: var(--accent); color: var(--accent); }
/* Keep article breadcrumb separate from heading and long titles within one line. */
nav.lb-breadcrumb.lb-article-crumb {
  display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0;
  padding: 14px 0 10px; margin-bottom: 14px;
  white-space: nowrap; word-spacing: normal; overflow: hidden;
}
nav.lb-article-crumb a { flex: none; margin: 0 !important; }
nav.lb-article-crumb .lb-crumb-arrow { flex: none; color: var(--muted); }
nav.lb-article-crumb .lb-crumb-current { flex: 1; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) {
  nav.lb-breadcrumb.lb-article-crumb { gap: 8px; margin-bottom: 20px; font-size: 12px; }
  .site-header nav .lb-minimal-home { min-height: 36px; padding: 7px 12px; }
}


/* Phase 12.5D — unified minimal Home button on secondary pages. */
.site-header .header-inner { min-width: 0; }
.site-header .header-inner > .brand { min-width: 0; }
.site-header .header-inner > nav:has(> .lb-home-pill) { flex: none; }
.site-header .lb-home-pill {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; min-height: 42px; padding: 8px 14px;
  border: 1px solid #edd6e0; border-radius: 999px;
  background: var(--surface); color: #853e5d;
  font-size: 13px; font-weight: 600; line-height: 1.2;
  white-space: nowrap; transition: border-color .2s, background-color .2s;
}
.site-header .lb-home-pill-icon { display:block; width: 16px; height: 16px; flex:none; }
.site-header .lb-home-pill:hover { border-color: var(--accent); background: #fff0f5; }
.site-header .lb-home-pill:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 850px) {
  /* Override the site's generic mobile rule that centers/wraps the header. */
  .site-header .header-inner:has(.lb-home-pill) {
    flex-wrap: nowrap; justify-content: space-between;
    gap: 10px; min-height: 64px; padding-block: 10px;
  }
  .site-header .header-inner:has(.lb-home-pill) > .brand {
    font-size: 20px; white-space: nowrap;
  }
  .site-header .header-inner .lb-home-pill { min-height: 40px; padding: 8px 11px; font-size: 12px; }
}
@media (max-width: 360px) {
  .site-header .header-inner:has(.lb-home-pill) > .brand { font-size: 18px; }
  .site-header .header-inner .lb-home-pill { padding-inline: 9px; }
}


/* Phase 12.5D: prevent decorative rose heart discs stretching in flex headings. */
.featured-heading > .featured-symbol {
  width: 56px; height: 56px; min-width: 56px;
  flex: 0 0 56px; aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  border-radius: 50%; line-height: 1; padding: 0;
  text-align: center;
}
.featured-heading > div { min-width: 0; }
.love-explore-heading .love-explore-heading-heart {
  flex-shrink: 0; aspect-ratio: 1 / 1;
  display: inline-grid; place-items: center; line-height: 1;
}
/* Keep the single Home action tap-friendly and consistent on all secondary pages. */
.site-header .lb-home-pill { box-sizing: border-box; flex-shrink: 0; }
@media (max-width: 480px) {
  .featured-heading > .featured-symbol {
    width: 48px; height: 48px; min-width: 48px; flex-basis: 48px; font-size: 25px;
  }
}


/* Zodiac selection grids: refined ivory tiles and clearer WebP artwork.
   Scoped to grid tiles; result cards and compatibility selects stay unchanged. */
.zodiac-grid .zodiac-symbol {
    width: 62px;
    height: 62px;
}
.zodiac-grid .zodiac-custom-icon {
    width: 60px;
    height: 60px;
}
/* Match the homepage, weekly horoscope and Daily Zodiac Matches grids.
   Extra specificity also overrides older page-level mobile sizes. */
.zodiac-grid.lb-weekly-signs .zodiac-custom-icon,
.zodiac-grid.lb-connections-signs .zodiac-custom-icon {
    width: 60px;
    height: 60px;
}
@media (max-width: 600px) {
    .zodiac-grid .zodiac-symbol { width: 56px; height: 56px; }
    .zodiac-grid .zodiac-custom-icon,
    .zodiac-grid.lb-weekly-signs .zodiac-custom-icon,
    .zodiac-grid.lb-connections-signs .zodiac-custom-icon {
        width: 54px;
        height: 54px;
    }
}
@media (max-width: 360px) {
    .zodiac-grid .zodiac-symbol { width: 50px; height: 50px; }
    .zodiac-grid .zodiac-custom-icon,
    .zodiac-grid.lb-weekly-signs .zodiac-custom-icon,
    .zodiac-grid.lb-connections-signs .zodiac-custom-icon {
        width: 48px;
        height: 48px;
    }
}