/* ══════════════════════════════════════════════════════════════════
   UNIFIED PAGE HERO + BREADCRUMB
   ------------------------------------------------------------------
   Makes every non-home page hero (books, about, contact, profile,
   orders, order-detail, edit-profile, addresses, sitemap and the
   generic .page-hero used by faq/privacy/terms/shipping/returns/blog/
   wishlist/track) share the exact height & style of the shopping-cart
   hero (.cart-hero): a compact 28px maroon gradient band, centered,
   Cinzel gold-pale title, small light subtitle. The home hero
   (.cj-hero) and admin heroes are intentionally NOT touched.

   Loaded LAST (from layouts/footer.blade.php) so it wins over each
   page's own inline <style> block. Scoped to the shared hero classes.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. The shared hero shell (mirrors .cart-hero) ───────────────── */
.bk-hero,
.ab-hero,
.contact-hero,
.pf-hero,
.ep-hero,
.od-hero,
.orders-hero,
.page-hero,
.sitemap-hero {
    background: linear-gradient(135deg, var(--c-primary-dark) 0%, var(--c-primary) 60%, #6B1A1A 100%) !important;
    padding: 28px 0 !important;
    margin: 0 !important;
    color: #fff !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 0 !important;
    height: auto !important;
    border: 0 !important;
    box-shadow: none !important;
    display: block !important;
}

/* Subtle diamond texture, identical to .cart-hero::before */
.bk-hero::before,
.ab-hero::before,
.contact-hero::before,
.pf-hero::before,
.ep-hero::before,
.od-hero::before,
.orders-hero::before,
.page-hero::before,
.sitemap-hero::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z' fill='rgba(255,255,255,0.03)'/%3E%3C/svg%3E") repeat !important;
    pointer-events: none;
    z-index: 0;
}
/* Remove any per-hero ::after glows/rules */
.bk-hero::after,
.ab-hero::after,
.contact-hero::after,
.pf-hero::after,
.ep-hero::after,
.od-hero::after,
.orders-hero::after,
.page-hero::after,
.sitemap-hero::after { display: none !important; }

/* ── 2. Kill decorative background / texture / ornament layers ───── */
.ab-hero__bg,
.ab-hero__texture,
.ab-hero__orn,
.contact-hero__ornament,
.contact-hero__icon,
.ab-hero__rule,
.pf-hero__pattern,
.od-hero__bg,
.orders-hero__bg { display: none !important; }

/* ── 3. Centre & stack the inner content above the texture ───────── */
.bk-hero > .container,
.ab-hero > .container,
.contact-hero > .container,
.pf-hero > .container,
.ep-hero > .container,
.od-hero > .container,
.orders-hero > .container,
.page-hero > .container,
.sitemap-hero > .container {
    position: relative !important;
    z-index: 1 !important;
    /* Neutralise any per-page inline vertical padding so every band is the
       same height; horizontal gutters from .container are preserved. */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.bk-hero__inner,
.ab-hero__inner,
.pf-hero__inner,
.ep-hero__inner,
.od-hero__inner,
.orders-hero__inner,
.page-hero__inner,
.sitemap-hero__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    max-width: none !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
}

/* ── 4. Titles — Cinzel, 1.6rem, gold-pale (like .cart-hero__title) ─ */
.bk-hero__title,
.ab-hero__title,
.contact-hero__title,
.pf-hero__name,
.ep-hero__title,
.od-hero__title,
.orders-hero__title,
.page-hero__title,
.sitemap-hero__title,
.bk-hero h1,
.ab-hero h1,
.contact-hero h1,
.pf-hero h1,
.ep-hero h1,
.od-hero h1,
.orders-hero h1,
.page-hero h1,
.sitemap-hero h1 {
    font-family: var(--f-heading, 'Cinzel', serif) !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--c-gold-pale) !important;
    margin: 0 !important;
    position: relative;
    z-index: 1;
}
/* Highlighted words inside titles inherit the gold tone */
.bk-hero__title em, .ab-hero__title .g, .ab-hero__title span,
.contact-hero__title em, .orders-hero__title span {
    color: #fff !important;
    font-style: normal !important;
}
.bk-hero__title.text-telugu,
.ab-hero__title.text-telugu,
.contact-hero__title.text-telugu,
.pf-hero__name.text-telugu {
    font-family: var(--f-telugu, 'Tiro Telugu', serif) !important;
}

/* ── 5. Eyebrows / subtitles / meta — small & light ──────────────── */
.bk-hero__eyebrow, .ab-hero__eyebrow,
.bk-hero__te, .ab-hero__sub, .contact-hero__subtitle,
.pf-hero__greeting, .ep-hero__subtitle, .od-hero__subtitle,
.orders-hero__te, .orders-hero__count, .page-hero__subtitle,
.page-hero__te, .sitemap-hero__subtitle,
.bk-hero__subtitle {
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 0 !important;
    position: relative;
    z-index: 1;
}
/* Telugu eyebrow lines a touch quieter, in the Telugu face */
.cart-hero__te, .orders-hero__te, .bk-hero__te, .page-hero__te {
    font-family: var(--f-telugu, 'Tiro Telugu', serif) !important;
    opacity: 0.75;
}
/* Eyebrow pill styling (icon + text) stays inline & centered */
.bk-hero__eyebrow, .ab-hero__eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.68rem !important;
    opacity: 0.85;
}

/* Meta rows (profile email/phone/since) — centered, small */
.pf-hero__meta {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px 16px !important;
    font-size: 0.78rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-top: 4px !important;
}
.pf-hero__role-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.7rem !important; color: var(--c-gold-pale) !important;
    background: rgba(255, 255, 255, 0.12); padding: 2px 10px; border-radius: 999px;
}

/* ── 6. Profile avatar — smaller, centered ───────────────────────── */
.pf-hero__avatar-wrap { margin: 0 auto 4px !important; }
.pf-hero__avatar {
    width: 54px !important; height: 54px !important;
    border: 2px solid rgba(255, 255, 255, 0.35) !important;
}
.pf-hero__avatar img { width: 100% !important; height: 100% !important; object-fit: cover; }
.pf-hero__avatar-badge { width: 18px !important; height: 18px !important; font-size: 0.6rem !important; }

/* ── 7. Hero stat rows (books) — inline, centered ────────────────── */
.bk-hero__stats {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 4px !important;
    flex-wrap: wrap;
}
.bk-hero__stat { display: inline-flex; align-items: baseline; gap: 5px; color: rgba(255,255,255,0.85); font-size: 0.78rem; }
.bk-hero__stat b { color: var(--c-gold-pale) !important; font-size: 0.95rem; }
.bk-hero__dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.4); }

/* ── 8. In-hero action buttons — compact translucent chips ───────── */
.pf-hero__actions, .orders-hero__right, .od-hero__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 10px !important;
}
.pf-hero-btn, .orders-hero__btn, .od-hero__btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 34px !important;
    padding: 0 14px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    transition: background .2s, border-color .2s;
}
.pf-hero-btn:hover, .orders-hero__btn:hover, .od-hero__btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}
.pf-hero-btn--primary, .orders-hero__btn--primary {
    background: var(--c-gold-pale) !important;
    border-color: var(--c-gold-pale) !important;
    color: var(--c-primary-dark) !important;
}

/* Two-column hero layouts collapse to the centered column */
.orders-hero__inner { flex-direction: column !important; }
.orders-hero__left, .orders-hero__right { width: auto !important; }

/* ══════════════════════════════════════════════════════════════════
   UNIFIED BREADCRUMB
   Canonical (.breadcrumb) already lives in pages.css and sits on a
   LIGHT band above the hero. Here we (a) make the two in-hero
   breadcrumbs (books, order-detail) and the book-detail breadcrumb
   adopt that exact structure, and (b) give the in-hero ones light
   colours so they read on the maroon band.
   ══════════════════════════════════════════════════════════════════ */

/* Book-detail crumb → canonical look */
.bd-breadcrumb {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-family: var(--f-heading); font-size: 0.75rem; letter-spacing: 0.06em;
}
.bd-breadcrumb__sep { opacity: 0.4; }

/* In-hero breadcrumbs (on the maroon band) — same shape, light ink */
.bk-hero__crumb,
.od-hero__breadcrumb {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-family: var(--f-heading, 'Cinzel', serif) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.06em !important;
    margin: 0 auto 4px !important;
    position: relative;
    z-index: 1;
}
.bk-hero__crumb a,
.od-hero__breadcrumb a {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
}
.bk-hero__crumb a:hover,
.od-hero__breadcrumb a:hover { color: #fff !important; }
.bk-hero__crumb span,
.od-hero__breadcrumb span { color: var(--c-gold-pale) !important; }
.bk-hero__crumb i,
.od-hero__breadcrumb i { opacity: 0.5; font-size: 0.6rem; }

/* Standalone breadcrumb bars sit tight & consistent above every hero */
.breadcrumb { gap: 8px !important; padding: 12px 0 !important; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════
   UNIFIED IN-HERO BREADCRUMB  (partials/hero-crumb.blade.php → .hero-crumb)
   The single reusable crumb dropped into every hero. Rendered centered
   and light on the maroon band; matches .bk-hero__crumb / od variants.
   ══════════════════════════════════════════════════════════════════ */
.hero-crumb,
.bk-hero__crumb,
.od-hero__breadcrumb {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
    margin: 0 auto 12px !important;
    padding: 5px 14px !important;
    font-family: var(--f-heading, 'Cinzel', serif) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    position: relative;
    z-index: 1;
}
.hero-crumb .hero-crumb__link,
.hero-crumb a,
.bk-hero__crumb a,
.od-hero__breadcrumb a {
    color: rgba(255, 255, 255, 0.82) !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color .18s;
}
.hero-crumb a:hover,
.bk-hero__crumb a:hover,
.od-hero__breadcrumb a:hover { color: #fff !important; }
.hero-crumb__current,
.bk-hero__crumb span,
.od-hero__breadcrumb span { color: var(--c-gold-pale) !important; }
.hero-crumb__sep,
.bk-hero__crumb i,
.od-hero__breadcrumb i { opacity: 0.45; font-size: 0.55rem !important; }

/* ── Premium finishing touches, shared by every hero ─────────────── */
/* Hairline gold accent along the bottom edge */
.bk-hero, .ab-hero, .contact-hero, .pf-hero, .ep-hero,
.od-hero, .orders-hero, .page-hero, .sitemap-hero {
    border-bottom: 2px solid transparent !important;
    border-image: linear-gradient(90deg, transparent, var(--c-gold-pale, #E8C86A), transparent) 1 !important;
}
/* Gentle content entrance */
@keyframes uhFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bk-hero__inner, .ab-hero__inner, .pf-hero__inner, .ep-hero__inner,
.od-hero__inner, .orders-hero__inner, .sitemap-hero__inner,
.contact-hero > .container, .page-hero > .container {
    animation: uhFadeUp .5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
    .bk-hero__inner, .ab-hero__inner, .pf-hero__inner, .ep-hero__inner,
    .od-hero__inner, .orders-hero__inner, .sitemap-hero__inner,
    .contact-hero > .container, .page-hero > .container { animation: none; }
}

/* ── Mobile refinements ──────────────────────────────────────────── */
@media (max-width: 640px) {
    .bk-hero, .ab-hero, .contact-hero, .pf-hero, .ep-hero,
    .od-hero, .orders-hero, .page-hero, .sitemap-hero { padding: 22px 0 !important; }
    .bk-hero__title, .ab-hero__title, .contact-hero__title, .pf-hero__name,
    .ep-hero__title, .od-hero__title, .orders-hero__title,
    .page-hero__title, .sitemap-hero__title,
    .bk-hero h1, .ab-hero h1, .contact-hero h1, .pf-hero h1, .ep-hero h1,
    .od-hero h1, .orders-hero h1, .page-hero h1, .sitemap-hero h1 { font-size: 1.32rem !important; }
    .hero-crumb, .bk-hero__crumb, .od-hero__breadcrumb { font-size: 0.62rem !important; padding: 4px 11px !important; }
    .pf-hero__meta { font-size: 0.72rem !important; gap: 4px 12px !important; }
}