/* Deity art is PORTRAIT (868x1160) and must be fully visible: fit by
   HEIGHT and let the width follow. object-fit:cover fits by width and
   crops the deity's head off - 138px on the hero, 128px on the rail.
   Photographs (the guru portrait) keep cover; cropping a photo is fine. */

/* Palette :root comes from templates/partials/_tokens.html via base.html —
   category.html extends base, so the vars are always defined before this sheet. */
*{box-sizing:border-box}
html,body{overflow-x:hidden}
body{margin:0;background:var(--ivory);color:var(--ash);font-family:'Cormorant Garamond',serif;font-size:19px;line-height:1.65;max-width:100%}
h1,h2,h3,h4{font-family:'Cormorant SC',serif;font-weight:700;color:var(--maroon-deep);margin:0}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.eyebrow{font-family:'Karla',sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:12.5px;font-weight:600;color:var(--copper)}
.section-head{max-width:760px;margin-bottom:22px}
.section-head h2{font-size:clamp(23px,2.8vw,30px);margin-top:6px}
.sh-p{font-family:'Karla',sans-serif;font-size:13.5px;color:#5a4a38;margin:9px 0 0;line-height:1.7}
:focus-visible{outline:2px solid var(--vermillion);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.todaybar{background:var(--maroon-deep);color:var(--ivory-light)}
.tb-wrap{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:20px;padding:9px 32px;flex-wrap:wrap}
.tb-lab{font-family:'Karla',sans-serif;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ember)}
.tb-i{font-family:'Karla',sans-serif;font-size:13px;color:#e9dcc8;display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.tb-i em{font-style:normal;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#bda389}
.tb-i b{color:var(--ivory-light);font-weight:700}
.tb-more{margin-left:auto;font-family:'Karla',sans-serif;font-size:12.5px;font-weight:700;color:var(--ember);text-decoration:none}
header.nav{position:sticky;top:0;z-index:60;background:rgba(251,245,233,.97);border-bottom:1px solid var(--copper-line)}
.nav-inner{max-width:1180px;margin:0 auto;padding:12px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:9px;font-family:'Cormorant SC',serif;font-weight:700;font-size:21px;color:var(--maroon-deep);text-decoration:none}
.navlinks{display:flex;gap:22px;list-style:none;margin:0;padding:0;font-family:'Karla',sans-serif;font-size:13px;font-weight:600}
.navlinks a{text-decoration:none;opacity:.85}.navlinks a:hover{opacity:1;color:var(--vermillion)}
.nav-cta{background:var(--vermillion);color:var(--ivory-light);padding:9px 16px;text-decoration:none;font-family:'Karla',sans-serif;font-size:13px;font-weight:700}
@media(max-width:900px){.navlinks{display:none}}
.crumbs{font-family:'Karla',sans-serif;font-size:12.5px;color:#6E5C48;padding:14px 0 0}
.crumbs a{color:var(--copper);text-decoration:none}

/* ---------- head ---------- */
.cathead{padding:22px 0 30px;border-bottom:1px solid var(--copper-line)}
.cat-grid-head{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start}
.cathead h1{font-size:clamp(29px,3.8vw,42px);line-height:1.1}
.cathead h1 em{font-style:normal;color:var(--vermillion)}
.cathead .lede{font-size:17.5px;color:#4a3c33;margin:14px 0 0;max-width:680px}
.who{border:1px solid var(--copper-line);background:var(--ivory-light);padding:18px 20px}
.who h2{font-size:16px;margin-bottom:10px}
.who ul{margin:0;padding:0;list-style:none}
.who li{font-family:'Karla',sans-serif;font-size:13px;color:#4a3c33;padding:6px 0 6px 18px;position:relative;line-height:1.55}
.who li::before{content:"";position:absolute;left:0;top:12px;width:6px;height:6px;background:var(--vermillion);transform:rotate(45deg)}
@media(max-width:900px){.cat-grid-head{grid-template-columns:1fr;gap:24px}}

/* ---------- toolbar ---------- */
.toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:20px 0;border-bottom:1px solid var(--copper-line)}
.tcount{font-family:'Karla',sans-serif;font-size:13px;color:#5a4a38}
.tcount b{color:var(--maroon-deep)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.filters button{font-family:'Karla',sans-serif;font-size:13px;font-weight:600;color:var(--maroon-deep);background:var(--ivory-light);border:1px solid var(--copper-line);padding:8px 14px;cursor:pointer}
.filters button.on{background:var(--vermillion);color:var(--ivory-light);border-color:var(--vermillion)}
.filters select{font-family:'Karla',sans-serif;font-size:13px;font-weight:600;padding:8px 12px;border:1px solid var(--copper-line);background:var(--ivory-light);color:var(--maroon-deep)}

/* ---------- tier bands ----------
   Standard and Maha get a band each instead of one interleaved grid. The colour
   that separates them is the one the card tag already uses — maroon Standard,
   saffron Maha — so the band and the card on it never disagree. Both the rule
   and the count chip carry it, because a hairline alone is not enough
   separation at the 2-column and 1-column breakpoints. */
.tier-band{padding:10px 0 0}
.tier-band + .tier-band{padding-top:40px}
/* A rule with a name on it, nothing more. The count chip and description that
   shared this row were removed 19 Aug 2026 at the client's request, so the
   flex row that arranged all three went with them. */
.tier-head{padding-bottom:11px;border-bottom:2px solid var(--maroon-deep)}
.tier-band.maha .tier-head{border-bottom-color:var(--saffron)}
.tier-head h2{font-size:clamp(21px,2.4vw,26px);line-height:1.2}
.tier-band .plist{padding-top:22px}

/* ---------- product grid ---------- */
.plist{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:28px 0 0}
.prod{display:flex;flex-direction:column;background:var(--ivory-light);border:1px solid var(--copper-line);text-decoration:none;overflow:hidden;transition:transform .15s,box-shadow .15s}
.prod:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--copper)}
/* 3:4, the deity art's own shape — measured, 164 of ~180 files are 0.748.
   The frame was 4:3 LANDSCAPE holding portrait art, so the painting filled
   only 56% of the frame's width and about 22% stood empty down each side
   of every card on every category page. Height-fitting portrait art into a
   landscape frame was a deliberate earlier choice and it is the thing being
   reversed here: the frame now takes the art's shape instead. Cards are
   correspondingly taller, which is what a portrait library costs. */
.prod .th{display:block;position:relative;aspect-ratio:3/4;background:var(--ivory);border-bottom:1px solid var(--copper-line);overflow:hidden}
.prod .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.prod .th i{display:none;position:absolute;inset:0;align-items:center;justify-content:center;font-style:normal;font-family:'Yatra One',cursive;font-size:34px;color:var(--saffron)}
.prod .th.noimg i{display:flex}
.prod .tag{position:absolute;top:10px;left:10px;font-family:'Karla',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:4px 8px;background:var(--maroon-deep);color:var(--ivory-light)}
.prod .tag.maha{background:var(--saffron);color:#3b2408}
.prod .body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.prod h3{font-size:19px;line-height:1.25}
.prod .use{font-family:'Karla',sans-serif;font-size:13px;color:#5a4a38;margin:6px 0 0;line-height:1.6;flex:1}
.prod .inc{font-family:'Karla',sans-serif;font-size:12px;color:var(--green);font-weight:700;margin:9px 0 0}
.prod .foot{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;padding-top:12px;border-top:1px solid var(--copper-line)}
.prod .price{font-family:'Karla',sans-serif;font-weight:700;font-size:17px;color:var(--maroon-deep)}
.prod .price small{font-family:'Karla',sans-serif;font-weight:600;font-size:11.5px;color:#6E5C48;display:block;letter-spacing:.06em;text-transform:uppercase}
.prod .book{font-family:'Karla',sans-serif;font-size:13px;font-weight:700;color:var(--vermillion)}
@media(max-width:1000px){.plist{grid-template-columns:repeat(2,1fr)}}
/* Phones get TWO tiles, not one giant card per screen (client, 24 Aug 2026:
   a single card filled the whole viewport). The tick line is hidden and the
   type steps down so a ~165px tile stays legible rather than crushed. */
@media(max-width:600px){
  .plist{grid-template-columns:repeat(2,1fr);gap:12px}
  .prod .body{padding:10px 12px 12px}
  .prod h3{font-size:15px}
  .prod .use{font-size:11.5px;line-height:1.45}
  .prod .inc{display:none}
  .prod .price{font-size:14px}
  .prod .price small{font-size:10px}
  .prod .book{font-size:11.5px}
}
/* Centred (client, 1 Sep 2026: "Pagination to be on centre"). The pager
   now sits inside its own tier band rather than at the foot of the page,
   so the horizontal padding that used to align it with the page gutter is
   no longer what positions it. */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:26px 32px 6px;font-family:'Karla',sans-serif}
.pager .pg,.pager .pg-prev,.pager .pg-next{font-size:13.5px;font-weight:700;color:var(--maroon-deep);text-decoration:none;border:1px solid var(--copper-line);padding:7px 12px;background:var(--ivory-light)}
.pager a:hover{border-color:var(--copper);color:var(--vermillion)}
.pager .pg.on{background:var(--maroon-deep);color:var(--ivory-light);border-color:var(--maroon-deep)}
@media(max-width:600px){.pager{padding:20px 16px 4px}}

/* ---------- comparison ---------- */
.compare{padding:52px 0 0}
.ctable{width:100%;border-collapse:collapse;font-family:'Karla',sans-serif;font-size:13px}
.ctable th,.ctable td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--copper-line);vertical-align:top}
.ctable thead th{font-family:'Cormorant SC',serif;font-size:15px;color:var(--maroon-deep);border-bottom:2px solid var(--maroon-deep);white-space:nowrap}
.ctable td:first-child{font-family:'Cormorant SC',serif;font-size:16px;color:var(--maroon-deep);font-weight:700}
.ctable td a{color:var(--vermillion);font-weight:700;text-decoration:none;font-family:'Karla',sans-serif;font-size:12.5px}
.ctable tbody tr:hover{background:var(--ivory-light)}
.cscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:760px){.ctable{min-width:640px}}

/* ---------- timing ---------- */
.timing{padding:52px 0 0}
.tm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 30px}
.tm{padding-left:16px;border-left:2px solid var(--saffron)}
.tm b{display:block;font-family:'Cormorant SC',serif;font-size:16.5px;color:var(--maroon-deep);line-height:1.3;margin-bottom:4px}
.tm p{font-family:'Karla',sans-serif;font-size:13px;color:#5a4a38;margin:0;line-height:1.6}
.tm-note{font-family:'Karla',sans-serif;font-size:13px;color:#5a4a38;background:rgba(199,134,43,.12);border-left:3px solid var(--vermillion);padding:14px 18px;margin:24px 0 0;line-height:1.75;max-width:860px}
.tm-note b{color:var(--maroon-deep)}
@media(max-width:860px){.tm-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tm-grid{grid-template-columns:1fr}}

/* ---------- faq ---------- */
.faq-sec{background:var(--ivory-light);border-top:1px solid var(--copper-line);padding:48px 0;margin-top:52px}
.faq{border-top:1px solid var(--copper-line)}
.faq-item{border-bottom:1px solid var(--copper-line)}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:17px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:'Cormorant SC',serif;font-size:18px;font-weight:700;color:var(--maroon-deep)}
.faq-q .ic{color:var(--vermillion);font-size:20px;transition:transform .25s;flex-shrink:0}
.faq-item.open .ic{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a-inner{padding:0 0 18px;font-family:'Karla',sans-serif;font-size:13.5px;color:#4a3c33;line-height:1.8;max-width:820px}
.faq-a-inner a{color:var(--vermillion);font-weight:700;text-decoration:none}

/* ---------- help + related ---------- */
.help{background:var(--maroon-deep);color:var(--ivory-light);padding:40px 0}
.help h2{color:var(--ivory-light);font-size:25px}
.help p{font-family:'Karla',sans-serif;font-size:14px;color:#e9dcc8;margin:10px 0 20px;max-width:620px;line-height:1.7}
.help-ctas{display:flex;gap:12px;flex-wrap:wrap}
.help-ctas a{font-family:'Karla',sans-serif;font-size:14px;font-weight:700;padding:14px 24px;text-decoration:none}
.h-solid{background:var(--ember);color:var(--maroon-deep)}
.h-line{border:1px solid rgba(232,138,60,.55);color:var(--ivory-light)}
.rel{padding:44px 0}
.rel h2{font-size:22px;margin-bottom:16px}
.rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rel-c{display:block;border:1px solid var(--copper-line);background:var(--ivory-light);padding:16px;text-decoration:none}
.rel-c:hover{border-color:var(--copper);background:#fff}
.rel-c h3{font-size:16.5px}
.rel-c span{display:block;font-family:'Karla',sans-serif;font-size:12px;color:var(--vermillion);font-weight:700;margin-top:5px}
@media(max-width:900px){.rel-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- copy ---------- */
.copy{padding:44px 0;border-top:1px solid var(--copper-line)}
.copy h2{font-size:24px;margin-bottom:12px}
.copy p{font-size:17px;color:#3a2f27;margin:0 0 14px;max-width:820px;line-height:1.75}


@media(max-width:620px){
  .wrap{padding:0 16px}
  .nav-inner{padding:11px 16px}
  .tb-wrap{gap:12px;padding:8px 16px}
  .tb-i:nth-child(4){display:none}
  .tb-more{margin-left:0}
  .cathead h1{font-size:26px}
  .cathead .lede{font-size:15.5px}
  .toolbar{gap:10px}
  .filters{margin-left:0;width:100%}
  .faq-q{font-size:16.5px}
  .rel-grid{grid-template-columns:1fr}
}

/* server-rendered filters are now links (were client-side buttons) */
.filters a{font-family:'Karla',sans-serif;font-size:13px;font-weight:600;color:var(--maroon-deep);background:var(--ivory-light);border:1px solid var(--copper-line);padding:8px 14px;cursor:pointer;text-decoration:none;display:inline-block}
.filters a.on{background:var(--vermillion);color:var(--ivory-light);border-color:var(--vermillion)}
.filters a:hover{border-color:var(--copper)}
.filters form{display:inline;margin:0}