/*
 * Product card and product listings: collections, brands, all products, search, the list of collections.
 * Values are the live shop's (theme-spec/SPEC-1-shell.md 4.2, 4.5, 4.10, 5.x and SPEC-2 section 2), phone first.
 * Loaded on every page because the card is used on every page.
 */

/* ---------- page gutters of these pages: 20px on phones, 50px from 750px (live page padding) ---------- */
.cp-w11, .cp-about, .cp-listing, .cp-rc, .cp-clist, .cp-lfound { --cp-gutter: 20px; }
@media (min-width: 750px) {
	.cp-w11, .cp-about, .cp-listing, .cp-rc, .cp-clist, .cp-lfound { --cp-gutter: 50px; }
}

/* ---------- the product card ---------- */
.cp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.cp-card {
	position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
	background: #fff; border-radius: 20px; text-align: left; container-type: inline-size;
	box-shadow: 0 0 1px 1px rgba(0, 15, 30, .01), 0 6px 8px 0 rgba(0, 15, 30, .03), 0 2px 4px 0 rgba(0, 15, 30, .01);
}
.cp-card__top { position: relative; }
.cp-card__media { display: block; aspect-ratio: 100 / 78; padding: 0; }
.cp-card__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cp-card.is-out .cp-card__media img { opacity: 1; }
.cp-card__flags { position: absolute; top: 8px; left: 10px; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; pointer-events: none; }
.cp-card__flag { position: static; display: block; padding: 3px 8px; border-radius: 4px; background: #FFE9DB; color: #B43E05; font-size: 11px; font-weight: 700; line-height: 16px; white-space: nowrap; }
.cp-card__flag--out { background: linear-gradient(127deg, rgba(13, 13, 13, .8) 11%, rgba(49, 49, 49, .8) 78%); color: #fff; }
.cp-card__body { display: flex; flex-direction: column; gap: 0; min-width: 0; min-height: 99px; padding: 18px 20px 20px; overflow: hidden; }
.cp-card__title { margin: 0 0 4px; min-height: 2.8em; font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: -.009em; color: #2b333d; text-wrap: balance; }
.cp-card__title a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-height: 0; overflow: hidden; color: inherit; text-decoration: none; }
.cp-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.cp-card__title a:focus-visible { outline: none; }
.cp-card:has(.cp-card__title a:focus-visible) { box-shadow: inset 0 0 0 2px #003662; }
.cp-card__opts { min-width: 0; margin: 0 0 11px; }
.cp-card__title + .cp-card__price { margin-top: 2px; }
.cp-card__optname { display: none; font-size: 11.5px; line-height: 1.3; color: #2b333d; }
.cp-card__pills { display: flex; flex-wrap: nowrap; gap: 4px; overflow: hidden; list-style: none; margin: 0; padding: 0; }
.cp-card__pills li, .cp-card__pills li.is-chosen, .cp-card__pills li.is-out { flex: 0 0 auto; max-width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; text-decoration: none; }
.cp-card__pill {
	position: relative; z-index: 1; display: block; max-width: 100%; margin: 0; padding: 2px 6px; overflow: hidden;
	border: 1px solid rgba(0, 54, 98, .3); border-radius: 3px; background: #fff; color: #003662;
	font: inherit; font-size: 10.5px; font-weight: 400; line-height: 1.2; letter-spacing: 0; white-space: nowrap; text-overflow: ellipsis;
	font-feature-settings: "calt" 0; /* Inter would turn 2x12kg into 2×12kg */
}
button.cp-card__pill { cursor: pointer; }
button.cp-card__pill:hover { border-color: #003662; }
.cp-card__pill.is-chosen { border-color: #003662; background: #003662; color: #fff; font-weight: 500; }
/* On phones the live shop prints a price that is not reduced smaller than a reduced one (11.5px against 14px). */
.cp-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 0; font-size: 11.5px; line-height: 1.3; color: #16202b; }
.cp-card__price--sale { font-size: 14px; }
.cp-card__was { font-size: 11.5px; color: rgba(43, 51, 61, .75); }
.cp-card__was[hidden] { display: none; }
.cp-card__add {
	position: absolute; right: 8px; top: calc(78cqw - 40px); bottom: auto; z-index: 3;
	display: inline-flex; align-items: center; justify-content: center; gap: 5px;
	height: 34px; min-height: 34px; padding: 0 11px; border: 0; border-radius: 9px;
	background: var(--cp-action, #D9480F); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .005em; line-height: 1;
	text-decoration: none; cursor: pointer; box-shadow: 0 4px 12px rgba(22, 32, 43, .18);
}
.cp-card__add:hover { background: var(--cp-action-hover, #BF3F0C); }
.cp-card__add.is-off { opacity: .5; cursor: not-allowed; }
.cp-card__add.is-off:hover { background: var(--cp-action, #D9480F); }
.cp-card__add[aria-busy="true"] { opacity: .7; pointer-events: none; }
.cp-card__add svg { flex: none; width: 10px; height: 10px; }
@supports not (width: 1cqw) {
	.cp-card__add { position: relative; top: auto; right: auto; margin: 0 10px 10px; }
}
.cp-card--page .cp-card__body { justify-content: center; min-height: 120px; }
.cp-card--page .cp-card__title { min-height: 0; font-size: 14px; }

@media (min-width: 750px) {
	.cp-card { box-shadow: 0 0 1px 1px rgba(0, 15, 30, .01), 0 6px 8px 0 rgba(0, 15, 30, .03), 0 2px 4px 0 rgba(0, 15, 30, .01); }
	.cp-card__media { aspect-ratio: 100 / 75.19; }
	.cp-card__flags { top: 11px; left: 10px; }
	.cp-card__flag { padding: 7px 11px 6px; border-radius: 3px; font-size: 12px; font-weight: 400; line-height: 15px; }
	.cp-card__body { min-height: 0; padding: 20px 20px 18px; overflow: visible; }
	.cp-card__title { margin: 0 0 9px; min-height: 0; font-size: 14.5px; line-height: 1.4; }
	.cp-card__title + .cp-card__price { margin-top: 0; }
	.cp-card__opts { margin: 0 0 14px; }
	.cp-card__optname { display: block; margin: 0 0 2px; }
	.cp-card__pills { flex-wrap: wrap; gap: 5px; overflow: visible; }
	.cp-card__pill { padding: .2em .3em; font-size: 11.5px; line-height: 1.3; }
	.cp-card__price, .cp-card__price--sale { font-size: 14.5px; }
	/* In the four-across grid beside the filter column the live cards print their text a tenth smaller. */
	.cp-listing--cols:not(.cp-listing--search) .cp-card__title, .cp-listing--cols:not(.cp-listing--search) .cp-card__price { font-size: 13px; }
	.cp-card__was { font-size: 13px; }
	.cp-card__add {
		position: relative; top: auto; right: auto; display: flex; width: auto; height: 50px; min-height: 50px;
		margin: auto 23px 20px; padding: 0 16px; border-radius: 8px; font-size: 15px; box-shadow: none; gap: 8px;
	}
	.cp-card__add svg { width: 14px; height: 14px; }
}
@media (min-width: 990px) {
	.cp-card { box-shadow: 0 0 1px 1px rgba(0, 15, 30, .01), 0 2px 7px 0 rgba(0, 15, 30, .03), 0 1px 3px 0 rgba(0, 15, 30, .01); }
}
@media (min-width: 1100px) {
	.cp-card__title, .cp-card__price, .cp-card__price--sale { font-size: 15px; }
	.cp-listing--cols:not(.cp-listing--search) .cp-card__title, .cp-listing--cols:not(.cp-listing--search) .cp-card__price { font-size: 13.5px; }
}
@media (prefers-reduced-motion: no-preference) {
	.cp-card__pill { transition: border-color .12s, color .12s, background-color .12s; }
	.cp-card__add { transition: background-color .15s ease, opacity .15s ease; }
}

/* ---------- W11 (SITE-3, 27 Oct 2026): the head of every collection ----------
   mockups/website-2026-10-27/collection-puppy-food-phone.html and -desktop.html. The title shares the breadcrumb's
   left edge (both sit in .cp-wrap). Phone: title and count, the photo, the tiles, the brand chips, the kit line.
   From 990px: the title, its words and the kit line in a mist panel beside the photo (never over the animal), then
   the tiles and the brand row. One grid, so nothing is printed twice. */
.cp-w11 { background: #fff; }
/* The softer top (his "A" of 31 Oct 2026): one flat pale tint, navy words, white offer cards, the whole animal in the picture. Phone first. */
.cp-top { --tint: #d6ecfa; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border-radius: 18px; color: var(--cp-navy); background: var(--tint); }
.cp-top--lilac { --tint: #e9e4fb; }
.cp-top__txt { position: relative; z-index: 2; padding: 18px 18px 0; }
.cp-top__eye { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cp-top__eye svg { flex: none; width: 15px; height: 15px; color: var(--cp-action); }
.cp-top__h { margin: 6px 0 0; font-size: 30px; line-height: 1.08; font-weight: 700; letter-spacing: -.02em; color: var(--cp-navy); text-wrap: balance; }
.cp-top__sub { margin: 8px 0 0; font-size: 15px; line-height: 1.4; }
.cp-top__pic { position: relative; z-index: 1; height: 226px; overflow: hidden; }
.cp-top__pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transform: scale(1.14); transform-origin: 50% 70%; }
.cp-top--lilac .cp-top__pic img { object-position: 50% 50%; transform: none; }
.cp-top__offer { position: relative; z-index: 2; padding: 0 18px 16px; }
.cp-top__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cp-top__cards li { padding: 10px 12px; border-radius: 12px; background: #fff; }
.cp-top__cards b { display: block; font-size: 24px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; color: var(--cp-navy); }
.cp-top__cards i { margin-left: 4px; font-size: 13px; font-style: normal; font-weight: 600; letter-spacing: 0; }
.cp-top__cards span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.3; color: #2b333d; }
.cp-top__meta { margin: 11px 0 0; font-size: 12.5px; line-height: 1.45; }
.cp-top__meta + .cp-top__meta { margin-top: 5px; }
.cp-w11--soft .cp-w11-tile__img:not(.cp-w11-tile__img--photo) { background: #f3f5f8; }
.cp-w11__in { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "photo" "more" "offer"; padding-bottom: 2px; }
.cp-w11__panel { display: none; }
.cp-w11__title { grid-area: title; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 0 10px; }
.cp-w11__h1 { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -.015em; color: #16202b; text-wrap: balance; }
.cp-w11__n { flex: none; font-size: 13px; line-height: 1.3; color: #6b7280; }
.cp-w11__words { display: none; }
.cp-w11__words p { margin: 0; }
.cp-w11__words .cp-listing__see { margin-top: 8px; font-size: 14px; color: #6b7280; }
.cp-w11__words .cp-listing__see a { color: #003662; font-weight: 600; text-decoration: none; }
.cp-w11__words .cp-listing__see a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cp-w11__photo { grid-area: photo; height: 150px; overflow: hidden; border-radius: 16px; background: #f3e7d6; }
.cp-w11__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; }
.cp-w11__more { grid-area: more; min-width: 0; }
.cp-w11__offer { grid-area: offer; display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: #ffe9db; color: #7a2a03; font-size: 13.5px; line-height: 1.45; }
.cp-w11__offer a { color: inherit; text-decoration: none; }
.cp-w11__offer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cp-w11__offer b { color: #d9480f; font-weight: 700; }
.cp-w11__tag { flex: none; width: 20px; height: 20px; color: #d9480f; }

/* picture tiles: one row that swipes on a phone */
.cp-w11__subs { position: relative; display: flex; gap: 10px; margin: 0 calc(-1 * var(--cp-gutter)); padding: 14px var(--cp-gutter) 4px; overflow-x: auto; list-style: none; scrollbar-width: none; overscroll-behavior-x: contain; }
.cp-w11__subs::-webkit-scrollbar { display: none; }
.cp-w11__subs > li { flex: none; width: 76px; }
.cp-w11-tile { display: block; text-align: center; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.cp-w11-tile__img { display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 16px; }
.cp-w11-tile__img img { display: block; width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply; }
.cp-w11-tile__img--photo img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.cp-w11-tile__img--t0 { background: #e4effa; }
.cp-w11-tile__img--t1 { background: #fff3d6; }
.cp-w11-tile__img--t2 { background: #e6f4ec; }
.cp-w11-tile__img--t3 { background: #efe9fb; }
.cp-w11-tile__img--t4 { background: #fdeee3; }
.cp-w11-tile__img--photo { background: #f7f8fa; }
.cp-w11-tile__l { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; line-height: 1.2; color: #16202b; }
.cp-w11-tile__n { display: block; margin-top: 1px; font-size: 11.5px; line-height: 1.3; color: #6b7280; }
.cp-w11-tile__u { display: none; }
.cp-w11-tile.is-on .cp-w11-tile__img { box-shadow: inset 0 0 0 2px #003662; }
.cp-w11-tile:focus-visible { outline: none; }
.cp-w11-tile:focus-visible .cp-w11-tile__img { outline: 2px solid #003662; outline-offset: 2px; }

/* brand chips: a row that swipes on a phone, "Brands" and one row on a computer */
.cp-w11__brands { display: flex; align-items: center; gap: 10px; padding-top: 10px; }
.cp-w11__brands-l { display: none; }
.cp-w11__chips { position: relative; display: flex; flex: 1; min-width: 0; gap: 8px; margin: 0 calc(-1 * var(--cp-gutter)); padding: 0 var(--cp-gutter) 2px; overflow-x: auto; list-style: none; scrollbar-width: none; overscroll-behavior-x: contain; }
.cp-w11__chips::-webkit-scrollbar { display: none; }
.cp-w11__chips > li { flex: none; display: flex; }
.cp-w11-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid #e6e9ee; border-radius: 10px; background: #fff; color: #16202b; font-size: 13.5px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; }
.cp-w11-chip:hover { border-color: #003662; }
.cp-w11-chip:focus-visible { outline: 2px solid #003662; outline-offset: 2px; }
.cp-w11-chip small { font-size: .85em; font-weight: 400; color: #6b7280; }
.cp-w11-chip.is-on { border-color: #003662; background: #eaf1f8; }
.cp-w11-chip__logo { display: block; width: auto; height: 24px; max-width: 56px; object-fit: contain; }

@media (min-width: 990px) {
	.cp-top { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 404px; border-radius: 24px; }
	.cp-top__txt { grid-column: 1; grid-row: 1; align-self: start; padding: 44px 0 0 52px; }
	.cp-top__offer { grid-column: 1; grid-row: 2; align-self: end; padding: 26px 0 40px 52px; }
	.cp-top__pic { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; height: auto; }
	.cp-top__pic img { object-position: 50% 50%; transform: none; }
	.cp-top--lilac .cp-top__pic img { object-fit: contain; object-position: 50% 50%; } /* the leap and the biscuit stay whole; the picture's backdrop is this tint */
	.cp-top__eye { font-size: 13px; }
	.cp-top__h { margin-top: 10px; font-size: 54px; letter-spacing: -.03em; }
	.cp-top__sub { max-width: 440px; margin-top: 12px; font-size: 18px; }
	.cp-top__cards { grid-template-columns: repeat(2, 200px); gap: 14px; }
	.cp-top__cards li { padding: 14px 18px; border-radius: 14px; }
	.cp-top__cards b { font-size: 34px; }
	.cp-top__cards i { font-size: 16px; }
	.cp-top__cards span { font-size: 14px; }
	.cp-top__meta { margin-top: 16px; font-size: 14.5px; }
}
@media (min-width: 990px) {
	.cp-w11__in {
		grid-template-columns: minmax(360px, 520px) minmax(0, 1fr);
		grid-template-rows: 1fr auto auto auto 1fr auto;
		grid-template-areas: "top photo" "title photo" "words photo" "offer photo" "end photo" "more more";
		padding-bottom: 4px;
	}
	.cp-w11__panel { display: block; grid-row: 1 / 6; grid-column: 1; border-radius: 16px 0 0 16px; background: #f7f8fa; }
	.cp-w11__title { padding: 0 40px; }
	.cp-w11__h1 { font-size: 40px; line-height: 1.12; letter-spacing: -.02em; }
	.cp-w11__n { display: none; }
	.cp-w11__words { grid-area: words; display: block; padding: 10px 40px 0; font-size: 16px; line-height: 1.5; color: #2b333d; }
	.cp-w11__photo { height: 280px; border-radius: 0 16px 16px 0; }
	.cp-w11__offer { margin: 18px 40px 0; font-size: 14.5px; }
	.cp-w11__subs { display: grid; grid-template-columns: repeat(7, minmax(0, 176px)); gap: 16px; margin: 24px 0 0; padding: 0; overflow: visible; }
	.cp-w11__subs > li { width: auto; }
	.cp-w11-tile__img { border-radius: 18px; }
	.cp-w11-tile__l { margin-top: 10px; font-size: 15px; }
	.cp-w11-tile__n { font-size: 13px; }
	.cp-w11-tile__u { display: inline; }
	.cp-w11__brands { margin-top: 22px; padding-top: 0; }
	.cp-w11__brands-l { display: block; flex: none; margin-right: 6px; font-size: 14px; font-weight: 600; color: #16202b; }
	.cp-w11__chips { gap: 10px; margin: 0; padding: 0; }
	.cp-w11-chip { height: 46px; padding: 0 16px; font-size: 14.5px; }
	.cp-w11-chip__logo { height: 28px; max-width: 70px; }
	.cp-w11-tile:hover .cp-w11-tile__l { color: #003662; }
}
@media (min-width: 1200px) {
	.cp-w11__subs { gap: 24px; }
}
@media (prefers-reduced-motion: no-preference) {
	.cp-w11-chip { transition: border-color .15s ease, background-color .15s ease; }
	.cp-w11-tile__img { transition: box-shadow .15s ease; }
}

/* The phone chip bar's old place: kept (empty, hidden) as a swap anchor; "Filter" now sits beside "Sort" above the grid. */
.cp-sortbar[hidden] { display: none; }

/* ---------- the listing: filter panel and products ---------- */
.cp-lwrap { background: #fff; }
.cp-lwrap--search { background: #f7f8fa; }
.cp-listing { padding-block: 28px; }
.cp-listing[aria-busy="true"] .cp-listing__main { opacity: .55; }
.cp-listing__main { min-width: 0; scroll-margin-top: 120px; }
.cp-listing__bar { display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-height: 27px; margin: 0 0 16px; }
.cp-listing__count { margin: 0; padding: 0; font-size: 15px; font-weight: 400; line-height: 1.8; text-align: right; color: #16202b; }
.cp-listing__sort { display: none; margin: 0; }
.cp-listing__sort select {
	height: 40px; padding: 0 34px 0 40px; border: 1px solid rgba(43, 51, 61, .35); border-radius: 8px; color: #16202b;
	font: inherit; font-size: 13px; line-height: 1; cursor: pointer; appearance: none; -webkit-appearance: none; field-sizing: content;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316202b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4v15M8 19l-3.500-3.500M16 20V5M16 5l3.500 3.500'/%3E%3C/svg%3E") 16px center / 16px no-repeat;
}
.cp-listing__sort { position: relative; }
.cp-listing__sort::after { content: ""; position: absolute; right: 16px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1.4px solid #16202b; border-bottom: 1.4px solid #16202b; transform: rotate(45deg); pointer-events: none; }
.cp-listing__sort select:hover { border-color: #2b333d; }
.cp-listing__tool { display: none; }
.cp-more { margin: 0; padding: 37px 0 0; text-align: center; }
.cp-listing .cp-more .cp-more__link { display: inline-flex; align-items: center; justify-content: center; min-width: 90px; min-height: 44px; padding: 10px 15px; border: 0; border-radius: 8px; background: none; color: #003662; font-size: 15px; font-weight: 700; letter-spacing: .005em; text-decoration: none; }
.cp-listing .cp-more .cp-more__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.cp-empty { padding: 40px 0; text-align: center; }
.cp-empty__head { margin: 0 0 6px; font-size: 21.5px; line-height: 1.26; color: #16202b; }
.cp-empty p { margin: 0; }

/* filters in use */
.cp-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 0 0 14px; padding: 0; }
.cp-active__item { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border: 1px solid rgba(43, 51, 61, .35); border-radius: 8px; background: #fff; color: #16202b; font-size: 13px; text-decoration: none; }
.cp-active__item:hover { border-color: #003662; color: #003662; }
.cp-active__clear { display: inline-block; padding: 6px 4px; font-size: 13px; color: #003662; text-underline-offset: 3px; }

/* the filter panel: a drawer on phones */
/* above the phone tab bar (100) and the chat button (101), below the chat panel (300) */
/* As on the live shop it comes in from the left, 340px wide, and the page stays in view beside it (no dark layer). */
.cp-facets { position: fixed; inset: 0 auto 0 0; z-index: 200; width: min(340px, calc(100% - 50px)); background: #fff; visibility: hidden; transform: translateX(-100%); }
.cp-facets:target, .cp-facets-open .cp-facets { visibility: visible; transform: none; box-shadow: 0 0 32px rgba(22, 32, 43, .16); }
.cp-facets-open body { overflow: hidden; }
.cp-facets form { display: flex; flex-direction: column; height: 100%; margin: 0; }
.cp-facets__head { position: relative; display: flex; align-items: center; justify-content: center; min-height: 60px; padding: 8px 52px; border-bottom: 1px solid #E6E9EE; }
.cp-facets__title { margin: 0; font-size: 19px; font-weight: 400; color: #16202b; }
.cp-facets__close { position: absolute; top: 8px; right: 6px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 8px; background: none; color: #16202b; cursor: pointer; }
.cp-facets__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px; }
.cp-facets__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #E6E9EE; }
.cp-facets__foot a { color: #16202b; font-size: 15px; text-decoration: none; text-underline-offset: 3px; }
.cp-facets__foot a:hover, .cp-facets__foot a:focus-visible { text-decoration: underline; }
.cp-facets__foot .cp-btn { flex: 1; max-width: 240px; min-height: 46px; border-radius: 8px; font-size: 15px; }
.cp-facet { margin: 0; padding: 14px 0; border: 0; border-bottom: 1px solid #E6E9EE; }
.cp-facet summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; list-style: none; font-size: 13px; font-weight: 600; letter-spacing: .01em; text-transform: uppercase; color: #16202b; cursor: pointer; }
.cp-facet summary::-webkit-details-marker { display: none; }
.cp-facet summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: -4px 4px 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.cp-facet[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.cp-facet__chosen { margin: 0 auto 0 4px; font-weight: 400; color: #6b7280; }
.cp-facet__chosen[data-n="0"] { display: none; }
.cp-facet__note { display: none; margin: 8px 0; font-size: 13px; color: #6b7280; } /* the live panel does not show this line */
.cp-facet__price { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.cp-facet__price label { flex: 1; min-width: 0; margin: 0; }
.cp-facet__dash { flex: none; color: #2b333d; }
.cp-facet__rupee { display: flex; align-items: center; height: 46px; padding: 0 14px; border: 1px solid rgba(43, 51, 61, .35); border-radius: 8px; background: #fff; color: #16202b; }
.cp-facet__rupee:focus-within { border-color: #2b333d; box-shadow: 0 0 0 1px #2b333d; }
.cp-facet__rupee input { width: 100%; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; color: #16202b; -moz-appearance: textfield; appearance: textfield; }
.cp-facet__rupee input::-webkit-outer-spin-button, .cp-facet__rupee input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cp-facet__reset { margin: 10px 0 0; font-size: 13px; }
.cp-facet__reset a { color: #003662; text-underline-offset: 3px; }
/* The price slider: drawn for script only; on the live shop it is in the phone drawer as well as the wide column. */
.cp-range { display: none; }
.cp-js .cp-range { display: block; position: relative; height: 18px; margin: 22px 0 8px; }
.cp-range__track { position: absolute; left: 9px; right: 9px; top: 8px; height: 2px; border-radius: 2px; background: rgba(43, 51, 61, .35); }
.cp-range__fill { position: absolute; top: 0; bottom: 0; background: #2b333d; }
.cp-range input { position: absolute; inset: 0; width: 100%; height: 18px; margin: 0; background: none; pointer-events: none; appearance: none; -webkit-appearance: none; }
.cp-range input::-webkit-slider-runnable-track { height: 18px; background: none; }
.cp-range input::-moz-range-track { height: 18px; background: none; }
.cp-range input::-webkit-slider-thumb { width: 18px; height: 18px; border: 2px solid #2b333d; border-radius: 50%; background: #fff; pointer-events: auto; cursor: pointer; appearance: none; -webkit-appearance: none; }
.cp-range input::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid #2b333d; border-radius: 50%; background: #fff; pointer-events: auto; cursor: pointer; }
.cp-range input:focus-visible { outline: none; }
.cp-range input:focus-visible::-webkit-slider-thumb { outline: 2px solid #003662; outline-offset: 2px; }
.cp-range input:focus-visible::-moz-range-thumb { outline: 2px solid #003662; outline-offset: 2px; }
.cp-facet__list { list-style: none; margin: 6px 0 0; padding: 0; }
.cp-js .cp-facet__list:not(.is-all) .cp-facet__more { display: none; }
.cp-facet__list label { display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0; font-size: 14px; line-height: 1.3; color: #16202b; cursor: pointer; }
.cp-facet__list input { flex: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid #2b333d; border-radius: 4px; background: #fff; appearance: none; -webkit-appearance: none; cursor: pointer; }
.cp-facet__list input:checked { border-color: #003662; background: #003662 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.500 8.300l3 3 6-6.300' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.cp-facet__list input:focus-visible { outline: 2px solid #003662; outline-offset: 2px; }
.cp-facet__list input:disabled { border-color: #c9cfd6; cursor: not-allowed; }
.cp-facet__list input:disabled + span { color: #6b7280; }
.cp-facet__n { margin-left: 3px; font-size: 11px; color: #6b7280; }
.cp-facet__all { display: none; min-height: 36px; margin-top: 6px; padding: 0; border: 0; background: none; color: #16202b; font: inherit; font-size: 14px; cursor: pointer; }
.cp-facet__all:hover { text-decoration: underline; text-underline-offset: 3px; }
.cp-js .cp-facet__all { display: inline-block; }
.cp-facet--sort { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 0; font-size: 14px; color: #16202b; }
.cp-facet--sort select { height: 45px; max-width: 62%; padding: 0 12px; border: 1px solid rgba(43, 51, 61, .35); border-radius: 8px; background: #fff; color: #16202b; font: inherit; font-size: 14px; }

@media (min-width: 750px) {
	.cp-listing { padding-block: 40px; }
	.cp-listing--cols { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 30px; align-items: start; }
	.cp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
	.cp-listing--cols .cp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cp-listing__bar { justify-content: space-between; min-height: 40px; margin: 0 0 20px; }
	.cp-listing__count { font-size: 13px; line-height: 1.4; text-align: left; }
	.cp-listing__sort { display: block; }
	.cp-chips__tool { display: none; }
	.cp-facets, .cp-facets:target, .cp-facets-open .cp-facets { position: static; z-index: auto; width: auto; visibility: visible; transform: none; box-shadow: none; background: none; }
	.cp-facets-open body { overflow: visible; }
	.cp-facets form { height: auto; }
	.cp-facets__head, .cp-facet--sort { display: none; }
	.cp-facets__body { overflow: visible; padding: 0; }
	.cp-facets__foot { padding: 0 0 12px; border-top: 0; }
	.cp-js .cp-facets__foot { display: none; }
	.cp-facet { padding: 0 0 47px; border-bottom: 0; }
	.cp-facet summary { min-height: 16px; line-height: 16px; }
	.cp-facet__note { display: none; }
	.cp-facet__price { margin-top: 32px; }
	.cp-js .cp-range { display: block; position: relative; height: 18px; margin: 27px 0 20px; }
	.cp-range__track { position: absolute; left: 9px; right: 9px; top: 8px; height: 2px; border-radius: 2px; background: rgba(43, 51, 61, .35); }
	.cp-range__fill { position: absolute; top: 0; bottom: 0; background: #2b333d; }
	.cp-range input { position: absolute; inset: 0; width: 100%; height: 18px; margin: 0; background: none; pointer-events: none; appearance: none; -webkit-appearance: none; }
	.cp-range input::-webkit-slider-runnable-track { height: 18px; background: none; }
	.cp-range input::-moz-range-track { height: 18px; background: none; }
	.cp-range input::-webkit-slider-thumb { width: 18px; height: 18px; border: 2px solid #2b333d; border-radius: 50%; background: #fff; pointer-events: auto; cursor: pointer; appearance: none; -webkit-appearance: none; }
	.cp-range input::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid #2b333d; border-radius: 50%; background: #fff; pointer-events: auto; cursor: pointer; }
	.cp-range input:focus-visible { outline: none; }
	.cp-range input:focus-visible::-webkit-slider-thumb { outline: 2px solid #003662; outline-offset: 2px; }
	.cp-range input:focus-visible::-moz-range-thumb { outline: 2px solid #003662; outline-offset: 2px; }
	.cp-facet__list { margin: 19px 0 0; }
	.cp-facet__list label { min-height: 34px; gap: 12px; font-size: 13px; }
	.cp-facet__all { margin-top: 3px; }
	.cp-more { padding: 44px 0 0; }
}
@media (min-width: 990px) {
	.cp-listing--cols { grid-template-columns: 280px minmax(0, 1fr); gap: 40px; }
	.cp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.cp-listing--cols .cp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	.cp-listing--cols { grid-template-columns: 300px minmax(0, 1fr); }
}
@media (min-width: 1200px) {
	.cp-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.cp-listing--cols .cp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: no-preference) {
	.cp-facets { transition: transform .2s ease, visibility .2s; }
	.cp-listing__main { transition: opacity .15s ease; }
}

/* ---------- search results: mist page, white panels, three across ---------- */
.cp-lfound { background: #f7f8fa; }
.cp-lfound__in { padding-block: 28px 0; }
.cp-lfound__title { margin: 0; font-size: 34px; font-weight: 400; line-height: 1.26; letter-spacing: -.009em; color: #16202b; }
.cp-lfound__line { display: none; margin: 0; font-size: 36px; font-weight: 400; line-height: 1.26; letter-spacing: -.009em; color: #16202b; }
.cp-lsearch { display: flex; align-items: center; height: 54px; margin-top: 20px; padding: 0 5px 0 20px; border: 1px solid rgba(43, 51, 61, .35); border-radius: 8px; background: #f7f8fa; }
.cp-lsearch:focus-within { border-color: #2b333d; box-shadow: 0 0 0 1px #2b333d; }
.cp-lsearch input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; color: #16202b; }
.cp-lsearch button { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 8px; background: #003662; color: #fff; cursor: pointer; }
/* products that match while typing: a white panel under the box, one row each (picture, name, price) */
.cp-lsearch { position: relative; }
.cp-suggest { position: absolute; z-index: 20; top: calc(100% + 4px); left: -1px; right: -1px; max-height: min(70vh, 640px); overflow-y: auto; overscroll-behavior: contain; border-radius: 8px; background: #fff; box-shadow: 0 0 1px 1px rgba(0, 15, 30, .04), 0 10px 24px rgba(0, 15, 30, .12); }
.cp-suggest[hidden] { display: none; }
.cp-suggest__head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cp-suggest__list { list-style: none; margin: 0; padding: 0; }
.cp-suggest__item { display: flex; align-items: center; gap: 20px; padding: 14px 16px; border-radius: 8px; color: #16202b; text-decoration: none; }
.cp-suggest__item:hover, .cp-suggest__item:focus-visible { background: #f7f8fa; }
.cp-suggest__pic { flex: none; display: block; width: 80px; height: 80px; background: #fff; }
.cp-suggest__pic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cp-suggest__text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cp-suggest__name { font-size: 16px; line-height: 1.3; }
.cp-suggest__price { font-size: 16px; line-height: 1.3; }
.cp-suggest__price s { margin-left: 12px; font-size: 13px; color: #56585b; }
.cp-listing--search { padding-top: 14px; }
.cp-listing--search .cp-listing__bar { justify-content: space-between; min-height: 57px; margin: 36px 0 15px; padding: 0 20px; border-radius: 12px; background: #fff; }
.cp-listing--search .cp-listing__tool { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; color: #16202b; font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; }
.cp-listing--search .cp-listing__count { font-size: 14px; }
@media (min-width: 750px) {
	.cp-lfound__in { padding-block: 20px 0; }
	.cp-listing--search .cp-listing__tool { display: none; }
	.cp-listing--search .cp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cp-listing--search .cp-listing__bar { min-height: 80px; margin: 0 0 20px; padding: 0 20px 0 30px; }
	.cp-listing--search .cp-listing__count { font-size: 14px; }
	.cp-listing--search.cp-listing--cols { grid-template-columns: 300px minmax(0, 1fr); }
	.cp-listing--search .cp-facets, .cp-listing--search .cp-facets:target { overflow: hidden; border-radius: 12px; background: #fff; }
	.cp-listing--search .cp-facet { padding: 34px 30px 13px; border-bottom: 2px solid #f7f8fa; }
	.cp-listing--search .cp-facet--price { padding-bottom: 13px; }
	.cp-listing--search .cp-facet__list { margin-top: 22px; }
	.cp-listing--search .cp-facet__list label { min-height: 35px; font-size: 14px; }
	.cp-listing--search .cp-facet__n { font-size: 12px; }
	.cp-listing--search .cp-facets__foot { padding: 12px 30px; }
}
@media (min-width: 990px) {
	.cp-lfound .screen-reader-wide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.cp-lfound .cp-lsearch { display: none; }
	.cp-lfound__line { display: block; }
	.cp-listing--search { padding-top: 38px; }
	.cp-listing--search.cp-listing--cols { grid-template-columns: 340px minmax(0, 1fr); }
}
@media (min-width: 1100px) {
	.cp-lfound__line { font-size: 40px; }
	.cp-listing--search.cp-listing--cols { grid-template-columns: 360px minmax(0, 1fr); }
}

/* ---------- related links under the grid (the shop's cp-related-collections) ---------- */
.cp-rc { padding: 32px 0; background: #fff; }
.cp-rc__group + .cp-rc__group { margin-top: 28px; }
.cp-rc__title { margin: 0 0 14px; font-size: 19px; font-weight: 400; line-height: 1.26; letter-spacing: -.01em; color: #16202B; }
.cp-rc__list { display: flex; flex-wrap: wrap; gap: 14px 10px; list-style: none; margin: 0; padding: 0; }
.cp-rc__list li { display: flex; }
.cp-rc__pill { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 13px; border: 1px solid #E6E9EE; border-radius: 999px; background: #fff; color: #16202B; font-size: 13px; font-weight: 500; line-height: 1.3; text-decoration: none; }
.cp-rc__pill:hover { border-color: #003662; color: #003662; }
.cp-rc__pill--brand { font-weight: 600; }
@media (min-width: 750px) {
	.cp-rc__title { font-size: 24px; }
	.cp-rc__pill { min-height: 40px; padding: 8px 16px; font-size: 14px; }
}
@media (prefers-reduced-motion: no-preference) {
	.cp-rc__pill { transition: border-color .15s ease, color .15s ease; }
}
.cp-lrule { height: 0; margin: 0; border: 0; border-top: 1px solid #2d2d2d; }

/* ---------- the collection's own text and price list (the shop's cp-collection-seo) ---------- */
.cp-seo { width: 100%; padding: 40px clamp(16px, 4vw, 56px) 44px; background: #fff; font-family: Inter, -apple-system, sans-serif; color: #1A1A1A; font-size: 14.5px; line-height: 1.65; box-sizing: border-box; }
.cp-seo .cp-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #666; margin-bottom: 10px; }
.cp-seo h2 { font-size: 28px; font-weight: 400; letter-spacing: -.022em; line-height: 1.2; margin: 0 0 14px; color: #1A1A1A; }
.cp-seo h3 { font-size: 18px; font-weight: 400; letter-spacing: -.012em; margin: 32px 0 10px; color: #1A1A1A; }
.cp-seo .cp-em { color: #003662; }
.cp-seo .cp-lead { font-size: 15.5px; margin: 0 0 26px; }
.cp-seo p { margin: 0 0 12px; }
.cp-seo strong { font-weight: 600; }
.cp-seo a { color: #003662; text-decoration: none; }
.cp-seo a:hover { text-decoration: underline; }
.cp-guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: #E6E6E6; border-top: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6; margin: 0 0 30px; }
.cp-guide > div { background: #fff; padding: 18px 18px 20px; }
.cp-guide h4 { font-size: 14px; font-weight: 500; margin: 10px 0 5px; color: #1A1A1A; }
.cp-guide p { font-size: 13px; line-height: 1.55; color: #666; margin: 0; max-width: none; }
.cp-guide > div::before { content: ""; display: block; width: 20px; height: 20px; background-repeat: no-repeat; background-size: 20px; }
.cp-icon-stage::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23128CED' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 20V14M12 20V8M20 20V4'/%3E%3C/svg%3E"); }
.cp-icon-home::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23128CED' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7v9H4z'/%3E%3C/svg%3E"); }
.cp-icon-coat::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23128CED' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 8c3-3 6 3 9 0s6 3 9 0M3 16c3-3 6 3 9 0s6 3 9 0'/%3E%3C/svg%3E"); }
.cp-icon-water::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23128CED' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 3c4 5 6 7.5 6 10a6 6 0 01-12 0c0-2.5 2-5 6-10z'/%3E%3C/svg%3E"); }
.cp-notes { column-count: 2; column-gap: 48px; }
.cp-notes p { max-width: none; break-inside: avoid; margin: 0 0 14px; }
.cp-brands { font-size: 13.5px; color: #666; line-height: 1.7; max-width: none; margin: 0 0 8px; }
.cp-seo .cp-faq { border-top: 1px solid #E6E6E6; border-bottom: 0; margin-top: 6px; column-count: 2; column-gap: 48px; }
.cp-seo .cp-faq > div { border-bottom: 1px solid #E6E6E6; padding: 14px 0; break-inside: avoid; }
.cp-seo .cp-faq h4 { font-size: 14.5px; font-weight: 500; margin: 0 0 5px; color: #1A1A1A; }
.cp-seo .cp-faq p { font-size: 13.5px; line-height: 1.6; color: #666; margin: 0; max-width: none; }
.cp-seo .cp-sub { font-size: 12.5px; color: #666; margin-bottom: 14px; }
.cp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cp-table th { text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #666; padding: 0 0 8px; border-bottom: 1px solid #E6E6E6; }
.cp-table td { padding: 11px 0; border-bottom: 1px solid #E6E6E6; }
.cp-table tr:last-child td { border-bottom: 0; }
.cp-table .cp-price { text-align: right; white-space: nowrap; font-weight: 500; }
.cp-table .cp-unit { color: #666; font-weight: 400; }
.cp-table td:first-child { width: 60%; }
.cp-table a { color: #003662; text-decoration: none; }
.cp-table a:hover { text-decoration: underline; }
@media screen and (max-width: 989px) {
	.cp-notes, .cp-seo .cp-faq { column-count: 1; }
}
@media screen and (max-width: 749px) {
	.cp-seo { padding: 26px 16px 30px; font-size: 13.5px; line-height: 1.6; }
	.cp-seo .cp-eyebrow { font-size: 10.5px; margin-bottom: 8px; }
	.cp-seo h2 { font-size: 21px; margin: 0 0 10px; }
	.cp-seo h3 { font-size: 16.5px; margin: 24px 0 8px; }
	.cp-seo .cp-lead { font-size: 14.5px; margin: 0 0 20px; }
	.cp-seo p { margin: 0 0 10px; }
	.cp-guide { grid-template-columns: 1fr 1fr; margin: 0 0 22px; }
	.cp-guide > div { padding: 14px 12px 16px; }
	.cp-guide > div::before { width: 18px; height: 18px; background-size: 18px; }
	.cp-guide h4 { font-size: 13px; margin: 8px 0 4px; }
	.cp-guide p { font-size: 12.5px; line-height: 1.5; }
	.cp-brands { font-size: 12.5px; }
	.cp-seo .cp-faq > div { padding: 12px 0; }
	.cp-seo .cp-faq h4 { font-size: 13.5px; }
	.cp-seo .cp-faq p { font-size: 12.5px; }
	.cp-table { font-size: 13px; }
	.cp-table td { padding: 10px 0; }
	/* Two number columns need room at 375px: at 60% the price and per-kg cells collide. */
	.cp-table td:first-child { width: 46%; }
	.cp-table .cp-price { padding-left: 10px; }
}

/* ---------- the list of all collections ---------- */
.cp-clist { background: #f7f8fa; padding-bottom: 28px; }
.cp-clist__head { padding-block: 16px 22px; }
.cp-clist__title { margin: 0; font-size: 34px; font-weight: 400; line-height: 1.26; letter-spacing: -.009em; color: #16202b; }
.cp-clist__text { margin: 4px 0 0; max-width: none; font-size: 14.5px; line-height: 1.4; color: #2b333d; }
.cp-clist__text p { margin: 0; }
.cp-grid--collections { gap: 28px 16px; }
.cp-card--collection { overflow: visible; border-radius: 0; background: none; box-shadow: none; text-align: center; container-type: normal; }
.cp-card--collection .cp-card__media { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 50%; background: #fff; box-shadow: 0 0 1px 1px rgba(0, 15, 30, .01), 0 6px 8px 0 rgba(0, 15, 30, .03), 0 2px 4px 0 rgba(0, 15, 30, .01); }
.cp-card--collection .cp-card__media img { width: 100%; height: 100%; object-fit: contain; }
.cp-card--collection .cp-card__body { min-height: 0; padding: 14px 4px 0; overflow: visible; }
.cp-card--collection .cp-card__title { margin: 0; min-height: 0; font-size: 17px; line-height: 1.3; color: #16202b; text-align: center; }
.cp-card--collection .cp-card__title a { display: block; -webkit-line-clamp: none; overflow: visible; }
.cp-clist .cp-more { padding: 40px 0 12px; }
.cp-clist .cp-more .cp-btn { min-width: 90px; min-height: 44px; border: 0; background: none; color: #003662; font-size: 15px; font-weight: 700; }
@media (min-width: 750px) {
	.cp-clist { padding-bottom: 40px; }
	.cp-clist__head { padding-block: 25px 30px; }
	.cp-clist__title { font-size: 42px; }
	.cp-clist__text { margin-top: 10px; font-size: 17px; }
	.cp-grid--collections { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px 16px; }
	.cp-card--collection .cp-card__body { padding-top: 10px; }
	.cp-card--collection .cp-card__title { font-size: 18px; }
}
@media (min-width: 990px) {
	.cp-grid--collections { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	.cp-clist__title { font-size: 52px; }
}
@media (min-width: 1200px) {
	.cp-grid--collections { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* R-095 featured brands' offer tiles (Option A, his 22:36; mockups/three-brands-2026-10-19/), compact on phones so the first
   products stay close to the first screen: one row that swipes, the next tile peeking in; three across on a computer. */
.cp-bt { padding: 6px 0 10px; }
.cp-bt__row { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; margin: 0 -16px; padding: 0 16px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; list-style: none; scrollbar-width: none; overscroll-behavior-x: contain; }
.cp-bt__row::-webkit-scrollbar { display: none; }
.cp-bt__row li { scroll-snap-align: start; min-width: 0; }
.cp-bt__tile { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 12px; align-items: center; height: 100%; padding: 12px 12px 12px 14px; border-radius: var(--cp-radius-panel); background: var(--bt-bg); color: var(--bt-fg); text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
.cp-bt__tile:hover { transform: translateY(-1px); }
.cp-bt__tile:active { transform: scale(.99); }
.cp-bt__tile:focus-visible { outline: 3px solid var(--cp-navy); outline-offset: 3px; }
.cp-bt__text { display: flex; flex-direction: column; min-width: 0; }
.cp-bt__logo { display: inline-flex; align-self: flex-start; padding: 3px 6px; background: #fff; border-radius: 6px; margin-bottom: 6px; }
.cp-bt__logo img { width: 56px; height: 28px; object-fit: contain; display: block; }
.cp-bt__off { font-size: 24px; line-height: 1.1; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cp-bt__sub { margin-top: 3px; font-size: 13px; line-height: 1.3; opacity: .95; overflow-wrap: anywhere; }
.cp-bt__cta { margin-top: 6px; font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.cp-bt__cta svg { width: 14px; height: 14px; }
.cp-bt__pack { display: block; width: 88px; height: 88px; border-radius: 10px; background: #fff; overflow: hidden; }
.cp-bt__pack img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (min-width: 900px) {
	.cp-bt { padding: 16px 0 18px; }
	.cp-bt__row { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; }
	.cp-bt__tile { grid-template-columns: minmax(0, 1fr) 120px; padding: 16px 16px 16px 20px; }
	.cp-bt__logo img { width: 72px; height: 36px; }
	.cp-bt__off { font-size: 30px; }
	.cp-bt__sub { font-size: 14px; }
	.cp-bt__pack { width: 120px; height: 120px; }
}
@media (prefers-reduced-motion: reduce) { .cp-bt__tile { transition: none; } .cp-bt__tile:hover, .cp-bt__tile:active { transform: none; } }

/* ---------- W11 (SITE-3): "Filter" and "Sort" in one row above the products, kept in view on phones ---------- */
@media (max-width: 749px) {
	.cp-listing:not(.cp-listing--search) { padding-block: 6px 28px; }
	.cp-listing:not(.cp-listing--search) .cp-listing__bar {
		position: sticky; top: var(--cp-cbar-top, 0px); z-index: 6; justify-content: flex-start; gap: 10px; min-height: 0;
		margin: 0 calc(-1 * var(--cp-gutter)) 12px; padding: 10px var(--cp-gutter); background: #fff;
	}
	.cp-facets-open .cp-listing:not(.cp-listing--search) .cp-listing__bar { position: static; z-index: auto; }
	.cp-listing:not(.cp-listing--search) .cp-listing__tool {
		display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border: 1px solid #e6e9ee; border-radius: 8px;
		background: #fff; color: #16202b; font-size: 13.5px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer;
	}
	.cp-listing:not(.cp-listing--search) .cp-listing__tool:focus-visible { outline: 2px solid #003662; outline-offset: 2px; }
	.cp-listing:not(.cp-listing--search) .cp-listing__tool .cp-chip__n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #003662; color: #fff; font-size: 11px; font-weight: 600; }
	.cp-listing:not(.cp-listing--search) .cp-listing__count { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.3; text-align: left; color: #6b7280; }
	/* the count sits beside the title on a phone; here only while filters are in use ("12 of 125 products") */
	.cp-listing__bar--quiet .cp-listing__count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.cp-listing:not(.cp-listing--search) .cp-listing__bar--quiet .cp-listing__sort { margin-left: auto; }
	.cp-listing:not(.cp-listing--search) .cp-listing__sort { display: block; flex: none; }
	.cp-listing:not(.cp-listing--search) .cp-listing__sort select { height: 38px; padding: 0 30px 0 34px; border-color: #e6e9ee; font-size: 13.5px; font-weight: 600; background-position: 11px center; }
	.cp-listing:not(.cp-listing--search) .cp-listing__sort::after { right: 13px; }
}
@media (min-width: 990px) {
	.cp-listing:not(.cp-listing--search) { padding-block: 26px 40px; }
	.cp-listing:not(.cp-listing--search) .cp-listing__count { font-size: 15px; font-weight: 600; color: #16202b; }
}

/* ---------- the compact section title (W9 "A", 27 Oct 2026): 19px phone / 26px from 990px, bold, "See all" on the same
   line. The same values as SITE-2's shared title in style.css; to be joined with it when the pieces are merged. ---------- */
.cp-l3-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.cp-l3-title { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: #16202b; }
.cp-l3-all { display: inline-flex; align-items: center; gap: 2px; font-size: 13.5px; font-weight: 600; color: #003662; white-space: nowrap; text-decoration: none; }
.cp-rc__title.cp-l3-title { margin: 0 0 12px; }
@media (min-width: 990px) {
	.cp-l3-head { margin: 0 0 18px; }
	.cp-l3-title { font-size: 26px; }
	.cp-l3-all { font-size: 15px; }
	.cp-rc__title.cp-l3-title { margin: 0 0 18px; }
}

/* ---------- W11: "More about <collection>", the collection's own words right under the products ---------- */
.cp-about { padding: 8px 0 12px; background: #fff; }
.cp-about .cp-l3-head { padding-top: 22px; border-top: 1px solid #e6e9ee; }
.cp-about .cp-listing__intro { max-width: 1000px; margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: #6b7280; }
.cp-about .cp-listing__intro:last-child { margin-bottom: 0; }
.cp-about .cp-seo { max-width: 1000px; padding: 0; background: none; }
.cp-about .cp-seo > :first-child { margin-top: 0; }
.cp-about__body.is-folded { position: relative; max-height: 240px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.cp-about__more { display: inline-flex; align-items: center; min-height: 40px; margin: 4px 0 0; padding: 0; border: 0; background: none; color: #003662; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.cp-about__more[hidden] { display: none; }
.cp-about__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.cp-about__more:focus-visible { outline: 2px solid #003662; outline-offset: 2px; border-radius: 4px; }
@media (min-width: 990px) {
	.cp-about { padding: 24px 0 16px; }
	.cp-about .cp-l3-head { padding-top: 26px; }
}