/* ==========================================================================
   MADE EASY Publications - Book category listing page
   BOOKS.php / category.php  (e.g. /books/gate-preparation-books)
   --------------------------------------------------------------------------
   Three things this file does:

   1. Full-bleed page. The redesigned header (.nhh) already spans the whole
      viewport, so the 1170px .main_wrapper underneath it looked boxed in.
      Widened here the same way newhome.css does it for the home page, with the
      identical clamp() gutter so the content lines up with the header above it.
      This file only loads on the category page, so widening .main_wrapper
      unscoped is contained to this page.

   2. No side panel. The left rail used to hold #categoryList, which the header
      now owns inside its "More" dropdown. With the id duplicated, getCategory()
      in query.js only ever filled the header copy, so the rail rendered as an
      empty 20% column with a fixed 547px height. The rail is gone from the
      markup; the listing takes the whole page.

   3. Home-page book card. Sections 3-8 below rebuild the legacy card that
      ajax.php prints into the shape the home page uses (eBook/dashboard.php +
      css/newhome.css): cover on top with the status badge over it, then the
      title, the ISBN line, and a footer row holding the price on the left and a
      32px icon-only cart button on the right.

      This is done entirely from CSS - the markup ajax.php emits is untouched -
      so the work splits into two halves per element: cancel what style.css /
      screens.css / responsive.css set for the old card, then apply the
      newhome.css value. Two tricks carry most of it:

        - .popbkboxcntr becomes display:contents, which drops it out of the box
          tree so the cover (.popbkboximg) and the price/button block
          (.popboxrightcnct1) become flex items of .popbkbox alongside the title
          and the ISBN bar. All four can then be re-ordered with `order`, which
          is what allows the ISBN to sit between the title and the price when the
          markup nests them in two different parents.

        - The out-of-stock and pre-order buttons are the same
          `a.addtocartbtn.category` as a normal one and differ only by an inline
          style attribute, so they are picked out with [style*="#ed3e3a"] and
          [style*="#670e6c"] and given the grey / purple treatment plus the badge
          that sits on the cover. Inline styles are also why those two rules need
          !important on background and color.

      Two cosmetic differences from the home page remain, both because the text
      comes from PHP: the discount reads "( 25% OFF )" with the brackets ajax.php
      prints, and the title is a plain div rather than a link to the book.
   ========================================================================== */

/* ---------- 1. full-bleed shell ------------------------------------------ */

/* Header's piracy strip, this page's content, and the footer links all sit in
   a .main_wrapper. Widening it here keeps all three on the same gutter. */
.main_wrapper {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 0 var(--me-gutter, clamp(12px, 2vw, 34px));
}

/* The listing was the 80% half of an 80/20 float pair. */
.cp-page .rgtsection {
    float: none;
    width: 100%;
}

/* .rgtinrcntr's 20px left padding used to indent the breadcrumb past the rail.
   With the rail gone everything aligns to the wrapper gutter instead. */
.cp-page .rgtinrcntr {
    padding-left: 0;
}

/* ---------- 2. design tokens --------------------------------------------- */

/* Copied from the .nh-home block in newhome.css, which is not loaded on this
   page. Keep the values in step with that file - they are the same palette, and
   the cards sit on the same screens as the home page's. */
.cp-page {
    --nh-blue: #0d63c9;
    --nh-blue-dark: #0a4c9e;
    --nh-red: #e02b26;
    --nh-green: #128a4d;
    --nh-ink: #14213d;
    --nh-muted: #6b7a94;
    --nh-line: #d8e4f5;
    --nh-cover: #f4f7fb;
    --nh-radius: 10px;
    --nh-shadow-hover: 0 8px 22px rgba(13, 99, 201, .16);
}

/* ---------- 3. book grid ------------------------------------------------- */

/* Unconditional, phones included. The float layout underneath only worked
   because every card was a constant 554px tall - floats of unequal height wedge
   under each other and leave holes in the rows. The grid stretches each row to
   its own tallest card instead, which is what lets the fixed height go (see
   section 4) at every width rather than only on desktop.

   auto-fill rather than a column count: 20% of a 1900px page is a 380px card,
   far wider than the 297px the home page row gives a card, so the extra room is
   spent on more columns instead of fatter cards. */
.cp-page .bookctgrycntr .popularbkcntr {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;                       /* same gutter as the home page row */
    overflow: visible;               /* was the float clearfix */
}

/* .popularbkcntr holds the title bar, the optional category blurb and the cards
   as flat siblings, so the two non-card children span the full row. */
.cp-page .bookctgrycntr .popularbkcntr > *:not(.poplrbkwdgt) {
    grid-column: 1 / -1;
}

/* The title bar was inset by 20px to clear the rail; its text keeps its own
   20px padding, so the bar itself can now start at the gutter. Bottom margin
   comes off because the grid gap already spaces it from the first row. */
.cp-page .bookctgrycntr .popularbkcntr .poplrbktitle {
    margin-left: 0;
    margin-bottom: 0;
}

/* The category blurb is emitted from ajax.php with an inline padding-left:32px
   that only made sense next to the rail. */
.cp-page .bookctgrycntr .popularbkcntr > div[style*="padding-left"] {
    padding-left: 0 !important;
    margin-bottom: 0 !important;
}

/* Grid tracks size the card now; the float metrics would fight them, and the
   20px padding would double up on the column gap. The long selector is what
   clears screens.css's 33% / 49% / 48.5% / 98% breakpoint widths. */
.cp-page .bookctgrycntr .popularbkcntr .poplrbkwdgt {
    float: none;
    width: auto;
    padding-left: 0;
}

/* ---------- 4. the card box ---------------------------------------------- */

/* .popbkbox was a fixed 554px tall (665px !important below 480px, 650px
   max-height below 768px) with the ISBN bar absolutely pinned to its floor, so
   whatever height the cover, price and button did not use showed up as dead
   space above the ISBN. Auto height plus a flex column lets the box end where
   its content ends and puts the ISBN back in normal flow; cards still line up
   with each other because the grid stretches every item in a row to the
   tallest one. */
.cp-page .bookctgrycntr .popularbkcntr .poplrbkwdgt .popbkbox {
    height: auto !important;
    max-height: none !important;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--nh-line);
    border-radius: var(--nh-radius);
    /* position:relative is inherited from style.css and is load-bearing here:
       it is the containing block for the three cover badges in section 5. */
    text-align: left;
    font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.cp-page .popbkbox,
.cp-page .popbkbox * {
    box-sizing: border-box;
}

/* Legacy hover turned the border cyan; the home page lifts the whole card. */
.cp-page .popularbkcntr .poplrbkwdgt:hover .popbkbox {
    border-color: #bcd5f2;
    box-shadow: var(--nh-shadow-hover);
    transform: translateY(-3px);
}

/* The wrapper around the cover and the price/button block. Removing its box
   promotes its two children to flex items of .popbkbox so section 5-8 can order
   all four parts of the card. display needs !important because ajax.php prints
   display:block inline; the inline padding/overflow/position go with the box. */
.cp-page .popbkbox .popbkboxcntr {
    display: contents !important;
}

/* ---------- 5. cover + badges -------------------------------------------- */

.cp-page .bookctgrycntr .popbkbox .popbkboximg {
    order: 1;
    position: relative;
    width: 100%;
    margin: 0 !important;            /* ajax.php prints margin-bottom:10px */
    background: var(--nh-cover);
    border-radius: 7px;
    overflow: hidden;
}

.cp-page .popbkbox .popbkboximg > a {
    display: block;
}

/* Legacy left the cover at its natural size (max-width:100%, height:auto) and
   below 768px responsive.css pushed min-height to 400px, which stretched the
   cover into a sliver and padded the card out by ~250px. A fixed box with
   object-fit:contain instead, so every cover in a row is the same height
   whatever its aspect ratio. The inline padding-top:5px would be added on top
   of that height. */
.cp-page .popbkbox .popbkboximg a img {
    display: block;                  /* else the inline baseline adds 3px below */
    width: 100%;
    height: 178px;
    min-height: 0;
    max-width: none;
    padding: 0 !important;
    object-fit: contain;
    object-position: center;
    transition: transform .3s ease;
}

.cp-page .popularbkcntr .poplrbkwdgt:hover .popbkboximg a img {
    transform: scale(1.04);
}

/* The grey "View Details" overlay is not part of the new card - the whole cover
   is already a link to the book, and the home page zooms the cover instead. */
.cp-page .popbkbox .popbkboximg .viewdtlscntr {
    display: none;
}

/* --- the three cover badges ---------------------------------------------- */

/* Shared geometry. .newimg1 sits inside the title, the other two are generated
   on the cart button, so all three resolve against .popbkbox and need to be
   painted above the (also positioned) cover. */
.cp-page .popbkbox .popbkboxname .newimg1,
.cp-page .popbkbox .addtocartbtn.category[style*="#ed3e3a"]:before,
.cp-page .popbkbox .addtocartbtn.category[style*="#670e6c"]:before {
    position: absolute;
    top: 17px;                       /* 10px card padding + the flag's own 7px */
    left: 17px;
    right: auto;
    bottom: auto;
    z-index: 3;
    width: auto;
    height: auto;
    margin: 0;
    padding: 4px 7px;
    border-radius: 4px;
    font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .3px;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
}

/* .newimg1 is an empty span carrying a 28x30 new-3.png sprite, pinned to the
   top-left of the title bar. The home page draws a red text pill on the cover
   instead, so the sprite goes and the label comes from content. */
.cp-page .popbkbox .popbkboxname .newimg1 {
    background: var(--nh-red);
    float: none;
    background-size: auto;
}

.cp-page .popbkbox .popbkboxname .newimg1:after {
    content: "New";
}

.cp-page .popbkbox .addtocartbtn.category[style*="#ed3e3a"]:before {
    content: "Out of stock";
    background: #8a8f99;
}

.cp-page .popbkbox .addtocartbtn.category[style*="#670e6c"]:before {
    content: "Pre order";
    background: #670e6c;
}

/* ---------- 6. title ----------------------------------------------------- */

/* The title bar used to be a hard-edged panel above the cover: a gradient
   background, a cyan bottom border, a box-shadow, and a height fixed at
   65-78px per breakpoint (all !important). It is plain clamped text under the
   cover now. position:static hands the badge in section 5 over to .popbkbox. */
.cp-page .bookctgrycntr .popbkbox .popbkboxname {
    order: 2;
    height: auto !important;
    min-height: 36px;
    padding: 0;
    margin: 9px 0 4px;
    position: static;
    background: none;
    border-bottom: 0;
    box-shadow: none;
    text-align: left;
    font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.42;
    color: var(--nh-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- 7. ISBN line ------------------------------------------------- */

/* Was a 50px grey bar absolutely pinned to the bottom of the card (and nudged
   with bottom:-7px !important below 768px). Now a muted line of text between
   the title and the price, in normal flow. */
.cp-page .popbkbox .ctgbkunqcode {
    order: 3;
    position: static;
    height: auto;
    line-height: 1.4;
    margin: 0 0 8px;
    background: none;
    text-align: left;
    font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
    font-size: 10.5px;
    color: var(--nh-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The home page prints "ISBN: 978..." as one muted run, not a bold label. */
.cp-page .popbkbox .ctgbkunqcode strong {
    font-weight: 400;
}

/* ---------- 8. price + cart footer -------------------------------------- */

/* Price on the left, cart button on the right, both sitting on the floor of the
   card. margin-top:auto is what pins the row down when the grid stretches this
   card to match a taller one in the same row. */
/* Wrapping, because a book with a sample PDF prints a "View Sample" link into
   the button cell as well: rather than let it squeeze the price into three
   lines, the cell drops onto its own line under the price, which is roughly
   where the home page puts the sample link anyway. */
.cp-page .popbkbox .popboxrightcnct1 {
    order: 4;
    position: static;                /* keeps the section 5 badges on .popbkbox */
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
}

/* .popprice was a 100px tall centred block (50px below 480px) with
   overflow:hidden, which clipped the third price line off a discounted book.
   A wrapping flex row instead: the selling price takes the whole first line,
   then the struck MRP and the discount note share the second. */
.cp-page .popbkbox .popboxrightcnct1 .popprice {
    flex: 1 1 100px;
    height: auto;
    min-width: 0;
    overflow: visible;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 6px;
    row-gap: 2px;
    text-align: left;
    /* style.css centres the last line of the block, which - the price being a
       single line - centred the price itself under the left-aligned MRP. */
    text-align-last: left;
}

/* The selling price - .orngprice when the book is discounted, .discountprice
   when it is not. Both carried the 12-14px legacy price styling. */
.cp-page .bookctgrycntr .popbkbox .popprice .popbkboxprice.orngprice,
.cp-page .bookctgrycntr .popbkbox .popprice .popbkboxprice.discountprice {
    order: 1;
    flex: 0 0 100%;
    margin: 0;
    font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--nh-ink);
}

/* The struck MRP. It was a full-width left float offset by 13px, so it sat on
   its own line above the price rather than beside it. */
.cp-page .bookctgrycntr .popbkbox .popprice .popbkboxprice.crossprice {
    order: 2;
    float: none;
    width: auto;
    left: auto;
    margin: 0;
    font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--nh-muted);
}

.cp-page .popbkbox .popprice .popbkboxprice .crssbefore {
    font-size: 11.5px;
}

/* "( 25% OFF )" - dark red in the old card, green on the home page. */
.cp-page .popbkbox .popboxrightcnct1 .popprice .catdis {
    order: 3;
    margin: 0;
    text-align: left;
    font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--nh-green);
}

.cp-page .popbkbox .popprice .catdis .tsmryprice {
    font-size: inherit;
    color: inherit;
}

/* The rupee sign is a Flaticon glyph (\e10a) dropped in by three different
   :before rules. The home page prints a plain ₹ in the body font, so the
   glyph is swapped for the character and the fixed 15px advance that spaced the
   icon away from the digits comes off. */
.cp-page .bookctgrycntr .popbkbox .popprice .popbkboxprice.orngprice:before,
.cp-page .bookctgrycntr .popbkbox .popprice .popbkboxprice .crssbefore:before,
.cp-page .bookctgrycntr .popbkbox .popprice .popbkboxprice.discountprice .ajxadiscbefore:before {
    content: "\20B9";
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    width: auto;
    margin: 0;
}

/* Both price branches print an "MRP:" label; the home page shows neither -
   the strike-through says it for the MRP, and a book without a discount just
   shows its price. */
.cp-page .popbkbox .popprice .crossprcmrp {
    display: none;
}

/* --- the cart button ----------------------------------------------------- */

/* The cell holding the button (and the View Sample link, when a book has a
   sample PDF). It was a centred flex row offset with bottom:23px, shifted
   sideways per breakpoint (right: 102px at 640px, margin-top: 30px at 480px)
   and forced to display:inline-block;width:35% below 768px, all of it aimed at
   the old absolutely-positioned card. Back to a plain right-hand cell. */
.cp-page .popbkbox .popboxrightcnct1 .addtocartbtncntr {
    position: static;
    display: flex !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: auto !important;
    height: auto;
    right: auto;
    bottom: auto;
    margin: 0;
    margin-left: auto;               /* stays on the right when it wraps */
}

/* The 32px blue icon button. Everything here is cancelling the old yellow
   gradient pill: the gradient stack (one background shorthand wins over all of
   it), the 2px #C38007 bottom border, the 8px padding, the per-breakpoint
   left/right margins, and the float. */
.cp-page .bookctgrycntr .popbkbox .addtocartbtn.category {
    position: static;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    float: none;
    border: 0;
    border-radius: 7px;
    background: var(--nh-blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background .18s ease, transform .18s ease;
}

.cp-page .bookctgrycntr .popbkbox .addtocartbtn.category:hover {
    background: var(--nh-blue-dark);
    border: 0;
    transform: scale(1.07);
}

/* Inline styles on the markup, hence !important. Out of stock keeps the
   not-allowed cursor rather than the hover lift.

   font-size:0 is how its label is dropped: unlike the other two buttons, the
   out-of-stock one has no <span> around "Out Of<br>Stock" - the text sits
   directly in the anchor, so there is no element to hide. The two pseudo
   elements set their own size, and the cover badge in section 5 is what says
   "out of stock" now. */
.cp-page .bookctgrycntr .popbkbox .addtocartbtn.category[style*="#ed3e3a"],
.cp-page .bookctgrycntr .popbkbox .addtocartbtn.category[style*="#ed3e3a"]:hover {
    background: #b9c0cc !important;
    border: 0 !important;            /* inline border-bottom: 2px solid #971923 */
    cursor: not-allowed;
    transform: none;
    font-size: 0;
}

.cp-page .bookctgrycntr .popbkbox .addtocartbtn.category[style*="#670e6c"] {
    background: #670e6c !important;
    color: #fff !important;
}

.cp-page .bookctgrycntr .popbkbox .addtocartbtn.category[style*="#670e6c"]:hover {
    background: #520a56 !important;
}

/* "Add to Cart" / "PRE ORDER" / "Out Of Stock" - the label is what the cover
   badge and the button colour now carry. */
.cp-page .popbkbox .addtocartbtn.category span {
    display: none;
}

/* The <i> was a 22x24 window onto sprite.png. Same cart and crossed-circle
   glyphs the home page draws inline, as background SVGs. */
.cp-page .popbkbox .addtocartbtn.category i {
    width: 16px;
    height: 16px;
    margin: 0;
    transform: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2 3h2.2l2.4 11.2a1.6 1.6 0 0 0 1.6 1.3h9.1a1.6 1.6 0 0 0 1.6-1.3L21 7H5'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
}

.cp-page .popbkbox .addtocartbtn.category:hover i {
    transform: none;
}

/* ...and the out-of-stock button gets its glyph from :after, because it has no
   <i> either - see the font-size:0 note above. */
.cp-page .popbkbox .addtocartbtn.category[style*="#ed3e3a"]:after {
    content: "";
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='8' y1='16' x2='16' y2='8'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
}

/* --- View Sample -------------------------------------------------------- */

/* Only printed when the book has a sample PDF on disk. It was a grey pill with
   its own sprite icon; the home page uses a plain blue text link. */
.cp-page .popbkbox .view_sample.category {
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--nh-blue);
}

.cp-page .popbkbox .view_sample.category:hover {
    background: none;
    text-decoration: underline;
}

.cp-page .popbkbox .view_sample.category i {
    display: none;
}

.cp-page .popbkbox .view_sample.category span {
    margin: 0;
}

.cp-page .popbkbox .view_sample.category br {
    display: none;
}

/* ---------- 9. stream filter --------------------------------------------- */

/* ajax.php prints the dropdown into the category title bar (the grey strip that
   holds #showTitle2), which the legacy sheet lays out as a single 50px
   line-height run of text. It becomes a flex row here so the title keeps the
   left and the filter takes the right, and it gains the right-hand padding the
   bar never needed when nothing sat on that side.

   :not([style]) is what limits this to the real title bar. The same class is
   reused for the "No Book Available for this Category." notice and for the
   category blurb, and both of those are printed with an inline style attribute -
   flexing them would break the centring their inline text-align sets. */
.cp-page .bookctgrycntr .popularbkcntr .poplrbktitle:not([style]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2px 14px;
    padding-right: 20px;
}

.cp-page .poplrbktitle .cp-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;               /* holds the right edge if the title wraps */
    font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
}

/* The bar's 20px font size and 50px line height are for the category name. */
.cp-page .poplrbktitle .cp-filter__label {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--nh-muted);
}

/* Native chevron off, one drawn in its place, so the control matches the cards
   below rather than the browser's default select. */
.cp-page .poplrbktitle .cp-filter__select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Chrome sizes a select to its *selected* option, not its widest, so the
       control would shrink to "All streams (42)" and then clip the branch name
       the visitor picks. A floor wide enough for a typical stream name instead,
       capped so an unusually long one does not eat the title bar - the native
       dropdown list always shows the full text anyway. */
    min-width: 240px;
    max-width: 320px;
    height: 34px;
    padding: 0 30px 0 11px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a94' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 9px center;
    background-size: 13px 13px;
    border: 1px solid #c9d8ed;
    border-radius: 7px;
    font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 32px;
    color: var(--nh-ink);
    text-overflow: ellipsis;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.cp-page .poplrbktitle .cp-filter__select:hover {
    border-color: var(--nh-blue);
}

.cp-page .poplrbktitle .cp-filter__select:focus {
    outline: none;
    border-color: var(--nh-blue);
    box-shadow: 0 0 0 3px rgba(13, 99, 201, .15);
}

/* Filtered-out cards. The listing is a grid, so display:none is what takes the
   card out of its track - visibility or opacity would leave a hole. */
.cp-page .bookctgrycntr .popularbkcntr .poplrbkwdgt.cp-hidden {
    display: none;
}

/* ---------- 10. narrower screens ---------------------------------------- */

/* Tablet: a slightly narrower floor so 768-1024px lands on 4-5 columns instead
   of dropping to 3 fat ones. Matches searchpage.css. */
@media only screen and (max-width: 1024px) {
    .cp-page .bookctgrycntr .popularbkcntr {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    }

    .cp-page .popbkbox .popbkboximg a img {
        height: 165px;
    }
}

/* Phones: a wider floor, which sounds backwards but is what keeps the column
   count where the legacy breakpoints had it - two cards across a large phone or
   small tablet, one below roughly 500px, instead of two cramped 180px cards on
   a 390px screen. */
@media only screen and (max-width: 575px) {
    .cp-page .bookctgrycntr .popularbkcntr {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 12px;
    }

    .cp-page .popbkbox .popbkboximg a img {
        height: 158px;
    }

    /* The title and the filter no longer fit on one line, so the filter drops
       under the category name and the bar loses its 50px line height. The label
       goes with it - "All streams (42)" in the control says enough. */
    .cp-page .bookctgrycntr .popularbkcntr .poplrbktitle:not([style]) {
        padding: 8px 12px 10px;
        line-height: 1.5;
    }

    .cp-page .poplrbktitle .cp-filter {
        width: 100%;
        margin-left: 0;
    }

    .cp-page .poplrbktitle .cp-filter__label {
        display: none;
    }

    .cp-page .poplrbktitle .cp-filter__select {
        flex: 1 1 auto;
        min-width: 0;                /* narrow phones win over the 240px floor */
        max-width: none;
    }
}