/* =====================================================================
   Cuckooland CRO/UX layer (CRO worker, see BUILD.md). Loaded after cl.css; every rule is scoped to body.cl-cro.
   Brand tokens come from cl.css (--cl-teal, --cl-pink, --cl-green, --cl-green-dark, --cl-grey). Nothing here adds claims.
   ===================================================================== */

/* ---------- shared chips ---------- */
body.cl-cro .cl-cro-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
body.cl-cro .cl-cro-chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: .125rem 0 .25rem; scroll-padding-inline: .75rem; }
body.cl-cro .cl-cro-chips--scroll::-webkit-scrollbar { display: none; }
body.cl-cro .cl-cro-chips li { flex: none; }
body.cl-cro .cl-cro-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; border: 1px solid #cfd6d6; border-radius: 999px; background: #fff; color: var(--cl-teal); font-size: .875rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
body.cl-cro .cl-cro-chip:hover, body.cl-cro .cl-cro-chip:focus-visible { border-color: var(--cl-teal); background: #f3f6f6; }
@media (min-width: 768px) { body.cl-cro .cl-cro-chips--scroll { flex-wrap: wrap; overflow: visible; justify-content: center; } }

/* ---------- header: instant search ---------- */
body.cl-cro .cl-search { position: relative; }
body.cl-cro .cl-sugg { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60; max-height: min(70vh, 34rem); overflow-y: auto; background: #fff; border: 1px solid #cfd6d6; border-radius: 4px; box-shadow: 0 14px 36px rgba(0,0,0,.14); padding: .375rem 0; text-align: left; }
@media (min-width: 1024px) { body.cl-cro .cl-sugg { left: auto; width: 26rem; } }
body.cl-cro .cl-sugg[hidden] { display: none; }
body.cl-cro .cl-sugg__h { margin: .5rem .875rem .25rem; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #5b6b6d; }
body.cl-cro .cl-sugg__o { display: flex; align-items: center; gap: .75rem; min-height: 40px; padding: .25rem .875rem; color: #1f2d2f; text-decoration: none; font-size: .9375rem; line-height: 1.3; }
body.cl-cro .cl-sugg__o:hover, body.cl-cro .cl-sugg__o[aria-selected="true"] { background: #f1f5f5; }
body.cl-cro .cl-sugg__o--p img, body.cl-cro .cl-sugg__ph { flex: none; width: 56px; height: 56px; object-fit: contain; background: #fff; border: 1px solid #eee; }
body.cl-cro .cl-sugg__n { display: block; }
body.cl-cro .cl-sugg__b { display: block; font-size: .75rem; color: #5b6b6d; }
body.cl-cro .cl-sugg mark { background: none; color: inherit; font-weight: 700; }
body.cl-cro .cl-sugg__none { margin: .5rem .875rem; font-size: .875rem; color: #5b6b6d; }
body.cl-cro .cl-sugg__all { display: block; margin: .375rem .5rem 0; padding: .625rem .375rem; border-top: 1px solid #eee; color: var(--cl-teal); font-weight: 700; font-size: .875rem; text-decoration: underline; text-underline-offset: 3px; }
body.cl-cro .cl-sugg__all[aria-selected="true"] { background: #f1f5f5; }

/* ---------- mobile menu: department tiles ---------- */
body.cl-cro .cl-cro-mt { padding: .75rem 1.25rem .25rem; }
body.cl-cro .cl-cro-mt__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem .5rem; list-style: none; margin: 0 0 1rem; padding: 0; }
body.cl-cro .cl-cro-mt__tile { display: flex; flex-direction: column; align-items: center; gap: .375rem; text-decoration: none; color: var(--cl-teal); }
body.cl-cro .cl-cro-mt__tile img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; background: #f3f3f3; }
body.cl-cro .cl-cro-mt__tile span { font-weight: 700; font-size: .75rem; line-height: 1.2; text-align: center; }
body.cl-cro .cl-cro-mt__h { margin: .25rem 0 .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #5b6b6d; }
body.cl-cro .cl-cro-mt .cl-cro-chips { margin-bottom: 1rem; }
body.cl-cro .cl-cro-mt + .cl-mm__list { border-top: 0; }
body.cl-cro .cl-cro-mt .cl-cro-chip { min-height: 38px; font-size: .8125rem; }

/* ---------- category / search results ---------- */
@media (max-width: 767px) {
  body.cl-cro.catalog-category-view .page-title { font-size: 1.75rem; margin-bottom: .5rem; }
  /* clamped by CSS from first paint (no layout shift); the JS only adds the absolutely positioned toggle */
  body.cl-cro.catalog-category-view .category-description { position: relative; }
  body.cl-cro.catalog-category-view .category-description:not(.is-open) .cl-cat-intro { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  body.cl-cro.catalog-category-view .category-description [data-element="inner"] { margin-bottom: 0 !important; padding: 0 !important; }
  body.cl-cro.catalog-category-view .category-description.cl-cro-clamp:not(.is-open) { padding-bottom: 0; }
  body.cl-cro .category-description .cl-cat-intro { font-size: .9375rem; margin-bottom: .25rem; }
}
body.cl-cro .cl-cro-more { display: none; }
@media (max-width: 767px) {
  body.cl-cro .cl-cro-more { display: block; position: absolute; right: 0; bottom: .25rem; padding: 0 .25rem 0 2.5rem; min-height: 1.6em; background: linear-gradient(90deg, rgba(255,255,255,0), #fff 2.25rem); border: 0; color: var(--cl-teal); font-weight: 700; font-size: .875rem; line-height: 1.6; text-decoration: underline; text-underline-offset: 3px; }
  body.cl-cro .category-description.is-open .cl-cro-more { position: static; margin: 0 0 .5rem auto; background: none; padding-left: .25rem; }
}
body.cl-cro .cl-cro-subcats { margin: .25rem 0 .75rem; }
@media (max-width: 767px) { body.cl-cro .cl-cro-subcats { margin-inline: -.75rem; padding-inline: .75rem; } }

/* result count + sort on one line, filter chips below, then the grid */
body.cl-cro #product-list { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1rem; }
body.cl-cro #product-list > * { flex: 0 0 100%; min-width: 0; }
body.cl-cro #product-list > .el-plp-meta { order: 1; flex: 1 1 auto; margin: 0; }
body.cl-cro #product-list > .toolbar-products { order: 2; flex: 0 0 auto; display: flex; margin: 0; }
body.cl-cro #product-list > .rk-colours { order: 3; }
body.cl-cro #product-list > .dn-quick { order: 4; }
body.cl-cro #product-list > .products.wrapper { order: 5; }
body.cl-cro #product-list > .products.wrapper ~ .toolbar-products { order: 6; flex: 0 0 100%; display: block; }
body.cl-cro #product-list .toolbar-products .modes { display: none; }
body.cl-cro .cl-cro-sort__l { display: inline-flex; align-items: center; gap: .5rem; margin: 0; }
body.cl-cro .cl-cro-sort__t { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #333; }
body.cl-cro .cl-cro-sort select { min-height: 40px; padding: 0 2rem 0 .75rem; font-size: .875rem; border: 1px solid #cfcfcf; background-color: #fff; }
body.cl-cro .el-plp-count { margin: 0; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: #333; }
body.cl-cro .dn-quick { justify-content: flex-start; }
@media (max-width: 767px) {
  /* sticky filter row: edge to edge, solid, right under the sticky header (cro P0 fix 03-10) */
  html body#html-body.cl-cro #product-list > .dn-quick {
    position: sticky; top: calc(var(--cl-head-h, 146px) - var(--cl-top-h, 33px) - 1px); z-index: 35;
    flex: 0 0 auto; width: 100vw; max-width: none; box-sizing: border-box;
    margin: .5rem 0 .75rem calc(50% - 50vw);
    padding: .5rem 0 .5rem 1rem; gap: .5rem;
    display: flex; flex-wrap: nowrap; align-items: center;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    background: #fff; border-bottom: 1px solid #e3e3e3; box-shadow: 0 6px 10px -8px rgba(0,0,0,.18);
  }
  html body#html-body.cl-cro #product-list > .dn-quick::-webkit-scrollbar { display: none; }
  html body#html-body.cl-cro #product-list > .dn-quick > * { flex: none; }
  /* scroll cue: a fade that sticks to the right edge, and sits in the trailing space once fully scrolled (never covers the last chip) */
  html body#html-body.cl-cro #product-list > .dn-quick::after {
    content: ""; flex: none; align-self: stretch; width: 2.25rem; margin-left: -.5rem;
    position: sticky; right: 0; pointer-events: none;
    background: linear-gradient(to right, rgba(255,255,255,0), #fff 70%);
  }
  html body#html-body.cl-cro .dn-quick__btn { height: 2.5rem; white-space: nowrap; }
  html body#html-body.cl-cro .dn-quick__label { white-space: nowrap; }
}

/* PLP add to basket: compact, one line, 44px+ */
html body#html-body.cl-cro .el-plp-atc {
  min-height: 44px; height: auto; padding: .5rem .625rem; gap: .375rem;
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  white-space: nowrap; font-size: .8125rem; line-height: 1.1; letter-spacing: .06em;
}
html body#html-body.cl-cro .el-plp-atc svg { flex: none; width: 16px; height: 16px; }
@media (max-width: 400px) {
  html body#html-body.cl-cro .el-plp-atc { font-size: .75rem; letter-spacing: .04em; padding-inline: .5rem; }
}
@media (max-width: 370px) { html body#html-body.cl-cro .el-plp-atc svg { display: none; } }

/* ---------- PDP: delivery under the price ---------- */
body.cl-cro .rk-buy .cl-dispatch { display: none; } /* shown under the price instead (cro/pdp-pricenote) */
body.cl-cro .cl-cro-dl { margin: .75rem 0 1.25rem; padding: .75rem .875rem .625rem; border: 1px solid #dfe7e4; border-radius: 6px; background: #f5f9f7; }
body.cl-cro .cl-cro-dl__line { display: flex; align-items: flex-start; gap: .5rem; margin: 0 0 .375rem; font-size: .9375rem; line-height: 1.35; color: #1f2d2f; }
body.cl-cro .cl-cro-dl__line svg { flex: none; margin-top: -1px; color: var(--cl-green-dark, #075c32); }
body.cl-cro .cl-cro-dl__line--free strong { color: var(--cl-green-dark, #075c32); }
body.cl-cro .cl-cro-dl__more { margin: .125rem 0 0 1.75rem; font-size: .8125rem; color: #3b4a4c; }
body.cl-cro .cl-cro-dl__more summary { display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; list-style: none; color: var(--cl-teal); text-decoration: underline; text-underline-offset: 3px; }
body.cl-cro .cl-cro-dl__more summary::-webkit-details-marker { display: none; }
body.cl-cro .cl-cro-dl__more ul { margin: .25rem 0 .5rem; padding-left: 1rem; list-style: disc; line-height: 1.45; }
body.cl-cro .cl-cro-dl__more a { color: var(--cl-teal); text-decoration: underline; }

/* ---------- PDP: trust under Add to basket ---------- */
body.cl-cro .cl-cro-trust { list-style: none; margin: 1.25rem 0 0; padding: 0; border-top: 1px solid #e6e6e6; }
body.cl-cro .cl-cro-trust li { display: flex; align-items: flex-start; gap: .625rem; padding: .7rem 0; border-bottom: 1px solid #eee; font-size: .875rem; line-height: 1.4; color: #2b2b2b; }
body.cl-cro .cl-cro-trust li > svg { flex: none; color: var(--cl-teal); }
body.cl-cro .cl-cro-trust a { color: inherit; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
body.cl-cro .cl-cro-trust small { color: #5b6b6d; font-size: .75rem; }
body.cl-cro .cl-cro-pay { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
body.cl-cro .cl-cro-pay img { width: auto; height: 22px; border: 1px solid #ddd; border-radius: 3px; background: #fff; }
body.cl-cro .cl-cro-pay__t { display: inline-flex; align-items: center; height: 22px; padding: 0 .4rem; border: 1px solid #ddd; border-radius: 3px; background: #fff; color: #222; font-size: .6875rem; font-weight: 700; letter-spacing: .01em; }

/* ---------- PDP: gallery. Cuckooland photos are square packshots: square frame, never cropped; thumbnails on all sizes;
   desktop = one large image + arrows + thumbnail strip (was a stacked 2-up grid of 4:5 crops that cut the sides off). */
body.cl-cro .kbg__track { aspect-ratio: 1 / 1; }
body.cl-cro .kbg__open img, body.cl-cro .kbg__open--cover img { object-fit: contain; object-position: 50% 50%; }
body.cl-cro .kbg__thumb img { object-fit: contain; background: #fff; }
body.cl-cro .kbg__thumb { width: 4rem; height: 4rem; border-radius: 3px; }
body.cl-cro .kbg__thumb[aria-current="true"] { border-color: var(--cl-teal); box-shadow: inset 0 0 0 1px var(--cl-teal), 0 0 0 1px var(--cl-teal); }
@media (min-width: 1024px) {
  body.cl-cro .kbg__track { display: flex; gap: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; aspect-ratio: 1 / 1; background: #fff; border: 1px solid #eee; }
  body.cl-cro .kbg__slide, body.cl-cro .kbg__slide:first-child, body.cl-cro .kbg__slide:only-child { flex: 0 0 100%; aspect-ratio: auto; grid-column: auto; }
  body.cl-cro .kbg__rail { display: block !important; }
  body.cl-cro .kbg__count { display: block !important; }
  body.cl-cro .kbg__nav { display: flex !important; position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; margin-top: -22px; align-items: center; justify-content: center; border: 1px solid #ddd; border-radius: 50%; background: rgba(255,255,255,.95); color: var(--cl-teal); cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
  body.cl-cro .kbg__nav--prev { left: .75rem; } body.cl-cro .kbg__nav--next { right: .75rem; }
  body.cl-cro .kbg__nav:disabled { opacity: .35; cursor: default; }
  body.cl-cro .kbg__thumbs { flex-wrap: wrap; overflow: visible; padding: .75rem 0 0; }
  body.cl-cro .kbg__thumb { width: 4.75rem; height: 4.75rem; }
}

/* mobile PDP + category: one "‹ parent" crumb instead of three wrapped lines */
@media (max-width: 767px) {
  body.cl-cro nav.breadcrumbs ol.items { padding-top: .5rem; padding-bottom: .5rem; }
  body.cl-cro nav.breadcrumbs li.item { display: none; }
  body.cl-cro nav.breadcrumbs li.item:nth-last-child(2) { display: flex; }
  body.cl-cro nav.breadcrumbs li.item:nth-last-child(2) .separator { display: none; }
  body.cl-cro nav.breadcrumbs li.item:nth-last-child(2) a { font-size: .875rem; }
  body.cl-cro nav.breadcrumbs li.item:nth-last-child(2) a::before { content: "\2039"; margin-right: .4rem; font-size: 1.25em; line-height: 1; }
}

/* sticky add to basket (mobile): price + button, brand green */
@media (max-width: 639px) {
  body.cl-cro .rk-sticky__inner { gap: .75rem; padding-top: .5rem; }
  body.cl-cro .rk-sticky__price { font-size: 1.125rem; }
  body.cl-cro .rk-sticky__btn { min-height: 48px; }
}

/* ---------- bag drawer + bag page: brand green primary CTA (beats rk-bag.css #2a2a2a) ---------- */
html body#html-body.cl-cro .rkd-btn--primary, html body#html-body.cl-cro .dn-drawer__btn--primary,
html body#html-body.cl-cro.checkout-cart-index .rkb-summary #checkout-link-button, html body#html-body.cl-cro .rkb-sticky__btn { background: var(--cl-green) !important; border-color: var(--cl-green) !important; color: #fff !important; }
html body#html-body.cl-cro .rkd-btn--primary:hover, html body#html-body.cl-cro .dn-drawer__btn--primary:hover,
html body#html-body.cl-cro.checkout-cart-index .rkb-summary #checkout-link-button:hover, html body#html-body.cl-cro .rkb-sticky__btn:hover { background: var(--cl-green-dark) !important; border-color: var(--cl-green-dark) !important; }

/* ---------- home: value proposition + categories sooner on mobile ---------- */
@media (max-width: 767px) {
  body.cl-cro .cl-banner--hero img { aspect-ratio: 1 / 1; }
  body.cl-cro .cl-banner:not(.cl-banner--hero) img { aspect-ratio: 4 / 3; }
  body.cl-cro .cl-usp { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; margin-bottom: 1rem; }
  body.cl-cro .cl-usp li { flex-direction: column; gap: .3rem; min-height: 0; padding: .25rem 0; text-align: center; font-size: .75rem; line-height: 1.25; }
  body.cl-cro .cl-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
  body.cl-cro .cl-tile { background: none; border-radius: 0; }
  body.cl-cro .cl-tile img { border-radius: 50%; }
  body.cl-cro .cl-tile__label { position: static !important; display: block; padding: .375rem 0 0 !important; background: none !important; color: var(--cl-teal) !important; font-size: .75rem !important; line-height: 1.2; text-align: center; }
  body.cl-cro .cl-tile__arrow { display: none !important; }
}

/* PLP / search / slider card CTAs: ONE style for Choose options, Add to basket and out-of-stock View details (cro r13, Ashley 01:19 "2 button colours does not look good") */
html body#html-body.cl-cro .product-item .el-plp-actions .cl-card-cta,
html body#html-body.cl-cro .product-item .el-plp-actions .cl-card-cta:visited {
  display: inline-flex !important; align-items: center; justify-content: center; gap: .375rem; width: 100%;
  height: 44px !important; min-height: 44px; margin: 0; padding: 0 .625rem !important; box-sizing: border-box;
  border: 1px solid var(--cl-green, #0b7a43) !important; border-radius: 3px !important;
  background: var(--cl-green, #0b7a43) !important; color: #fff !important; box-shadow: none !important;
  font-family: inherit; font-size: .8125rem !important; font-weight: 700 !important; line-height: 1.1 !important;
  letter-spacing: .06em !important; text-transform: uppercase; white-space: nowrap; text-decoration: none !important;
}
html body#html-body.cl-cro .product-item .el-plp-actions .cl-card-cta svg { flex: none; width: 16px; height: 16px; color: currentColor; }
html body#html-body.cl-cro .product-item .el-plp-actions .cl-card-cta span { overflow: hidden; text-overflow: ellipsis; }
html body#html-body.cl-cro .product-item .el-plp-actions .cl-card-cta:hover,
html body#html-body.cl-cro .product-item .el-plp-actions .cl-card-cta:focus-visible { background: var(--cl-green-dark, #08623a) !important; border-color: var(--cl-green-dark, #08623a) !important; color: #fff !important; }
html body#html-body.cl-cro .product-item .el-plp-actions .cl-card-cta:focus-visible { outline: 2px solid var(--cl-teal, #1f4e4f); outline-offset: 2px; }
@media (max-width: 400px) { html body#html-body.cl-cro .product-item .el-plp-actions .cl-card-cta { font-size: .75rem !important; letter-spacing: .04em !important; padding-inline: .5rem !important; } }
@media (max-width: 370px) { html body#html-body.cl-cro .product-item .el-plp-actions .cl-card-cta svg { display: none; } }
/* card bottoms line up across a row: card fills its grid cell, text column grows, CTA pinned to the bottom */
html body#html-body.cl-cro .product-item.card { height: 100%; display: flex; flex-direction: column; }
html body#html-body.cl-cro .product-item .el-card-text { flex: 1 1 auto; }
html body#html-body.cl-cro .product-item .el-plp-actions { margin-top: auto !important; }
html body#html-body.cl-cro .product-item .cl-oos { display: inline-block; align-self: flex-start; margin: .375rem 0 0; padding: .125rem .5rem; border-radius: 3px; background: #f1f1f1; color: #3d3d3d; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* bag CTAs in brand green: beats rk-bag.css, which loads after this file (cro 03-10) */
html body#html-body.rk-site.cl-cro .rkd-btn--primary,
html body#html-body.rk-site.cl-cro #cart-drawer .dn-drawer__btn--primary.rkd-btn,
html body#html-body.rk-site.cl-cro.checkout-cart-index .rkb-summary #checkout-link-button { background: var(--cl-green) !important; border-color: var(--cl-green) !important; color: #fff !important; font-weight: 700 !important; border-radius: 3px !important; }
html body#html-body.rk-site.cl-cro .rkd-btn--primary:hover,
html body#html-body.rk-site.cl-cro #cart-drawer .dn-drawer__btn--primary.rkd-btn:hover,
html body#html-body.rk-site.cl-cro.checkout-cart-index .rkb-summary #checkout-link-button:hover { background: var(--cl-green-dark) !important; border-color: var(--cl-green-dark) !important; }

/* mobile: the promo/sign-in strip scrolls away, logo + bag + search stay (saves 33px of a 844px screen) (cro 03-10) */
@media (max-width: 767px) {
  html body#html-body.rk-site.cl-cro .page-header { top: calc(-1 * var(--cl-top-h, 33px)); }
}

/* ---------- PDP image swatches: each option = its own variant photo + name (cro 03-10) ---------- */
html body#html-body.cl-cro .dn-opt.cl-sw-group .dn-opt__list { align-items: start; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); gap: .75rem .625rem; }
@media (min-width: 1024px) { html body#html-body.cl-cro .dn-opt.cl-sw-group .dn-opt__list { grid-template-columns: repeat(auto-fill, minmax(6rem, 6.5rem)); } }
html body#html-body.cl-cro .dn-opt.cl-sw-group .dn-pill.cl-sw { height: auto !important; max-height: none !important; overflow: visible !important;
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: .375rem; min-height: 44px; min-width: 0;
  padding: 0; border: 0 !important; border-radius: 0; background: none !important; color: #1f2d2f !important; box-shadow: none !important;
  cursor: pointer; text-align: center; grid-template-areas: none;
}
html body#html-body.cl-cro .dn-opt.cl-sw-group .dn-pill.cl-sw::before { content: none; display: none; }
html body#html-body.cl-cro .cl-sw__img { width: 100%; height: auto; flex: none;
  display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; background: #fff;
  border: 1px solid #d6dcdc; transition: border-color .15s, box-shadow .15s;
}
html body#html-body.cl-cro .cl-sw__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
html body#html-body.cl-cro .cl-sw__img--none { background: #f5f7f7; }
html body#html-body.cl-cro .cl-sw__img--none .dn-chip__dot { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--dn-chip); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
html body#html-body.cl-cro .dn-pill.cl-sw .dn-pill__label { display: block; font-size: .8125rem; font-weight: 400; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; text-decoration: none; }
html body#html-body.cl-cro .dn-pill.cl-sw .dn-pill__price { display: block; margin-top: -.125rem; font-size: .75rem; color: #4a5658; }
html body#html-body.cl-cro .dn-pill.cl-sw:hover .cl-sw__img { border-color: var(--cl-teal); }
html body#html-body.cl-cro .dn-pill.cl-sw.is-selected .cl-sw__img { border-color: var(--cl-teal); box-shadow: 0 0 0 2px var(--cl-teal); }
html body#html-body.cl-cro .dn-pill.cl-sw.is-selected .dn-pill__label { font-weight: 700; }
html body#html-body.cl-cro .dn-pill.cl-sw:has(.dn-opt__input:focus-visible) { outline: none; }
html body#html-body.cl-cro .dn-pill.cl-sw:has(.dn-opt__input:focus-visible) .cl-sw__img { outline: 2px solid var(--cl-teal); outline-offset: 3px; }
html body#html-body.cl-cro .dn-pill.cl-sw.is-disabled { cursor: not-allowed; color: #7a8384 !important; }
html body#html-body.cl-cro .dn-pill.cl-sw.is-disabled .cl-sw__img { border-style: dashed; }
html body#html-body.cl-cro .dn-pill.cl-sw.is-disabled .cl-sw__img img { opacity: .45; filter: grayscale(1); }
html body#html-body.cl-cro .dn-pill.cl-sw.is-disabled .dn-pill__label { text-decoration: line-through; }
html body#html-body.cl-cro .dn-pill.cl-sw .dn-opt__soldout { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6b7374; }
html body#html-body.cl-cro .dn-opt.has-error .dn-pill.cl-sw:not(.is-disabled) .cl-sw__img { border-color: #b3261e; }

/* ---------- brand logos: tidy uniform grids (cro 03-10) ---------- */
/* all-brands index: one grid, 3 cols mobile, 4 tablet, 6 desktop */
html body#html-body.cl-cro .cl-bi-grid.cl-bi-grid--all { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .625rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { html body#html-body.cl-cro .cl-bi-grid.cl-bi-grid--all { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .875rem; } }
@media (min-width: 1024px) { html body#html-body.cl-cro .cl-bi-grid.cl-bi-grid--all { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
html body#html-body.cl-cro .cl-bi-first { scroll-margin-top: calc(var(--cl-head-h, 146px) + 1rem); }
html body#html-body.cl-cro .cl-bi-card { display: flex; flex-direction: column; align-items: stretch; gap: .375rem; height: 100%; padding: .5rem .5rem .625rem; border: 1px solid #e3e8e8; border-radius: 6px; background: #fff; color: #1f2d2f; text-align: center; text-decoration: none; }
html body#html-body.cl-cro .cl-bi-card:hover, html body#html-body.cl-cro .cl-bi-card:focus-visible { border-color: var(--cl-teal); }
html body#html-body.cl-cro .cl-bi-logo { display: flex; align-items: center; justify-content: center; height: 5.5rem; padding: .375rem; overflow: hidden; }
@media (min-width: 1024px) { html body#html-body.cl-cro .cl-bi-logo { height: 6.25rem; } }
html body#html-body.cl-cro .cl-bi-logo img { width: auto; height: auto; max-width: 100%; max-height: 100%; min-width: 0; object-fit: contain; }
html body#html-body.cl-cro .cl-bi-initial { font-size: 1.75rem; color: #9aa5a6; }
html body#html-body.cl-cro .cl-bi-card strong { font-size: .8125rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
html body#html-body.cl-cro .cl-bi-card .cl-brand-origin { font-size: .75rem; color: #5b6668; }
html body#html-body.cl-cro .cl-bi-letters { position: static; flex-wrap: wrap; margin: 0 0 1rem; padding: 0; } /* was sticky on mobile: covered the first row of brand tiles */
html body#html-body.cl-cro .cl-bi-letters .cl-chip { flex: none; min-width: 2.75rem; min-height: 2.75rem; display: inline-grid; place-items: center; padding: 0 .5rem; }
@media (min-width: 768px) { html body#html-body.cl-cro .cl-bi-letters { position: static; flex-wrap: wrap; } }
/* brand-logo strips inside Cuckooland copy (cro/logo-grid.phtml) */
html body#html-body.cl-cro .cl-logo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .625rem; list-style: none; margin: 1.25rem 0; padding: 0; }
@media (min-width: 768px) { html body#html-body.cl-cro .cl-logo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { html body#html-body.cl-cro .cl-logo-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .875rem; } }
html body#html-body.cl-cro .cl-logo-grid li { margin: 0; padding: 0; list-style: none; }
html body#html-body.cl-cro .cl-logo-grid li::before { content: none; }
html body#html-body.cl-cro .cl-logo-card { display: flex; flex-direction: column; gap: .375rem; height: 100%; padding: .5rem .5rem .625rem; border: 1px solid #e3e8e8; border-radius: 6px; background: #fff; color: #1f2d2f !important; text-align: center; text-decoration: none !important; }
html body#html-body.cl-cro .cl-logo-card:hover, html body#html-body.cl-cro .cl-logo-card:focus-visible { border-color: var(--cl-teal); }
html body#html-body.cl-cro .cl-logo-card__img { display: flex; align-items: center; justify-content: center; height: 5.5rem; padding: .375rem; overflow: hidden; }
@media (min-width: 1024px) { html body#html-body.cl-cro .cl-logo-card__img { height: 6.25rem; } }
html body#html-body.cl-cro .cl-logo-card__img img { width: auto; height: auto; max-width: 100%; max-height: 100%; min-width: 0; margin: 0; object-fit: contain; }
html body#html-body.cl-cro .cl-logo-card__name { font-size: .8125rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
/* brand page header logo: small */
html body#html-body.cl-cro .cl-brand-logo { padding: .5rem .75rem; }
html body#html-body.cl-cro .cl-brand-logo img { width: auto; height: auto; max-height: 5rem; max-width: min(11rem, 45vw); object-fit: contain; }
@media (min-width: 1024px) { html body#html-body.cl-cro .cl-brand-logo img { max-height: 7.5rem; max-width: 14rem; } }
/* any other stray content images stay inside the column */
html body#html-body.cl-cro .cl-cat-seo img { max-width: 100%; height: auto; }

/* ---- cro r16: PLP card variants v2 (Ashley 01:56 "messy"): one row of 20px colour dots (variant photo or colour) max 5 + "+N",
   sizes as ONE short text line, fixed-height slots so names / prices / finance / variants / CTAs line up across a row ---- */
html body#html-body.cl-cro .product-item .el-plp-title { line-height: 1.35 !important; min-height: 2.7em; }
html body#html-body.cl-cro .product-item .el-plp-title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html body#html-body.cl-cro .product-item .el-card-price { min-height: 2.75rem; } /* r17: finance line is one line now ("Pay monthly available") */
html body#html-body.cl-cro .product-item .flair-v12-list { font-size: .75rem !important; line-height: 1.3 !important; font-weight: 600 !important; }
html body#html-body.cl-cro .product-item .cl-var { height: 24px; margin: .375rem 0 0; padding: 0; overflow: hidden; }
html body#html-body.cl-cro .product-item .cl-var__sw { display: flex; align-items: center; gap: 2px; height: 24px; margin-left: -2px; }
html body#html-body.cl-cro .product-item .cl-var__dot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
html body#html-body.cl-cro .product-item .cl-var__ph { display: block; width: 20px; height: 20px; border-radius: 50%; overflow: hidden; background: #f4efe8; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
html body#html-body.cl-cro .product-item .cl-var__dot.is-light .cl-var__ph { box-shadow: inset 0 0 0 1px #b9b4ad; }
html body#html-body.cl-cro .product-item .cl-var__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.75); }
html body#html-body.cl-cro .product-item .cl-var__dot:hover .cl-var__ph { box-shadow: 0 0 0 1px #fff, 0 0 0 2px #8a8a8a; }
html body#html-body.cl-cro .product-item .cl-var__dot[aria-pressed="true"] .cl-var__ph { box-shadow: 0 0 0 1px #fff, 0 0 0 2px #1f4e4f; }
html body#html-body.cl-cro .product-item .cl-var__dot:focus-visible { outline: 2px solid #1f4e4f; outline-offset: 0; }
html body#html-body.cl-cro .product-item .cl-var__more { flex: none; margin-left: 2px; font-size: .75rem; font-weight: 600; line-height: 24px; color: #4a4a4a; text-decoration: none; }
html body#html-body.cl-cro .product-item .cl-var__more:hover { color: #1f4e4f; text-decoration: underline; }
html body#html-body.cl-cro .product-item .cl-var__line { margin: 0; font-size: .75rem; line-height: 24px; color: #5c5c5c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body#html-body.cl-cro .product-item .cl-var__line s { color: #767676; text-decoration-color: #767676; }
html body#html-body.cl-cro .product-item .cl-var__plus { color: #4a4a4a; font-weight: 600; }
/* the hover photo must not cover a colour the shopper picked */
html body#html-body.cl-cro .product-item.cl-var-on .dn-card__alt { display: none; }