/* Sanatan Bliss — puja-vidhi.css */
/* Page-specific styles, loaded via @push('styles') */

/* ── from sanatanbliss_puja_vidhi ── */
html { scroll-behavior: smooth; }
    body { font-family: var(--font-body); background: var(--cream); color: var(--stone); overflow-x: hidden; }

    /* ── TOPBAR ── */
    .topbar { background: var(--maroon); color: rgba(255,255,255,0.85); font-size: 0.72rem; letter-spacing: 0.07em; padding: 7px 40px; display: flex; justify-content: space-between; align-items: center; }
    .topbar-right { display: flex; align-items: center; gap: 20px; }
    .topbar-right a { color: rgba(255,255,255,0.75); text-decoration: none; transition: color .2s; }
    .topbar-right a:hover { color: var(--gold-light); }
    .lang-toggle { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 20px; padding: 2px 10px; font-size: .68rem; cursor: pointer; color: white; }

    /* ── NAVBAR ── */
    nav { position: sticky; top: 0; z-index: 100; background: rgba(250,246,238,.96); backdrop-filter: blur(12px); border-bottom: 1px solid var(--cream-dark); padding: 0 40px; display: flex; align-items: center; justify-content: space-between; height: 68px; box-shadow: 0 2px 20px rgba(107,30,15,.06); }
    .nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
    .nav-logo-om { width: 38px; height: 38px; background: var(--maroon); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--gold-light); font-family: var(--font-hindi); }
    .nav-logo-text .brand { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--maroon); display: block; }
    .nav-logo-text .tagline { font-size: .62rem; color: var(--stone-light); letter-spacing: .12em; text-transform: uppercase; display: block; }
    .nav-links { display: flex; align-items: center; gap: 4px; }
    .nav-links a { font-size: .82rem; font-weight: 500; color: var(--stone); text-decoration: none; padding: 6px 12px; border-radius: 6px; transition: all .2s; }
    .nav-links a:hover, .nav-links a.active { color: var(--maroon); background: var(--saffron-pale); }
    .nav-actions { display: flex; align-items: center; gap: 10px; }
    .nav-icon-btn { width: 36px; height: 36px; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--stone-mid); transition: all .2s; font-size: 1rem; }
    .nav-icon-btn:hover { background: var(--saffron-pale); color: var(--maroon); }
    .nav-shop-btn { background: var(--maroon); color: white; border: none; border-radius: 8px; padding: 8px 18px; font-size: .8rem; font-family: var(--font-body); font-weight: 500; cursor: pointer; transition: all .25s; text-decoration: none; display: flex; align-items: center; gap: 6px; }
    .nav-shop-btn:hover { background: var(--maroon-mid); transform: translateY(-1px); }

    /* ── PAGE HERO ── */
    .page-hero { min-height: 52vh; position: relative; display: grid; place-items: center; overflow: hidden; background: var(--maroon); }
    .hero-bg { position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 70% 50% at 20% 50%, rgba(212,160,23,.15) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 80% 30%, rgba(194,96,10,.18) 0%, transparent 55%),
        linear-gradient(160deg, #1A0500 0%, var(--maroon) 50%, #3D0A00 100%);
    }
    .hero-ring { position: absolute; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%,-50%); animation: spin 80s linear infinite; }
    .ring-1 { width: 540px; height: 540px; border: 1px solid rgba(255,255,255,.05); }
    .ring-2 { width: 390px; height: 390px; border: 1px dashed rgba(212,160,23,.1); animation-direction: reverse; animation-duration: 55s; }
    @keyframes spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
    /* Floating ritual items */
    .float-item { position: absolute; font-size: 1.8rem; opacity: 0; animation: floatUp linear infinite; }
    @keyframes floatUp { 0%{transform:translateY(100vh) rotate(0deg);opacity:0} 10%{opacity:.6} 90%{opacity:.3} 100%{transform:translateY(-100px) rotate(20deg);opacity:0} }

    .hero-content { position: relative; z-index: 2; text-align: center; padding: 56px 24px; max-width: 740px; animation: fadeUp .9s ease both; }
    @keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
    .hero-kicker { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-light); font-weight: 600; display: block; margin-bottom: 12px; }
    .hero-title { font-family: var(--font-display); font-size: clamp(2.4rem,5.5vw,4.4rem); font-weight: 300; color: white; line-height: 1.1; margin-bottom: 6px; }
    .hero-title em { font-style: italic; color: var(--saffron-light); }
    .hero-title-hi { font-family: var(--font-hindi); font-size: 1.3rem; color: rgba(255,255,255,.45); display: block; margin-bottom: 16px; }
    .hero-divider { width: 48px; height: 2px; background: linear-gradient(90deg,transparent,var(--gold),transparent); margin: 0 auto 18px; }
    .hero-sub { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: rgba(255,255,255,.65); line-height: 1.7; margin-bottom: 28px; max-width: 560px; margin-left: auto; margin-right: auto; }
    .hero-badges { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
    .hero-badge { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 50px; padding: 7px 18px; font-size: .8rem; color: rgba(255,255,255,.8); display: flex; align-items: center; gap: 6px; }

    /* ── BREADCRUMB ── */
    .breadcrumb { background: var(--cream-dark); padding: 11px 40px; display: flex; align-items: center; gap: 8px; font-size: .74rem; color: var(--stone-mid); }
    .breadcrumb a { color: var(--saffron); text-decoration: none; }
    .breadcrumb a:hover { text-decoration: underline; }

    /* ── SEARCH BAR ── */
    .search-section { background: white; border-bottom: 1px solid var(--cream-dark); padding: 16px 40px; display: flex; align-items: center; gap: 14px; }
    .search-wrap { position: relative; flex: 1; max-width: 480px; }
    .search-input { width: 100%; padding: 11px 18px 11px 42px; border: 1.5px solid var(--cream-dark); border-radius: 50px; font-family: var(--font-body); font-size: .86rem; color: var(--stone); background: var(--cream); outline: none; transition: all .2s; }
    .search-input:focus { border-color: var(--saffron); background: white; box-shadow: 0 0 0 3px rgba(194,96,10,.08); }
    .search-input::placeholder { color: var(--stone-light); }
    .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: .95rem; color: var(--stone-light); pointer-events: none; }
    .filter-row { display: flex; gap: 8px; flex-wrap: wrap; }
    .chip { padding: 7px 14px; border-radius: 20px; border: 1.5px solid var(--cream-dark); background: var(--cream); font-family: var(--font-body); font-size: .76rem; color: var(--stone-mid); cursor: pointer; transition: all .2s; white-space: nowrap; }
    .chip:hover { border-color: var(--saffron); color: var(--saffron); background: var(--saffron-pale); }
    .chip.active { background: var(--maroon); border-color: var(--maroon); color: white; }

    /* ── MAIN LAYOUT ── */
    .main-layout { max-width: 1200px; margin: 0 auto; padding: 44px 40px 80px; display: grid; grid-template-columns: 1fr 308px; gap: 48px; align-items: start; }

    /* ── FEATURED PUJA ── */
    
    

    .featured-puja { background: white; border: 1px solid var(--cream-dark); border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 36px; text-decoration: none; color: var(--stone); transition: all .3s; }
    .featured-puja:hover { box-shadow: 0 16px 48px rgba(107,30,15,.12); transform: translateY(-2px); }
    .fp-visual { background: linear-gradient(145deg, #FEF3DC, #FDE8C0); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 28px; gap: 16px; position: relative; min-height: 280px; }
    .fp-emoji { font-size: 5rem; }
    .fp-steps-preview { display: flex; flex-direction: column; gap: 6px; width: 100%; }
    .fp-step { background: white; border-radius: 8px; padding: 7px 12px; font-size: .72rem; color: var(--stone-mid); display: flex; align-items: center; gap: 8px; border: 1px solid rgba(194,96,10,.1); }
    .fp-step-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--maroon); color: white; font-size: .58rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .fp-badge { position: absolute; top: 14px; left: 14px; background: var(--maroon); color: white; font-size: .6rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; letter-spacing: .07em; text-transform: uppercase; }
    .fp-body { padding: 32px 28px; display: flex; flex-direction: column; justify-content: center; }
    .fp-tag { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--saffron-pale); color: var(--saffron); margin-bottom: 12px; }
    .fp-name { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; color: var(--maroon); line-height: 1.2; margin-bottom: 4px; }
    .fp-name-hi { font-family: var(--font-hindi); font-size: 1rem; color: var(--stone-mid); display: block; margin-bottom: 14px; }
    .fp-desc { font-size: .87rem; color: var(--stone-mid); line-height: 1.75; margin-bottom: 20px; }
    .fp-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
    .fp-meta-item { font-size: .75rem; color: var(--stone-light); display: flex; align-items: center; gap: 5px; }
    .fp-actions { display: flex; gap: 10px; flex-wrap: wrap; }
    .btn-primary { background: var(--maroon); color: white; border: none; padding: 11px 22px; border-radius: 50px; font-family: var(--font-body); font-size: .82rem; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; transition: all .25s; }
    .btn-primary:hover { background: var(--maroon-mid); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(107,30,15,.25); }
    .btn-outline { background: transparent; color: var(--maroon); border: 1.5px solid rgba(107,30,15,.25); padding: 10px 20px; border-radius: 50px; font-family: var(--font-body); font-size: .82rem; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; transition: all .25s; }
    .btn-outline:hover { border-color: var(--saffron); color: var(--saffron); background: var(--saffron-pale); }

    /* ── CATEGORY TABS ── */
    .cat-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
    .cat-tab { padding: 8px 18px; border-radius: 20px; border: 1.5px solid var(--cream-dark); background: white; font-family: var(--font-body); font-size: .78rem; color: var(--stone-mid); cursor: pointer; transition: all .2s; font-weight: 500; display: flex; align-items: center; gap: 6px; }
    .cat-tab:hover { border-color: var(--saffron); color: var(--saffron); }
    .cat-tab.active { background: var(--maroon); border-color: var(--maroon); color: white; }
    .cat-count { font-size: .62rem; opacity: .7; }

    /* ── PUJA GRID ── */
    .puja-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; }
    .puja-card { background: white; border: 1px solid var(--cream-dark); border-radius: 20px; overflow: hidden; text-decoration: none; color: var(--stone); transition: all .3s; display: flex; flex-direction: column; }
    .puja-card:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(107,30,15,.1); border-color: rgba(194,96,10,.2); }
    .pc-top { height: 100px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; position: relative; }
    .pc-emoji { font-size: 2.6rem; }
    .pc-steps-badge { background: var(--cream); border: 1px solid var(--cream-dark); border-radius: 20px; padding: 3px 10px; font-size: .65rem; color: var(--stone-mid); font-weight: 600; }
    .pc-popular { position: absolute; top: 10px; left: 10px; background: var(--maroon); color: white; font-size: .58rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; letter-spacing: .06em; text-transform: uppercase; }
    .pc-body { padding: 14px 18px 18px; flex: 1; display: flex; flex-direction: column; }
    .pc-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--maroon); line-height: 1.25; margin-bottom: 2px; }
    .pc-name-hi { font-family: var(--font-hindi); font-size: .82rem; color: var(--stone-mid); display: block; margin-bottom: 8px; }
    .pc-desc { font-size: .8rem; color: var(--stone-mid); line-height: 1.65; margin-bottom: 12px; flex: 1; }
    .pc-footer { display: flex; align-items: center; justify-content: space-between; }
    .pc-tags { display: flex; gap: 5px; flex-wrap: wrap; }
    .pc-tag { font-size: .6rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; padding: 2px 8px; border-radius: 10px; }
    .pct-d { background: var(--saffron-pale); color: var(--saffron); }
    .pct-t { background: var(--cream-dark); color: var(--stone-mid); }
    .pct-f { background: var(--green-light); color: var(--green); }
    .pct-s { background: var(--gold-light); color: #8B5E00; }
    .pc-arrow { color: var(--saffron); font-size: 1rem; }

    /* ── PUJA LIST ── */
    .puja-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
    .puja-list-item { background: white; border: 1px solid var(--cream-dark); border-radius: 14px; display: flex; align-items: stretch; overflow: hidden; text-decoration: none; color: var(--stone); transition: all .3s; }
    .puja-list-item:hover { transform: translateX(4px); box-shadow: 0 6px 24px rgba(107,30,15,.09); border-color: rgba(194,96,10,.2); }
    .pli-emoji { width: 76px; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; background: var(--cream); border-right: 1px solid var(--cream-dark); flex-shrink: 0; }
    .pli-body { flex: 1; padding: 13px 16px; }
    .pli-name { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--maroon); margin-bottom: 2px; }
    .pli-name-hi { font-family: var(--font-hindi); font-size: .8rem; color: var(--stone-mid); display: block; margin-bottom: 5px; }
    .pli-tags { display: flex; gap: 5px; }
    .pli-right { padding: 13px 16px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; flex-shrink: 0; }
    .pli-duration { font-size: .7rem; color: var(--stone-light); white-space: nowrap; }
    .pli-arrow { color: var(--saffron); font-size: .95rem; }

    /* ── DETAIL VIEW ── */
    .detail-section { margin-top: 48px; background: white; border: 1px solid var(--cream-dark); border-radius: 24px; overflow: hidden; }
    .detail-header { background: linear-gradient(135deg, var(--maroon), #3D0A0A); padding: 32px 36px; position: relative; overflow: hidden; }
    .detail-header::after { content:'ॐ'; position:absolute; font-family:var(--font-hindi); font-size:10rem; color:rgba(255,255,255,.04); right:-10px; top:50%; transform:translateY(-50%); pointer-events:none; }
    .dh-tag { display: inline-flex; align-items: center; gap: 6px; background: rgba(212,160,23,.2); border: 1px solid rgba(212,160,23,.3); border-radius: 20px; padding: 4px 12px; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 14px; }
    .dh-title { font-family: var(--font-display); font-size: 2.2rem; font-weight: 600; color: white; line-height: 1.15; margin-bottom: 4px; }
    .dh-title-hi { font-family: var(--font-hindi); font-size: 1.1rem; color: rgba(255,255,255,.5); display: block; margin-bottom: 16px; }
    .dh-meta { display: flex; gap: 16px; flex-wrap: wrap; }
    .dh-meta-item { font-size: .8rem; color: rgba(255,255,255,.65); display: flex; align-items: center; gap: 6px; }
    .dh-meta-sep { width: 1px; height: 14px; background: rgba(255,255,255,.15); }

    .detail-body { padding: 36px; }

    /* Samagri / items needed */
    .samagri-section { background: var(--saffron-pale); border: 1px solid rgba(194,96,10,.2); border-radius: 18px; padding: 24px; margin-bottom: 32px; }
    .ss-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--maroon); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
    .ss-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .ss-item { background: white; border: 1px solid rgba(194,96,10,.12); border-radius: 10px; padding: 9px 12px; font-size: .8rem; color: var(--stone); display: flex; align-items: center; gap: 8px; }
    .ss-icon { font-size: 1.1rem; }
    .ss-item-name { font-weight: 500; }
    .ss-item-hi { font-family: var(--font-hindi); font-size: .75rem; color: var(--stone-mid); display: block; }

    /* Steps */
    .steps-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--maroon); margin-bottom: 20px; }
    .steps-list { display: flex; flex-direction: column; gap: 0; }
    .step-item { display: flex; gap: 0; position: relative; }
    .step-item:not(:last-child) .step-line { position: absolute; left: 19px; top: 40px; width: 2px; height: calc(100% - 10px); background: linear-gradient(180deg, var(--saffron), rgba(194,96,10,.15)); }
    .step-left { display: flex; flex-direction: column; align-items: center; padding-right: 20px; flex-shrink: 0; padding-top: 2px; }
    .step-num { width: 38px; height: 38px; border-radius: 50%; background: var(--maroon); color: white; font-size: .85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1; box-shadow: 0 0 0 4px var(--saffron-pale); }
    .step-right { flex: 1; padding-bottom: 28px; }
    .step-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--maroon); margin-bottom: 4px; }
    .step-title-hi { font-family: var(--font-hindi); font-size: .85rem; color: var(--stone-mid); display: block; margin-bottom: 8px; }
    .step-desc { font-size: .87rem; color: var(--stone-mid); line-height: 1.75; }
    .step-mantra { background: var(--maroon); border-radius: 12px; padding: 14px 18px; margin-top: 12px; }
    .step-mantra-label { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); font-weight: 600; margin-bottom: 6px; display: block; }
    .step-mantra-text { font-family: var(--font-hindi); font-size: 1rem; color: rgba(255,255,255,.9); line-height: 1.9; }
    .step-tip { background: var(--green-light); border: 1px solid rgba(26,92,58,.15); border-radius: 10px; padding: 10px 14px; margin-top: 10px; font-size: .8rem; color: var(--stone-mid); display: flex; gap: 8px; align-items: flex-start; }
    .step-tip::before { content:'💡'; flex-shrink:0; }

    /* Product inline rec */
    .product-rec { background: var(--cream); border: 1px solid var(--cream-dark); border-radius: 14px; padding: 14px 18px; margin-top: 16px; display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--stone); transition: all .3s; }
    .product-rec:hover { border-color: var(--saffron); box-shadow: 0 4px 18px rgba(107,30,15,.08); }
    .pr-img { width: 52px; height: 52px; border-radius: 10px; background: var(--saffron-pale); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0; }
    .pr-label { font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--saffron); font-weight: 700; display: block; margin-bottom: 2px; }
    .pr-name { font-family: var(--font-display); font-size: .95rem; font-weight: 600; color: var(--maroon); }
    .pr-price { font-size: .8rem; color: var(--stone-mid); }
    .pr-btn { margin-left: auto; background: var(--maroon); color: white; border: none; padding: 7px 16px; border-radius: 20px; font-family: var(--font-body); font-size: .75rem; font-weight: 600; cursor: pointer; flex-shrink: 0; transition: background .2s; text-decoration: none; }
    .pr-btn:hover { background: var(--maroon-mid); }

    /* Related pujas */
    .related-section { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--cream-dark); }
    .related-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--maroon); margin-bottom: 16px; }
    .related-scroll { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
    .related-scroll::-webkit-scrollbar { display: none; }
    .related-card { flex-shrink: 0; width: 160px; background: var(--cream); border: 1px solid var(--cream-dark); border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--stone); transition: all .3s; }
    .related-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(107,30,15,.1); }
    .rc-emoji { height: 80px; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; }
    .rc-name { font-family: var(--font-display); font-size: .88rem; font-weight: 600; color: var(--maroon); padding: 0 12px 12px; line-height: 1.3; }

    /* Share + print bar */
    .action-bar { background: var(--cream-dark); padding: 16px 36px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--cream-dark); }
    .action-bar-label { font-size: .72rem; font-weight: 600; color: var(--stone-mid); text-transform: uppercase; letter-spacing: .06em; }
    .action-btn { padding: 8px 16px; border-radius: 20px; border: 1.5px solid rgba(107,30,15,.15); background: white; font-family: var(--font-body); font-size: .77rem; color: var(--stone-mid); cursor: pointer; display: flex; align-items: center; gap: 5px; transition: all .2s; }
    .action-btn:hover { border-color: var(--saffron); color: var(--saffron); background: var(--saffron-pale); }

    /* ── SIDEBAR ── */
    .sidebar { display: flex; flex-direction: column; gap: 20px; }
    .sidebar-card { background: white; border-radius: 20px; border: 1px solid var(--cream-dark); padding: 22px; }
    .sidebar-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--maroon); margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--cream-dark); }

    /* Occasion finder */
    .occasion-list { display: flex; flex-direction: column; gap: 8px; }
    .occasion-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--stone); transition: all .2s; border: 1px solid transparent; }
    .occasion-item:hover { background: var(--saffron-pale); border-color: rgba(194,96,10,.15); }
    .occ-icon { font-size: 1.2rem; width: 32px; text-align: center; }
    .occ-name { font-size: .84rem; font-weight: 500; color: var(--stone); flex: 1; }
    .occ-count { font-size: .68rem; color: var(--stone-light); background: var(--cream-dark); padding: 2px 8px; border-radius: 20px; }

    /* Samagri checklist */
    .checklist-widget { background: linear-gradient(135deg, var(--saffron-pale), var(--cream)); border: 1px solid rgba(194,96,10,.2); border-radius: 20px; padding: 22px; }
    .cw-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--maroon); margin-bottom: 6px; }
    .cw-desc { font-size: .78rem; color: var(--stone-mid); line-height: 1.6; margin-bottom: 16px; }
    .cw-items { display: flex; flex-direction: column; gap: 8px; }
    .cw-item { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--stone-mid); cursor: pointer; transition: color .2s; }
    .cw-checkbox { width: 18px; height: 18px; border: 2px solid rgba(194,96,10,.3); border-radius: 5px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all .2s; background: white; }
    .cw-item.checked .cw-checkbox { background: var(--green); border-color: var(--green); color: white; font-size: .7rem; }
    .cw-item.checked span:last-child { text-decoration: line-through; color: var(--stone-light); }
    .cw-btn { margin-top: 14px; width: 100%; padding: 10px; background: var(--maroon); color: white; border: none; border-radius: 10px; font-family: var(--font-body); font-size: .8rem; font-weight: 600; cursor: pointer; transition: background .2s; }
    .cw-btn:hover { background: var(--maroon-mid); }

    /* Pandit widget */
    .pandit-widget { background: var(--maroon); border-radius: 20px; padding: 22px; text-align: center; }
    .pw-icon { font-size: 2rem; display: block; margin-bottom: 8px; }
    .pw-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: white; margin-bottom: 6px; }
    .pw-desc { font-size: .78rem; color: rgba(255,255,255,.6); line-height: 1.6; margin-bottom: 16px; }
    .pw-btn { width: 100%; padding: 11px; background: var(--gold); color: var(--stone); border: none; border-radius: 10px; font-family: var(--font-body); font-size: .82rem; font-weight: 700; cursor: pointer; transition: background .2s; }
    .pw-btn:hover { background: var(--saffron-light); }
    .pw-note { font-size: .7rem; color: rgba(255,255,255,.4); margin-top: 8px; }

    /* Popular this week */
    .popular-list { display: flex; flex-direction: column; gap: 10px; }
    .popular-item { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--stone); padding: 8px 10px; border-radius: 10px; transition: all .2s; }
    .popular-item:hover { background: var(--saffron-pale); }
    .pop-rank { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: rgba(194,96,10,.15); min-width: 24px; line-height: 1; }
    .pop-name { font-size: .83rem; font-weight: 500; color: var(--stone); flex: 1; line-height: 1.3; }
    .pop-name:hover { color: var(--saffron); }
    .pop-views { font-size: .68rem; color: var(--stone-light); }

    /* ── FADE UP ── */
    
    

    /* ── FOOTER ── */
    footer { background: var(--stone); color: rgba(255,255,255,.65); padding: 64px 40px 24px; }
    .footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.08); }
    .footer-brand-name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: white; display: block; margin-bottom: 4px; }
    .footer-brand-tagline { font-size: .76rem; color: rgba(255,255,255,.4); font-style: italic; display: block; margin-bottom: 14px; }
    .footer-brand-desc { font-size: .81rem; line-height: 1.7; margin-bottom: 18px; }
    .socials { display: flex; gap: 8px; }
    .social-btn { width: 34px; height: 34px; background: rgba(255,255,255,.08); border-radius: 8px; border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.55); font-size: .85rem; text-decoration: none; transition: all .2s; }
    .social-btn:hover { background: var(--maroon); color: white; border-color: var(--maroon); }
    .footer-col h4 { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-light); font-weight: 600; margin-bottom: 16px; }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
    .footer-col ul li a { font-size: .82rem; color: rgba(255,255,255,.58); text-decoration: none; transition: color .2s; }
    .footer-col ul li a:hover { color: white; }
    .footer-bottom { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding-top: 24px; font-size: .73rem; color: rgba(255,255,255,.3); }
    .footer-om { color: var(--saffron-light); font-family: var(--font-hindi); font-size: 1rem; }

    /* ── RESPONSIVE ── */
    @media (max-width: 1024px) { .main-layout { grid-template-columns: 1fr; } .sidebar { display: grid; grid-template-columns: 1fr 1fr; } .ss-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 768px) {
      .topbar, nav, .breadcrumb, .search-section { padding-left: 20px; padding-right: 20px; }
      .main-layout { padding: 28px 20px 60px; }
      .nav-links { display: none; }
      .featured-puja { grid-template-columns: 1fr; }
      .fp-visual { min-height: 200px; }
      .puja-grid { grid-template-columns: 1fr; }
      .sidebar { grid-template-columns: 1fr; }
      .ss-grid { grid-template-columns: 1fr 1fr; }
      .detail-body { padding: 24px 20px; }
      .detail-header { padding: 24px 20px; }
      .action-bar { padding: 14px 20px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
      footer { padding: 48px 20px 20px; }
    }
    @media (max-width: 500px) {
      .footer-grid { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; gap: 6px; text-align: center; }
      .ss-grid { grid-template-columns: 1fr; }
    }