/* r0200 (release 02:00 BST Sun 4 Oct 2026) PLP card v2 + toolbar spacing. Cards opt in with .cl-c2 (config cuckooland/plp/card_v2 at websites/3).
   Research summary: release-0200/RELEASE-NOTES.md#plp. Uniform 1:1 tile on a neutral ground (white packshot frames blend away via multiply),
   brand small + sentence case, name clamped to 2 lines, bold price, was/now only on genuine simple-product special prices, delivery line
   from the lead-time attribute pinned above a quieter outline CTA, swatch/size slot under the photo so it lines up across a row. */
html body#html-body .product-item.cl-c2 { position: relative; }
/* photo */
html body#html-body .product-item.cl-c2 .el-plp-photo { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1 !important; margin: 0 0 .5rem !important; overflow: hidden; border-radius: 6px; background: #f3f1ed !important; }
html body#html-body .products .product-item.cl-c2 .el-plp-photo img.product-image-photo,
html body#html-body .product-item.cl-c2 .el-plp-photo img.product-image-photo { width: 100% !important; height: 100% !important; object-fit: contain !important; mix-blend-mode: multiply !important; background: transparent !important; padding: 5%; box-sizing: border-box; transition: transform .35s ease; }
html body#html-body .product-item.cl-c2 .dn-card__alt { background: #f3f1ed; object-fit: cover; }
@media (hover: hover) and (pointer: fine) { html body#html-body .product-item.cl-c2:hover .el-plp-photo img.product-image-photo { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { html body#html-body .product-item.cl-c2 .el-plp-photo img.product-image-photo { transition: none; } }
/* badges (real data only: Sale = genuine special price, New in = merchant's New In category) */
html body#html-body .product-item.cl-c2 .el-plp-photo > span.cl-c2-badges { width: auto !important; height: auto !important; }
html body#html-body .cl-c2-badges { align-items: flex-start; position: absolute; top: .5rem; left: .5rem; z-index: 2; display: flex; flex-wrap: wrap; gap: .25rem; pointer-events: none; }
html body#html-body .cl-c2-badge { display: inline-block; padding: .1875rem .4375rem; border-radius: 3px; background: #fff; color: #1f4e4f; font-size: .6875rem; font-weight: 700; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
html body#html-body .cl-c2-badge--sale { background: #b3261e; color: #fff; box-shadow: none; }
/* text column: fixed slots so rows line up (swatches first, right under the photo) */
html body#html-body .product-item.cl-c2 .el-card-text { display: flex; flex-direction: column; text-align: left; }
html body#html-body.cl-cro .product-item.cl-c2 .cl-var { order: 0; height: 24px; margin: 0 0 .375rem; }
html body#html-body .product-item.cl-c2 .el-card-brand { order: 1; height: 1.125rem; margin: 0 0 .125rem !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .75rem !important; line-height: 1.125rem; letter-spacing: 0 !important; text-transform: none !important; color: #5f5f5f !important; }
html body#html-body .product-item.cl-c2 .el-plp-title { order: 2; height: 2.7em; min-height: 2.7em; margin: 0 !important; font-size: .9375rem !important; line-height: 1.35 !important; }
html body#html-body .product-item.cl-c2 .el-plp-title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #1a1a1a !important; text-decoration: none; }
/* whole card tappable: the title link is stretched over the card; swatches, CTA and heart sit above it */
html body#html-body .product-item.cl-c2 .el-plp-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
html body#html-body .product-item.cl-c2 .el-plp-title a:focus-visible { outline: none; }
html body#html-body .product-item.cl-c2:has(.el-plp-title a:focus-visible) { outline: 2px solid #1f4e4f; outline-offset: 2px; border-radius: 6px; }
html body#html-body .product-item.cl-c2 .cl-var, html body#html-body .product-item.cl-c2 .el-plp-actions .cl-card-cta, html body#html-body .product-item.cl-c2 .el-plp-actions .dn-qa, html body#html-body .product-item.cl-c2 .el-plp-photo { position: relative; z-index: 2; }
html body#html-body .product-item.cl-c2 .el-plp-actions { position: static !important; }
html body#html-body .product-item.cl-c2 .el-plp-photo { z-index: 2; }
/* price */
html body#html-body.cl-cro .product-item.cl-c2 .el-card-price { order: 3; min-height: 2.5rem; padding-top: .25rem !important; }
html body#html-body .product-item.cl-c2 .el-card-price .price-box { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .375rem; row-gap: 0; }
html body#html-body .product-item.cl-c2 .el-card-price .price { font-size: 1.0625rem !important; font-weight: 700 !important; color: #111 !important; letter-spacing: -.005em; }
html body#html-body .product-item.cl-c2 .el-card-price .price-label { font-size: .8125rem !important; font-weight: 400 !important; color: #5f5f5f !important; }
html body#html-body .product-item.cl-c2 .el-card-price .special-price .price-label, html body#html-body .product-item.cl-c2 .el-card-price .old-price .price-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html body#html-body .product-item.cl-c2 .el-card-price .special-price .price { color: #b3261e !important; }
html body#html-body .product-item.cl-c2.cl-c2--was .el-card-price .old-price:not(.no-display) { display: inline !important; }
html body#html-body .product-item.cl-c2.cl-c2--was .el-card-price .old-price:not(.no-display) .price { display: inline !important; font-size: .8125rem !important; font-weight: 400 !important; color: #5f5f5f !important; text-decoration: line-through; }
html body#html-body .product-item.cl-c2.cl-c2--was .el-card-price .old-price:not(.no-display) .price-wrapper::before { content: "Was "; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html body#html-body .product-item.cl-c2 .cl-c2-save { font-size: .75rem; font-weight: 700; color: #b3261e; white-space: nowrap; }
html body#html-body .product-item.cl-c2 .flair-v12-list { font-size: .75rem !important; font-weight: 600 !important; }
/* delivery line pinned above the CTA (same height on every card, empty when there is no reliable lead time) */
html body#html-body .product-item.cl-c2 .cl-c2-dl { order: 5; display: flex; align-items: center; gap: .3125rem; height: 1.25rem; margin: auto 0 0; padding-top: .25rem; overflow: hidden; white-space: nowrap; font-size: .75rem; line-height: 1.25rem; color: #4a4a4a; box-sizing: content-box; }
html body#html-body .product-item.cl-c2 .cl-c2-dl.is-nd { color: #0b6b3a; font-weight: 700; }
html body#html-body .product-item.cl-c2 .cl-c2-dl svg { flex: none; }
html body#html-body .product-item.cl-c2 .cl-c2-dl span { overflow: hidden; text-overflow: ellipsis; }
html body#html-body .product-item.cl-c2 .el-card-sold { order: 4; }
html body#html-body .product-item.cl-c2 .el-plp-actions { order: 6; margin-top: 0 !important; padding-top: .5rem !important; }
html body#html-body .product-item.cl-c2:not(:has(.cl-c2-dl)) .el-plp-actions { margin-top: auto !important; }
/* CTA: secondary outline button (still 44px, still the same actions) */
html body#html-body.cl-cro .product-item.cl-c2 .el-plp-actions .cl-card-cta { min-height: 2.75rem !important; height: auto !important; padding: .5rem .75rem !important; border: 1px solid #1f4e4f !important; border-radius: 4px !important; background: #fff !important; color: #1f4e4f !important; font-size: .875rem !important; font-weight: 700 !important; letter-spacing: .01em !important; text-transform: none !important; box-shadow: none !important; }
html body#html-body.cl-cro .product-item.cl-c2 .el-plp-actions .cl-card-cta svg { width: 16px; height: 16px; }
html body#html-body.cl-cro .product-item.cl-c2 .el-plp-actions .cl-card-cta:hover, html body#html-body.cl-cro .product-item.cl-c2 .el-plp-actions .cl-card-cta:focus-visible { background: #1f4e4f !important; color: #fff !important; }
html body#html-body.cl-cro .product-item.cl-c2 .el-plp-actions .cl-card-cta.cl-card-cta--oos { border-color: #d0d0d0 !important; background: #f5f5f5 !important; color: #4a4a4a !important; }
/* wishlist heart over the photo (renders only when wishlist is enabled) */
html body#html-body .product-item.cl-c2 .el-plp-actions__secondary:empty { display: none; }
html body#html-body .product-item.cl-c2 .el-plp-actions__secondary { position: absolute; top: .25rem; right: .25rem; z-index: 3; margin: 0; }
html body#html-body .product-item.cl-c2 .el-plp-actions__secondary button { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: #1f4e4f; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
html body#html-body .product-item.cl-c2 .el-plp-actions__secondary button svg { width: 20px; height: 20px; }
/* grid rhythm: 2 cols mobile, 3 at 768, 4 at 1024 */
html body#html-body .products-grid:has(.cl-c2) > ul, html body#html-body .products-grid:has(.cl-c2) .product-items { column-gap: .75rem; row-gap: 2rem; }
@media (min-width: 1024px) { html body#html-body .products-grid:has(.cl-c2) > ul, html body#html-body .products-grid:has(.cl-c2) .product-items { column-gap: 1.25rem; row-gap: 2.75rem; } }
@media (max-width: 380px) { html body#html-body .product-item.cl-c2 .el-plp-title { font-size: .875rem !important; } html body#html-body .product-item.cl-c2 .cl-c2-dl { font-size: .6875rem; } }