/* ie-plp-cro r4 (r3 + fixed-width Filter button, search placeholder: no CLS) (4 Oct 2026, Ashley "best-in-class mobile listing, Dunelm / Wayfair / Made"). BedKingdom/hyva only (category + search
   layouts). Every rule is scoped to #product-list.bkc-on, which bk/plp-bar.phtml adds only where cuckooland/plp/bk_card=1
   (Bed Kingdom IE first), so BK UK / CK / Flair are unchanged until the flag is set there.
   Cards: identical square photo tiles (thumbnail role, contain, white photo background blended into a near-white tile so cut-outs and
   lifestyle shots line up), tighter spacing, fixed-height text rows (brand / 2-line title / stars / price) so every card in a row lines
   up, swatches right under the price, real-data badges + free-delivery line (cro/card-variants.phtml), whole card is the link,
   compact outline CTA (desktop; on phones only the simple-product quick add, see below). Toolbar (<1024px): one sticky row "Filter (n) | Sort | count", quick chips scroll under it (not sticky).
   No size depends on late data: heights are fixed in CSS, so CLS stays 0. Rollback: var/clbak/ie-plp-cro-<ts>/rollback.sh */

/* ---------- grid ---------- */
html body#html-body #product-list.bkc-on > .products.wrapper > ul{column-gap:.75rem !important;row-gap:1.5rem !important;padding-top:.75rem !important}
@media (min-width:768px){html body#html-body #product-list.bkc-on > .products.wrapper > ul{column-gap:1.25rem !important;row-gap:2.5rem !important}}

/* ---------- card shell: whole card is the link (title link stretched), controls sit above it ---------- */
html body#html-body #product-list.bkc-on .product-item{position:relative}
html body#html-body #product-list.bkc-on .product-item .el-plp-title a::after{content:"";position:absolute;inset:0;z-index:1}
html body#html-body #product-list.bkc-on .product-item .el-plp-title a:focus-visible{outline:none}
html body#html-body #product-list.bkc-on .product-item:has(.el-plp-title a:focus-visible){outline:2px solid var(--bk-black,#09090b);outline-offset:3px}
html body#html-body #product-list.bkc-on .product-item :is(.cl-var__dot,.cl-var__more,.cl-card-cta,.dn-qa,.el-plp-atc,.el-plp-actions__secondary){position:relative;z-index:2}

/* ---------- photo tile ---------- */
html body#html-body #product-list.bkc-on .product-item .el-plp-photo{position:relative;display:block;width:100%;aspect-ratio:1/1 !important;margin:0 0 .5rem !important;overflow:hidden;background:var(--bk-canvas,#FAF7F5) !important}
html body#html-body #product-list.bkc-on .product-item .el-plp-photo img.product-image-photo{display:block;width:100% !important;height:100% !important;object-fit:contain !important;mix-blend-mode:normal !important;background:transparent !important;padding:4% !important;box-sizing:border-box}
html body#html-body #product-list.bkc-on .product-item .el-plp-photo .dn-card__alt{background:var(--bk-canvas,#FAF7F5)}

/* ---------- badges (real data only, see cro/card-variants.phtml) ---------- */
html body#html-body #product-list.bkc-on .bkc-badges{position:absolute;top:.5rem;left:.5rem;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;pointer-events:none}
html body#html-body #product-list.bkc-on .bkc-b{display:inline-block;padding:.25rem .4375rem;background:#fff;color:var(--bk-black,#09090b);font-size:.6875rem;font-weight:700;line-height:1.1;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
html body#html-body #product-list.bkc-on .bkc-b--best{display:none}
html body#html-body #product-list.bkc-on .bkc-b--save{background:var(--bk-sale,#b91c1c);color:#fff;box-shadow:none}

/* ---------- text rows (fixed heights = cards line up) ---------- */
html body#html-body #product-list.bkc-on .product-item .el-card-text{display:flex;flex-direction:column}
html body#html-body #product-list.bkc-on .product-item :is(.el-card-brand,.el-plp-title,.tp-card,.bkc-tp0){order:-1}
html body#html-body #product-list.bkc-on .product-item .el-card-brand{height:1rem;margin:0 0 .125rem !important;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.6875rem !important;line-height:1rem !important}
html body#html-body #product-list.bkc-on .product-item .el-plp-title{height:2.7em;min-height:2.7em !important;margin:0 !important;font-size:.875rem !important;line-height:1.35 !important}
html body#html-body #product-list.bkc-on .product-item .el-plp-title a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html body#html-body #product-list.bkc-on .product-item :is(.tp-card,.bkc-tp0){display:flex;align-items:center;gap:.25rem;height:1rem;margin:.25rem 0 0 !important;overflow:hidden}
html body#html-body #product-list.bkc-on .product-item .el-card-price{min-height:1.5rem !important;padding-top:.25rem !important}
html body#html-body #product-list.bkc-on .product-item .el-card-price .price-box{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.375rem;row-gap:0}
html body#html-body #product-list.bkc-on .product-item .el-card-price .price{font-size:.9375rem !important;font-weight:700 !important;line-height:1.25rem}
html body#html-body #product-list.bkc-on .product-item .el-card-price .price-label{font-size:.75rem !important;font-weight:400 !important;color:var(--bk-muted,#52525b) !important}
html body#html-body #product-list.bkc-on .product-item .el-card-price .old-price .price{font-size:.75rem !important;font-weight:400 !important;color:var(--bk-muted,#52525b) !important;text-decoration:line-through}
html body#html-body #product-list.bkc-on .product-item .el-card-price .old-price.no-display{display:none !important}
html body#html-body #product-list.bkc-on .product-item:has(.bkc--was) .el-card-price .old-price.no-display{display:inline !important}
html body#html-body #product-list.bkc-on .product-item .cl-var{margin:.25rem 0 0 !important}
html body#html-body #product-list.bkc-on .product-item :is(.bkc-dl,.bk-nd){display:flex;align-items:center;gap:.3125rem;height:1.125rem;margin:.25rem 0 0;overflow:hidden;white-space:nowrap;font-size:.75rem;font-weight:600;line-height:1.125rem;color:#166534}
html body#html-body #product-list.bkc-on .product-item :is(.bkc-dl,.bk-nd) svg{flex:none;width:15px;height:15px}
html body#html-body #product-list.bkc-on .product-item .bk-nd{order:1}
html body#html-body #product-list.bkc-on .product-item .bkc-dl{order:1}
html body#html-body #product-list.bkc-on .product-item .bk-nd ~ .bkc-dl{display:none}
html body#html-body #product-list.bkc-on .product-item .el-card-sold{order:2}

/* ---------- compact CTA (outline, pinned to the card bottom) ---------- */
html body#html-body #product-list.bkc-on .product-item .el-plp-actions{order:3;margin-top:auto !important;padding-top:.5rem !important;gap:0 !important}
html body#html-body #product-list.bkc-on .product-item .el-plp-actions__secondary:empty{display:none}
html body#html-body.cl-cro #product-list.bkc-on .product-item .el-plp-actions .cl-card-cta{min-height:2.375rem !important;height:2.375rem !important;padding:0 .5rem !important;border:1px solid var(--bk-black,#09090b) !important;border-radius:0 !important;background:#fff !important;color:var(--bk-black,#09090b) !important;font-size:.75rem !important;font-weight:600 !important;letter-spacing:.06em !important;box-shadow:none !important;gap:.375rem}
html body#html-body.cl-cro #product-list.bkc-on .product-item .el-plp-actions .cl-card-cta:hover,html body#html-body.cl-cro #product-list.bkc-on .product-item .el-plp-actions .cl-card-cta:focus-visible{background:var(--bk-black,#09090b) !important;color:#fff !important}
html body#html-body.cl-cro #product-list.bkc-on .product-item .el-plp-actions .cl-card-cta.cl-card-cta--oos{border-color:#d4d4d8 !important;background:#f4f4f5 !important;color:#52525b !important}
@media (max-width:767.98px){
  html body#html-body #product-list.bkc-on .product-item:has(.bkc--bdup) .el-card-brand{display:none}
  html body#html-body.cl-cro #product-list.bkc-on .product-item .el-plp-actions .cl-card-cta svg{display:none}
  /* phones (default "auto"): no CTA row on cards that need options (whole card opens the product page, where size / colour /
     headboard are chosen) and on sold-out cards (they show "Out of stock"); simple products keep a compact quick "Add to bag".
     cuckooland/plp/bk_card_cta = all -> compact CTA on every card; = none -> no CTA row at all. */
  html body#html-body #product-list.bkc-on:not(.bkc-cta-all) .product-item .el-plp-actions:not(:has(.el-plp-atc)){display:none}
  html body#html-body #product-list.bkc-on.bkc-nocta .product-item .el-plp-actions{display:none}
}
@media (max-width:359.98px){html body#html-body.cl-cro #product-list.bkc-on .product-item .el-plp-actions .cl-card-cta{font-size:.6875rem !important;letter-spacing:.02em !important}}
@media (min-width:1024px){
  html body#html-body #product-list.bkc-on .product-item .el-plp-photo{margin-bottom:.75rem !important}
  html body#html-body #product-list.bkc-on .product-item .el-plp-title{font-size:.9375rem !important}
  html body#html-body #product-list.bkc-on .product-item .el-card-price .price{font-size:1rem !important}
  html body#html-body.cl-cro #product-list.bkc-on .product-item .el-plp-actions .cl-card-cta{min-height:2.5rem !important;height:2.5rem !important}
}

/* ---------- compact sticky toolbar (<1024px): Filter (n) | Sort | count ---------- */
@media (max-width:1023.98px){
  html body#html-body.cl-cro #product-list.bkbar-on{column-gap:0}
  html body#html-body.cl-cro #product-list.bkbar-on > .bkbar{order:3;position:sticky;top:calc(var(--cl-head-h,146px) - var(--bk-hide-h,88px) - 1px);z-index:36;display:flex;flex:0 0 auto;align-items:center;gap:.5rem;width:100vw;max-width:none;height:3.25rem;margin:0 0 0 calc(50% - 50vw);padding:0 .9375rem;box-sizing:border-box;background:#fff;border-top:1px solid var(--bk-line,#e4e4e7);border-bottom:1px solid var(--bk-line,#e4e4e7)}
  html body#html-body #product-list.bkbar-on > .bkbar > :is(.dn-quick__label,.ck-fd-btn),html body#html-body #product-list.bkbar-on > .bkbar .el-plp-meta > .ck-fd-btn{order:1;display:inline-flex;align-items:center;justify-content:center;gap:.375rem;flex:none;min-width:7.25rem;box-sizing:border-box;height:2.375rem;min-height:0;margin:0;padding:0 .875rem;border:1px solid var(--bk-black,#09090b);background:var(--bk-black,#09090b);color:#fff;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer}
  html body#html-body #product-list.bkbar-on > .bkbar .ck-fd-n{display:inline-flex;align-items:center;justify-content:center;min-width:1.125rem;height:1.125rem;padding:0 .25rem;border-radius:999px;background:#fff;color:var(--bk-black,#09090b);font-size:.6875rem;letter-spacing:0}
  html body#html-body.cl-cro #product-list.bkbar-on > .bkbar > .toolbar-products{order:2;display:block;flex:none;width:auto;margin:0;padding:0;gap:0}
  html body#html-body #product-list.bkbar-on > .bkbar > .toolbar-products > :not(.toolbar-sorter){display:none !important}
  html body#html-body #product-list.bkbar-on > .bkbar .toolbar-sorter{margin:0;padding:0}
  html body#html-body.cl-cro #product-list.bkbar-on > .bkbar .cl-cro-sort__l{position:relative;display:inline-flex;align-items:center;gap:.375rem;height:2.375rem;margin:0;padding:0 2rem 0 .875rem;border:1px solid var(--bk-black,#09090b);background:#fff;cursor:pointer}
  html body#html-body.cl-cro #product-list.bkbar-on > .bkbar .cl-cro-sort__l::after{content:"";position:absolute;right:.875rem;top:50%;width:6px;height:6px;margin-top:-5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);pointer-events:none}
  html body#html-body.cl-cro #product-list.bkbar-on > .bkbar .cl-cro-sort__t{font-size:.75rem;font-weight:600;letter-spacing:.08em;color:var(--bk-black,#09090b)}
  html body#html-body #product-list.bkbar-on > .bkbar .bkbar-sorted .cl-cro-sort__t::after{content:"";display:inline-block;width:6px;height:6px;margin-left:.375rem;vertical-align:middle;border-radius:50%;background:var(--bk-sale,#b91c1c)}
  html body#html-body.cl-cro #product-list.bkbar-on > .bkbar .cl-cro-sort select{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;font-size:16px;cursor:pointer;-webkit-appearance:none;appearance:none}
  html body#html-body.cl-cro #product-list.bkbar-on > .bkbar > .el-plp-meta{display:contents}
  html body#html-body.cl-cro #product-list.bkbar-on > .bkbar .el-plp-count{order:3;flex:0 1 auto;min-width:0;margin:0 0 0 auto !important;text-align:right;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.75rem !important;letter-spacing:.02em !important;text-transform:none !important;color:var(--bk-muted,#52525b) !important}
  /* quick chips: plain scroll row under the bar */
  html body#html-body.cl-cro #product-list.bkbar-on > .dn-quick{position:relative !important;top:auto !important;z-index:20;margin:.5rem 0 0 calc(50% - 50vw) !important;padding:0 0 0 .9375rem !important;border-bottom:0 !important;overflow-x:auto;overflow-y:visible}
  html body#html-body.cl-cro #product-list.bkbar-on > .dn-quick.bkbar-empty{display:none}
  html body#html-body.cl-cro #product-list.bkbar-on .dn-quick__btn,html body#html-body.cl-cro #product-list.bkbar-on .dn-quick__active{height:2.125rem !important;padding:0 .75rem !important;font-size:.8125rem}
}