/*
 * Home page sections (and the ones other pages share: rich-text, icons-with-text, featured-collection,
 * cp-google-reviews). Phone first; breakpoints as on the live shop: phone up to 749px, 750-989, 990 and wider.
 *
 * Sections whose class starts with cph2 / cp-chips / cp-bd / cp-rv / cp-sp / cp-promo / cp-fy are the shop's own
 * and are ported from the live theme's cp-*.liquid files, with the shop's phone rules (cp-mobile-density) and
 * motion rules (cp-motion) folded in. The others (cp-rt, cp-iwt, cp-tabs, cp-fc, cp-fb) are written for this theme
 * to look like the live sections, from the measured values in theme-spec/SPEC-2.
 * Values that were section settings on the live shop arrive as custom properties on each section's root.
 */

/* ---------- frame: every section is a full-width band with its own inner width (.cp-pw: the live page
   container, 1520px at most, 20px at the sides on phones and 50px from 750px) ---------- */
.cp-sec { --cp-pw: 20px; }
.cp-sec[hidden] { display: none !important; }
.cp-pw { max-width: 1520px; margin-inline: auto; padding-inline: var(--cp-pw); }
.cp-sec--white { background: #fff; }
.cp-sec--mist { background: #f7f8fa; }
.cp-sec--navy { background: #003662; color: #fff; }
.cp-sec--navy :is(h1, h2, h3), .cp-sec--navy a { color: #fff; }
.cp-sec--line { border-top: 1px solid #e6e9ee; }
.cp-sec--line-b { border-bottom: 1px solid #e6e9ee; }
.cp-pt-0 { padding-top: 0; }
.cp-pt-h { padding-top: 14px; }
.cp-pt-s { padding-top: 28px; }
.cp-pt-l { padding-top: 42px; }
.cp-pb-0 { padding-bottom: 0; }
.cp-pb-h { padding-bottom: 14px; }
.cp-pb-s { padding-bottom: 28px; }
.cp-pb-l { padding-bottom: 42px; }

/* the live shop's text sizes */
.cp-fs-h1 { font-size: 34px; }
.cp-fs-h2 { font-size: 28px; }
.cp-fs-h3 { font-size: 25px; }
.cp-fs-h4 { font-size: 21.5px; }
.cp-fs-t2 { font-size: 16px; }
.cp-fs-t3 { font-size: 15px; }
.cp-fs-t4 { font-size: 14px; }
.cp-fs-t5 { font-size: 13px; }
.cp-fs-t6 { font-size: 12px; }
.cp-fs-t7 { font-size: 11.5px; }
.cp-em-accent em { font-style: normal; color: #003662; }
.cp-sec--navy .cp-em-accent em { color: #e3c27a; }
.cp-arrow { flex: 0 0 auto; width: 1.05em; height: 1.05em; transition: transform .15s; }

@media (min-width: 750px) {
	.cp-sec { --cp-pw: 50px; }
	.cp-pt-h { padding-top: 20px; }
	.cp-pt-s { padding-top: 40px; }
	.cp-pt-l { padding-top: 60px; }
	.cp-pb-h { padding-bottom: 20px; }
	.cp-pb-s { padding-bottom: 40px; }
	.cp-pb-l { padding-bottom: 60px; }
	.cp-fs-h1 { font-size: 42px; }
	.cp-fs-h2 { font-size: 36px; }
	.cp-fs-h3 { font-size: 30px; }
	.cp-fs-h4 { font-size: 24px; }
	.cp-fs-t2 { font-size: 16.5px; }
	.cp-fs-t3 { font-size: 15.5px; }
	.cp-fs-t4 { font-size: 14.5px; }
	.cp-fs-t5 { font-size: 13.5px; }
	.cp-fs-t6 { font-size: 12.5px; }
}
@media (min-width: 1100px) {
	.cp-fs-h1 { font-size: 52px; }
	.cp-fs-h2 { font-size: 40px; }
	.cp-fs-h3 { font-size: 34px; }
	.cp-fs-h4 { font-size: 28px; }
	.cp-fs-t2 { font-size: 17px; }
	.cp-fs-t3 { font-size: 16px; }
	.cp-fs-t4 { font-size: 15px; }
	.cp-fs-t5 { font-size: 14px; }
	.cp-fs-t6 { font-size: 13px; }
}

/* =====================================================================================================
   cp-hero (ours): fading carousel; the band behind it takes the active slide's colour
   ===================================================================================================== */
.cph2 { background: #fff; padding: var(--cph2-pt-m, 12px) 0 0; }
.cph2 *, .cph2 *::before, .cph2 *::after { box-sizing: border-box; }
/* overflow: the stage's shadow stops at the band's edge, as on the live page where the next section covers it */
.cph2--tinted { background-color: var(--cp-tint, var(--cph2-tint0, #FFC940)); transition: background-color .8s ease; position: relative; padding-bottom: 30px; overflow: hidden; }
.cph2--tinted::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 58%, #fff 100%); pointer-events: none; }
.cph2--tinted .cph2__wrap { position: relative; }
.cph2--tinted .cph2__stage { box-shadow: 0 14px 40px rgba(22, 32, 43, .16); }
.cph2__wrap { max-width: calc(var(--cph2-max, 1320px) + 40px); margin: 0 auto; padding: 0 12px; }
.cph2__stage { position: relative; height: auto; border-radius: 20px; overflow: hidden; background: #fff; isolation: isolate; display: grid; }
.cph2__slide { position: relative; grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.cph2__slide.is-active { opacity: 1; visibility: visible; transition: opacity .7s ease, visibility 0s; z-index: 1; }
.cph2__media { position: relative; overflow: hidden; aspect-ratio: 16 / 11; border-radius: 20px; }
/* The first slide's picture sits inside a <picture> (a phone is offered a smaller copy); it is laid out as the others. */
.cph2__media > picture { display: contents; }
.cph2__media > img, .cph2__media > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--focus, 72%) 50%; transform: scale(1.02); }
.cph2__slide.is-active .cph2__media > img, .cph2__slide.is-active .cph2__media > picture > img { animation: cph2-drift 9s ease-out both; }
@keyframes cph2-drift { from { transform: scale(1.09) translateX(-1%); } to { transform: scale(1.02); } }

.cph2__card { position: static; padding: 14px 6px 50px; color: #2B333D; z-index: 2; }
.cph2__cap { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #003662; }
.cph2__h { margin: 0; font-size: 28px; line-height: 1.1; letter-spacing: -.02em; font-weight: 400; color: #16202B; text-transform: none; text-wrap: balance; }
.cph2__h span { color: #003662; }
.cph2__text { margin-top: 8px; font-size: 14px; line-height: 1.5; }
.cph2__text p { margin: 0; }
.cph2__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cph2__btn { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 140px; min-height: 44px; padding: 0 14px; border-radius: 12px; font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap; border: 1.5px solid #C9D3DE; background: #fff; color: #003662; transition: background .15s, border-color .15s, color .15s; }
.cph2__btn:hover { border-color: #003662; background: #EEF2F6; }
.cph2__btn--primary { background: var(--cp-action, #D9480F); border-color: var(--cp-action, #D9480F); color: #fff; }
.cph2__btn--primary:hover { background: var(--cp-action-hover, #BF3F0C); border-color: var(--cp-action-hover, #BF3F0C); color: #fff; }
.cph2__btn:focus-visible, .cph2__dot:focus-visible, .cph2__arrow:focus-visible { outline: 2px solid #003662; outline-offset: 3px; }
.cph2__fine { margin: 8px 0 0; font-size: 12px; color: #6B7280; }

/* the copy rises in, one line after another, each time a slide becomes active */
.cph2__slide.is-active .cph2__card > * { animation: cph2-rise .6s cubic-bezier(.2, .7, .2, 1) both; }
.cph2__slide.is-active .cph2__card > :nth-child(1) { animation-delay: .10s; }
.cph2__slide.is-active .cph2__card > :nth-child(2) { animation-delay: .18s; }
.cph2__slide.is-active .cph2__card > :nth-child(3) { animation-delay: .26s; }
.cph2__slide.is-active .cph2__card > :nth-child(4) { animation-delay: .34s; }
.cph2__slide.is-active .cph2__card > :nth-child(5) { animation-delay: .42s; }
@keyframes cph2-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* the vector chip */
.cph2__fx { position: absolute; left: 10px; top: 10px; z-index: 2; display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, .95); border-radius: 14px; padding: 8px 12px 8px 10px; box-shadow: 0 8px 28px rgba(22, 32, 43, .14); font-size: 13px; line-height: 1.3; color: #6B7280; }
.cph2__fx b { display: block; font-size: 14.5px; font-weight: 600; color: #16202B; }
.cph2__fx svg { flex: 0 0 auto; display: block; overflow: visible; }
.cph2__slide.is-active .cph2__fx { animation: cph2-pop .6s cubic-bezier(.2, .8, .2, 1) .5s both; }
@keyframes cph2-pop { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } }
.cph2__fx--delivery { flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px 12px; }
.cph2__fx--delivery svg { width: 170px; height: 32px; }
.cph2__scooter { offset-path: path("M18 30 C 60 6, 110 40, 196 20"); offset-rotate: 0deg; offset-distance: 0%; }
.cph2__slide.is-active .cph2__scooter { animation: cph2-ride 4.2s cubic-bezier(.45, 0, .25, 1) 1s infinite; }
@keyframes cph2-ride { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 78% { offset-distance: 100%; opacity: 1; } 90%, 100% { offset-distance: 100%; opacity: 0; } }
.cph2__ping { transform-box: fill-box; transform-origin: center; animation: cph2-ping 2.1s ease-out infinite; }
@keyframes cph2-ping { from { transform: scale(.6); opacity: .35; } to { transform: scale(2.4); opacity: 0; } }
.cph2__stars { display: inline-flex; gap: 2px; }
.cph2__stars svg { opacity: 0; transform: scale(.4); }
.cph2__slide.is-active .cph2__stars svg { animation: cph2-star .45s cubic-bezier(.2, 1.5, .4, 1) both; animation-delay: calc(.9s + var(--i) * .13s); }
@keyframes cph2-star { to { opacity: 1; transform: none; } }

/* dots carry the autoplay timer */
.cph2__nav { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); bottom: 8px; display: flex; align-items: center; gap: 10px; }
.cph2__arrow { width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .95); color: #16202B; display: none; place-items: center; cursor: pointer; box-shadow: 0 2px 10px rgba(22, 32, 43, .12); padding: 0; }
.cph2__arrow:hover { background: #fff; color: #003662; }
.cph2__dots { display: flex; gap: 6px; padding: 0 12px; height: 38px; align-items: center; border-radius: 999px; }
.cph2__dot { width: 22px; height: 24px; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; }
.cph2__dot i { display: block; width: 100%; height: 4px; border-radius: 4px; background: #D5DAE0; overflow: hidden; position: relative; }
.cph2__dot.is-active { width: 44px; }
.cph2__dot.is-active i::after { content: ""; position: absolute; inset: 0; background: #003662; border-radius: 4px; transform-origin: left; transform: scaleX(1); }
.cph2.is-playing .cph2__dot.is-active i::after { animation: cph2-fill var(--cph2-dur, 6s) linear both; }
.cph2.is-paused .cph2__dot.is-active i::after { animation-play-state: paused; }
@keyframes cph2-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Phones (his "2", 15 Oct 2026: "The whole hero section should be within the screen"): the words and both buttons
   sit on the picture, which is 350px tall; the caption line, the floating card and the fine print (the strip on top
   already says it) step aside, so the whole hero ends near 460px on a 390 x 844 phone. */
@media (max-width: 749px) {
	.cph2--tinted { padding-bottom: 14px; }
	.cph2__media { aspect-ratio: auto; height: 350px; }
	.cph2__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 20, 45, 0) 30%, rgba(0, 20, 45, .8) 100%); pointer-events: none; }
	.cph2__card { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 16px 46px; color: #fff; }
	.cph2__cap, .cph2__fine, .cph2__fx { display: none; }
	.cph2__h, .cph2__h span { color: #fff; font-size: 27px; }
	.cph2__text { margin-top: 6px; color: rgba(255, 255, 255, .92); }
	/* 20 Oct 2026 (the tester and the leader: a cut sentence is not fine): the sentence is never clamped; it wraps, and
	   the words grow up the picture from its foot, so the buttons keep their place in the first screen. */
	.cph2__btn:not(.cph2__btn--primary) { background: #fff; border-color: #fff; }
	.cph2__dot i { background: rgba(255, 255, 255, .45); }
	.cph2__dot.is-active i::after { background: #fff; }
}
@media (max-width: 380px) {
	/* R-065 mend (the tester's note): on 360 px phones the hero's line is whole, not cut with "..." */
	.cph2__h, .cph2__h span { font-size: 24px; }
	.cph2__text { font-size: 13px; }
}

@media (min-width: 750px) {
	.cph2 { padding-top: var(--cph2-pt, 4px); }
	.cph2__wrap { padding: 0 20px; }
	.cph2__stage { display: block; height: var(--cph2-h, 560px); border-radius: 24px; background: #EEF2F6; }
	.cph2__slide { position: absolute; inset: 0; display: block; }
	.cph2__media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
	.cph2__media > img, .cph2__media > picture > img { object-position: 70% 50%; }
	.cph2__card { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); width: min(420px, 52%); background: rgba(255, 255, 255, .93); border-radius: 20px; padding: 24px; }
	.cph2__cap { font-size: 13px; margin-bottom: 12px; }
	.cph2__h { font-size: var(--cph2-hs-t, 42px); line-height: 1.06; }
	.cph2__text { margin-top: 14px; font-size: 17px; }
	.cph2__btns { gap: 10px; margin-top: 22px; }
	.cph2__btn { flex: 0 1 auto; min-height: 48px; padding: 0 22px; font-size: 15.5px; }
	.cph2__fine { margin-top: 14px; font-size: 13px; }
	.cph2__fx { left: auto; right: 18px; top: 18px; border-radius: 16px; padding: 10px 16px 10px 12px; }
	.cph2__fx--delivery { padding: 12px 16px; }
	.cph2__fx--delivery svg { width: 236px; height: 44px; }
	.cph2__nav { left: auto; right: 28px; transform: none; bottom: 22px; }
	.cph2__arrow { display: grid; }
	.cph2__dots { background: rgba(255, 255, 255, .95); box-shadow: 0 2px 10px rgba(22, 32, 43, .12); }
}
@media (min-width: 990px) {
	.cph2__card { left: 44px; width: min(470px, 46%); padding: 30px 30px 26px; }
	.cph2__h { font-size: var(--cph2-hs, 54px); }
	.cph2__fx { right: 28px; top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
	.cph2, .cph2 *, .cph2 *::before, .cph2 *::after { animation: none !important; transition: none !important; }
	.cph2__stars svg { opacity: 1; transform: none; }
	.cph2__scooter { offset-distance: 60%; }
}

/* =====================================================================================================
   rich-text: heading and a line of text (the page's h1 on the home page)
   ===================================================================================================== */
.cp-rt__in { max-width: 660px; text-align: left; }
.cp-rt--w-xxs .cp-rt__in { max-width: 300px; }
.cp-rt--w-xs .cp-rt__in { max-width: 420px; }
.cp-rt--w-s .cp-rt__in { max-width: 540px; }
.cp-rt--w-l .cp-rt__in { max-width: 840px; }
.cp-rt--w-l1 .cp-rt__in { max-width: 1080px; }
.cp-rt--w-l2 .cp-rt__in { max-width: 1380px; }
.cp-rt--w-xl .cp-rt__in { max-width: none; }
.cp-rt--m-center .cp-rt__in { text-align: center; margin-inline: auto; }
.cp-rt__in > * + * { margin-top: 6px; }
.cp-rt__h { margin: 0; line-height: 1.26; letter-spacing: -.009em; font-weight: 400; color: #16202b; text-wrap: wrap; }
.cp-rt__cap { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #6b7280; }
.cp-rt__text { line-height: 1.5; color: #2b333d; }
.cp-rt__text p + p { margin-top: .8em; }
.cp-rt__text a { color: #003662; text-underline-offset: 3px; }
.cp-rt__btns { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 10px; }
.cp-rt--m-center .cp-rt__btns { justify-content: center; }
.cp-rt__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 8px; border: 1px solid #003662; color: #003662; font-size: 14px; font-weight: 600; text-decoration: none; }
.cp-rt__btn--primary { background: var(--cp-action, #d9480f); border-color: var(--cp-action, #d9480f); color: #fff; }
.cp-rt__btn--primary:hover { background: var(--cp-action-hover, #bf3f0c); border-color: var(--cp-action-hover, #bf3f0c); }
.cp-rt__btn--secondary:hover { background: #eef2f6; }
.cp-rt__html iframe { max-width: 100%; }
@media (max-width: 749px) {
	/* the shop's phone rules: one compact heading size and smaller text */
	.cp-rt .cp-rt__h { font-size: 21px; line-height: 1.25; letter-spacing: -.01em; }
	.cp-rt .cp-rt__text { font-size: 14px; }
	.cp-rt__in { padding-bottom: 12px; }
}
@media (min-width: 750px) {
	.cp-rt__in { text-align: left; margin-inline: 0; }
	.cp-rt--center .cp-rt__in { text-align: center; }
	.cp-rt--pos-center .cp-rt__in { margin-inline: auto; }
	.cp-rt--m-center .cp-rt__btns { justify-content: flex-start; }
	.cp-rt--center .cp-rt__btns { justify-content: center; }
	.cp-rt__in > * + * { margin-top: 16px; }
	.cp-rt__text { line-height: 1.8; }
}

/* =====================================================================================================
   icons-with-text: the facts strip. Phone: a tight 2 x 2 grid of small cards.
   ===================================================================================================== */
.cp-iwt { padding-block: 12px; }
.cp-iwt__list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cp-iwt__item { min-width: 0; }
.cp-iwt__box { display: flex; align-items: center; gap: 9px; height: 100%; padding: 9px 10px; background: #fff; border: 1px solid #e6e9ee; border-radius: 12px; color: inherit; text-decoration: none; text-align: left; }
.cp-iwt__icon { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; color: var(--iwt-ink, currentColor); }
.cp-iwt__icon--round { border-radius: 50%; background: var(--iwt-bg, #f7f8fa); }
.cp-iwt__icon svg { width: 20px; height: 20px; }
.cp-iwt__words { display: block; min-width: 0; }
.cp-iwt__title { display: block; line-height: 1.25; font-weight: 600; color: #16202b; }
.cp-iwt__title strong { font-weight: 700; }
.cp-iwt__text { display: block; margin-top: 1px; line-height: 1.3; color: #6b7280; }
a.cp-iwt__box:hover .cp-iwt__title { text-decoration: underline; text-underline-offset: 3px; }
.cp-count { display: inline-block; font-variant-numeric: tabular-nums; text-align: inherit; }
@media (max-width: 749px) {
	/* the live grid sits 1px in from the page edge on each side */
	.cp-iwt__list { padding-inline: 1px; }
	.cp-iwt .cp-iwt__title { font-size: 12.5px; }
	.cp-iwt .cp-iwt__text { font-size: 11px; }
}
@media (min-width: 750px) {
	.cp-iwt { padding-block: var(--iwt-pad, 10px); }
	.cp-iwt__list { grid-template-columns: repeat(var(--iwt-cols, 4), minmax(0, 1fr)); gap: 16px; }
	.cp-iwt__box { padding: 0; background: none; border: 0; border-radius: 0; gap: 12px; align-items: flex-start; }
	.cp-iwt__icon { width: auto; height: auto; }
	.cp-iwt__icon--round { width: calc(var(--iwt-icon, 28px) + 22px); height: calc(var(--iwt-icon, 28px) + 22px); }
	.cp-iwt__icon svg { width: var(--iwt-icon, 28px); height: var(--iwt-icon, 28px); }
	.cp-iwt__title { line-height: 1.26; font-weight: 400; }
	.cp-iwt__text { margin-top: 4px; line-height: 1.8; color: #2b333d; }
	.cp-iwt--above .cp-iwt__box { flex-direction: column; gap: 12px; }
	.cp-iwt--center .cp-iwt__box { align-items: center; text-align: center; }
	/* icon beside the words: the pair sits in the middle of its column */
	.cp-iwt--beside .cp-iwt__box { justify-content: center; gap: 20px; }
	.cp-iwt--beside .cp-iwt__words { padding-top: 3px; }
	/* the live strip set to scroll on phones runs the full width on wide screens */
	.cp-iwt--wide .cp-pw { max-width: none; padding-inline: 0; }
}

/* =====================================================================================================
   cp-for-you (ours): "Picked for you", shown by the script to returning shoppers only
   ===================================================================================================== */
.cp-fy { padding: var(--fy-pt-m, 24px) 0 var(--fy-pb-m, 24px); background: var(--fy-bg, #fff); }
.cp-fy__head { margin: 0 0 12px; }
.cp-fy__title { margin: 0; font-size: 21px; font-weight: 400; line-height: 1.22; letter-spacing: -.01em; color: #16202B; text-wrap: wrap; }
.cp-fy__title em { font-style: normal; color: var(--fy-accent, #003662); }
.cp-fy__sub { margin: 6px 0 0; font-size: 13px; color: #6B7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-fy__sub a { color: var(--fy-accent, #003662); }
.cp-fy .cp-fy__grid { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 10px; scrollbar-width: none; touch-action: pan-x pan-y; margin: 0; padding: 2px 0 6px; }
.cp-fy .cp-fy__grid::-webkit-scrollbar { display: none; }
.cp-fy .cp-fy__grid > li { flex: 0 0 clamp(128px, 35vw, 158px); width: clamp(128px, 35vw, 158px); max-width: 158px; min-width: 0; }
@media (min-width: 750px) {
	.cp-fy { padding: var(--fy-pt, 48px) 0 var(--fy-pb, 48px); }
	.cp-fy__head { margin-bottom: 22px; }
	.cp-fy__title { font-size: var(--fy-hs, 40px); line-height: 1.15; letter-spacing: -.011em; }
	.cp-fy__sub { font-size: 15px; white-space: normal; }
	.cp-fy .cp-fy__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; overflow: visible; margin: 0; padding: 0; }
	.cp-fy .cp-fy__grid > li { width: auto; max-width: none; }
}
@media (min-width: 990px) {
	.cp-fy .cp-fy__grid { grid-template-columns: repeat(var(--fy-cols, 4), minmax(0, 1fr)); }
}

/* =====================================================================================================
   cp-pet-chips (ours): picture tiles. Phone: rows that scroll sideways.
   ===================================================================================================== */
.cp-pet-chips { background: var(--chips-bg, #fff); color: var(--chips-ink, #16202B); padding: var(--chips-pt-m, 24px) 0 var(--chips-pb-m, 24px); }
.cp-chips__inner { padding-top: 18px; padding-bottom: 14px; }
.cp-chips__head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 0 0 12px; }
.cp-chips__title { margin: 0; color: inherit; font-size: 21px; font-weight: var(--chips-hw, 400); line-height: 1.22; letter-spacing: -.01em; text-wrap: wrap; }
.cp-chips__title em { font-style: normal; color: var(--chips-accent, #003662); }
.cp-chips__viewall { font-size: var(--chips-vs, 15px); font-weight: 600; color: var(--chips-link, #003662); text-decoration: none; }
.cp-chips__viewall:hover { text-decoration: underline; }
.cp-chips__list { list-style: none; margin: 0; padding: 2px 0 6px; display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 78px; gap: 12px 10px; overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scroll-snap-type: x proximity; scrollbar-width: none; }
.cp-chips__list::-webkit-scrollbar { display: none; }
/* a short list (six or fewer) is one row */
.cp-chips--short .cp-chips__list { grid-template-rows: auto; grid-auto-columns: 92px; }
.cp-chips__item { min-width: 0; scroll-snap-align: start; }
.cp-chips__link { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.cp-chips__media { display: block; width: 100%; max-width: var(--chips-max, 180px); aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: var(--chips-tint, #F5F5F5); transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; }
.cp-chips__media img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .28s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
/* product shots come on white, so they must sit INSIDE the tint, not cover it */
.cp-chips--contain .cp-chips__media img { object-fit: contain; padding: var(--chips-inset, 12%); box-sizing: border-box; mix-blend-mode: multiply; }
/* "left" label setting: the tile fills its column; the words stay centred, as the live page shows them */
.cp-chips--left .cp-chips__link { align-items: stretch; }
.cp-chips--left .cp-chips__media { max-width: none; }
.cp-chips__label { margin-top: 6px; color: var(--chips-label, inherit); font-size: 11.5px; font-weight: var(--chips-lw, 600); text-align: center; line-height: 1.25; }
.cp-chips__sub { margin-top: 1px; font-size: 10.5px; color: var(--chips-sub, #6B7280); text-align: center; line-height: 1.2; }
.cp-chips__link:active .cp-chips__media { transform: scale(.96); }
.cp-chips__link:active .cp-chips__media img { transform: scale(1.06); }
@media (hover: hover) {
	.cp-chips--lift .cp-chips__link:hover .cp-chips__media { transform: translateY(-4px); }
	.cp-chips--tint .cp-chips__link:hover .cp-chips__media { background-color: var(--chips-hover, #EEF2F6); }
	.cp-chips__link:hover .cp-chips__media { box-shadow: 0 10px 24px rgba(22, 32, 43, .10); }
	.cp-chips__link:hover .cp-chips__media img { transform: scale(1.09) rotate(-2deg); }
}
@media (min-width: 750px) {
	.cp-pet-chips { padding: var(--chips-pt, 48px) 0 var(--chips-pb, 48px); }
	.cp-chips__inner { padding-top: 0; padding-bottom: 0; }
	.cp-chips__head { margin-bottom: var(--chips-headgap, 24px); }
	.cp-chips__title { font-size: var(--chips-hs, 36px); line-height: 1.15; letter-spacing: -.011em; }
	.cp-chips__list, .cp-chips--short .cp-chips__list { margin: 0; padding: 0; grid-auto-flow: row; grid-template-rows: none; grid-auto-columns: auto; grid-template-columns: repeat(var(--chips-cols-t, 4), minmax(0, 1fr)); gap: var(--chips-gap, 24px); overflow: visible; }
	.cp-chips__media { border-radius: var(--chips-shape, 50%); }
	.cp-chips__label { margin-top: 0; font-size: var(--chips-ls, 16px); }
	.cp-chips__sub { margin-top: -4px; font-size: var(--chips-ss, 13px); line-height: 1.3; }
}
@media (min-width: 990px) {
	.cp-chips__list, .cp-chips--short .cp-chips__list { grid-template-columns: repeat(var(--chips-cols, 4), minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
	.cp-chips__link .cp-chips__media, .cp-chips__link .cp-chips__media img { transition: none !important; transform: none !important; }
}

/* =====================================================================================================
   section-tabs: heading, text and the switch for the rows that follow
   ===================================================================================================== */
.cp-tabs { padding-top: 14px; padding-bottom: 6px; }
.cp-tabs__head { margin-bottom: 22px; }
.cp-tabs--m-center .cp-tabs__head { text-align: center; }
.cp-tabs__title { margin: 0; line-height: 1.26; letter-spacing: -.009em; font-weight: 400; color: #16202b; text-wrap: wrap; }
.cp-tabs__text { margin-top: 4px; line-height: 1.8; color: #2b333d; }
.cp-tabs__text a { color: #003662; }
.cp-tabs__list { display: none; }
.cp-tabs__tab { appearance: none; border: 0; background: none; margin: 0; font: inherit; color: inherit; cursor: pointer; }
@media (max-width: 749px) {
	.cp-tabs .cp-tabs__title { font-size: 21px; line-height: 1.22; letter-spacing: -.01em; }
	.cp-tabs .cp-tabs__text { font-size: 13.5px; line-height: 1.45; }
}
@media (min-width: 750px) {
	.cp-tabs.cp-pt-0 { padding-top: 0; }
	.cp-tabs.cp-pt-h { padding-top: 20px; }
	.cp-tabs.cp-pt-s { padding-top: 40px; }
	.cp-tabs.cp-pt-l { padding-top: 60px; }
	.cp-tabs.cp-pb-0 { padding-bottom: 0; }
	.cp-tabs.cp-pb-h { padding-bottom: 20px; }
	.cp-tabs.cp-pb-s { padding-bottom: 40px; }
	.cp-tabs__head { margin-bottom: 30px; text-align: left; }
	.cp-tabs--center .cp-tabs__head { text-align: center; }
	.cp-tabs__text { margin-top: 6px; }
	.cp-tabs__list { display: inline-flex; flex-wrap: wrap; white-space: nowrap; }
	.cp-tabs--tabs-center .cp-pw { text-align: center; }
	.cp-tabs--tabs-center .cp-tabs__head { text-align: inherit; }
	.cp-tabs__list--switch { gap: .4em; border: .2em solid transparent; border-radius: 8px; background: rgba(43, 51, 61, .05); color: #2b333d; }
	.cp-tabs__list--switch .cp-tabs__tab { padding: .32em 1.2em; border-radius: 8px; line-height: 1.8; transition: background-color .2s; }
	.cp-tabs__list--switch .cp-tabs__tab:hover { background: rgba(255, 255, 255, .7); }
	.cp-tabs__list--switch .cp-tabs__tab[aria-selected="true"] { background: #fff; box-shadow: 0 2px 10px rgba(43, 51, 61, .03); }
	.cp-tabs__list--simple { gap: 1.5em; font-weight: 500; }
	.cp-tabs__list--simple .cp-tabs__tab { padding: 0; color: rgba(43, 51, 61, .6); text-decoration-thickness: .1em; transition: color .2s; }
	.cp-tabs__list--simple .cp-tabs__tab:hover { text-decoration: underline; }
	.cp-tabs__list--simple .cp-tabs__tab[aria-selected="true"] { color: #2b333d; text-decoration: underline; }

	/* one of the following sections shows at a time: data-active is the chosen tab, data-count how many follow */
	.cp-tabs:not([data-active="0"]):not([data-count="0"]):not([data-count="1"]) + *,
	.cp-tabs:not([data-active="1"]):not([data-count="0"]):not([data-count="1"]) + * + *,
	.cp-tabs:is([data-count="3"], [data-count="4"]):not([data-active="2"]) + * + * + *,
	.cp-tabs[data-count="4"]:not([data-active="3"]) + * + * + * + * { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.cp-tabs__tab { transition: none !important; }
}

/* =====================================================================================================
   product rows (featured-collection, recently-viewed) and the article row (featured-blog)
   ===================================================================================================== */
.cp-fc { padding-top: 14px; padding-bottom: 6px; }
.cp-fc__head { margin-bottom: 14px; }
.cp-fc--center .cp-fc__head { text-align: center; }
.cp-fc__title, .cp-fb__title { margin: 0; line-height: 1.26; letter-spacing: -.009em; font-weight: 400; color: #16202b; text-wrap: wrap; }
.cp-fc__text, .cp-fb__text { margin-top: 4px; line-height: 1.45; color: #2b333d; }
.cp-fc__text a, .cp-fb__text a { color: #003662; text-underline-offset: 3px; }
.cp-fc__all { display: flex; width: fit-content; align-items: center; gap: 6px; line-height: 1.8; color: #003662; text-decoration: none; }
.cp-fc__all:hover { text-decoration: underline; text-underline-offset: 3px; }
.cp-fc__all:hover .cp-arrow { transform: translateX(3px); }
.cp-fc--center .cp-fc__all { margin-inline: auto; }
.cp-fc__text + .cp-fc__all { margin-top: 10px; }

.cp-hrowwrap { position: relative; }
.cp-hrow.cp-grid, .cp-fb__list { display: flex; grid-template-columns: none; gap: 16px; margin: 0; padding: 8px var(--cp-pw) 36px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--cp-pw); scrollbar-width: none; touch-action: pan-x pan-y; }
.cp-hrow.cp-grid::-webkit-scrollbar, .cp-fb__list::-webkit-scrollbar { display: none; }
.cp-hrow.cp-grid > li { flex: 0 0 clamp(128px, 35vw, 158px); width: clamp(128px, 35vw, 158px); max-width: 158px; min-width: 0; scroll-snap-align: start; }
.cp-hrow:focus-visible, .cp-fb__list:focus-visible, .cp-rv__track:focus-visible { outline: 2px solid #003662; outline-offset: -2px; }
.cp-hrow__more a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; min-height: 160px; padding: 16px; border-radius: 20px; background: #f7f8fa; color: #16202b; text-align: center; text-decoration: none; font-size: 15px; }
.cp-hrow__more-link { display: inline-flex; align-items: center; gap: 6px; color: #003662; }
.cp-hrow__more--wide { display: none; }
.cp-hrow__btn { position: absolute; top: calc(50% - 22px); z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: #fff; color: #16202b; box-shadow: 0 2px 10px rgba(22, 32, 43, .14); cursor: pointer; }
.cp-hrow__btn[hidden] { display: none; }
.cp-hrow__btn--prev { left: 8px; }
.cp-hrow__btn--next { right: 8px; }
.cp-hrow__btn:hover { color: #003662; }
.cp-hrow__track { position: relative; height: 3px; margin: 0 38px 14px; }
.cp-hrow__track::before { content: ""; position: absolute; inset: 1px 0; background: rgba(22, 32, 43, .18); }
.cp-hrow__track i { position: absolute; top: 0; bottom: 0; left: 0; width: 25%; background: #2b333d; border-radius: 2px; }
.cp-hrowwrap:not(.is-scroll) .cp-hrow__track { visibility: hidden; }
/* On a phone used by touch the rows are moved by finger: no buttons and no position bar (measured on live, 6 Oct 2026).
   A narrow window with a mouse keeps both. */
@media (max-width: 749.98px) and (hover: none) and (pointer: coarse) {
	.cp-hrow__btn, .cp-hrow__track { display: none; }
}
/* "Recently viewed" with only a few products (measured on live, 6 Oct 2026): on phones one product fills the row and
   two are 158 px each, three or more are the usual sliding row; from 990 px up to four keep the full column width. */
@media (max-width: 749.98px) {
	.cp-recent .cp-hrow.cp-grid > li:only-child { flex-basis: 100%; width: 100%; max-width: none; }
	.cp-recent .cp-hrow.cp-grid > li:first-child:nth-last-child(2), .cp-recent .cp-hrow.cp-grid > li:first-child:nth-last-child(2) ~ li { flex-basis: 158px; width: 158px; }
}
@media (min-width: 990px) {
	.cp-recent.cp-fc--carousel .cp-hrow.cp-grid:not(:has(> li:nth-child(5))) > li { flex-basis: calc((100% - 48px) / 4); }
	/* nothing to slide: no room kept for the position bar, the cards sit 60 px above the footer as on live */
	.cp-recent.cp-fc--carousel .cp-hrowwrap:not(.is-scroll) .cp-hrow.cp-grid { padding: 4px 0 20px; }
	.cp-recent.cp-fc--carousel .cp-hrowwrap:not(.is-scroll) .cp-hrow__track { display: none; }
}

@media (max-width: 749px) {
	.cp-fc .cp-fc__title, .cp-fb .cp-fb__title { font-size: 21px; line-height: 1.22; letter-spacing: -.01em; }
	.cp-fc .cp-fc__text { font-size: 13.5px; }
	.cp-fb .cp-fb__text { margin-top: 2px; font-size: 14px; line-height: 1.5; }
	.cp-fb .cp-fb__list { padding-bottom: 40px; }
	/* the rows under the bestseller switch carry small bold headings on phones */
	.cp-fc--panel .cp-fc__title { font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
}
@media (min-width: 750px) {
	.cp-fc.cp-pt-0 { padding-top: 0; }
	.cp-fc.cp-pt-h { padding-top: 20px; }
	.cp-fc.cp-pt-s { padding-top: 40px; }
	.cp-fc.cp-pt-l { padding-top: 60px; }
	.cp-fc.cp-pb-0 { padding-bottom: 0; }
	.cp-fc.cp-pb-h { padding-bottom: 20px; }
	.cp-fc.cp-pb-s { padding-bottom: 40px; }
	.cp-fc.cp-pb-l { padding-bottom: 60px; }
	.cp-fc__head { margin-bottom: 30px; }
	.cp-fc__text, .cp-fb__text { margin-top: 4px; line-height: 1.8; }
	/* the tab above already names the row */
	.cp-fc--panel .cp-fc__title { display: none; }
	.cp-hrow.cp-grid, .cp-fb__list { max-width: calc(var(--cp-content, 1320px) + 2 * var(--cp-pw)); margin-inline: auto; padding: 0 var(--cp-pw); scroll-padding-inline: var(--cp-pw); }
	.cp-hrow.cp-grid > li { width: auto; max-width: none; }
	.cp-fc--grid .cp-hrow.cp-grid, .cp-fb--grid .cp-fb__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
	/* grid: room the live row keeps under the cards */
	.cp-fc--grid .cp-hrowwrap, .cp-fb--grid .cp-hrowwrap { margin-bottom: 21px; }
	.cp-fc--grid .cp-hrow__btn, .cp-fb--grid .cp-hrow__btn, .cp-fc--grid .cp-hrow__track, .cp-fb--grid .cp-hrow__track { display: none; }
	/* scrolling row: kept inside the page width, the next card peeking in; buttons sit on its edges, the bar below */
	.cp-fc--carousel .cp-hrowwrap, .cp-fb--carousel .cp-hrowwrap { max-width: calc(var(--cp-content, 1320px) + 2 * var(--cp-pw)); margin-inline: auto; padding-inline: var(--cp-pw); }
	.cp-fc--carousel .cp-hrow.cp-grid, .cp-fb--carousel .cp-fb__list { max-width: none; padding: 24px 0 40px; scroll-padding-inline: 0; scroll-snap-type: x mandatory; }
	.cp-fc--carousel .cp-hrow.cp-grid > li, .cp-fb--carousel .cp-fb__list > li { flex: 0 0 calc((100% - 32px - 60px) / 3); }
	.cp-hrow__more--wide { display: block; }
	.cp-hrow__more--phone { display: none; }
	.cp-hrow__btn--prev { left: max(0px, calc(var(--cp-pw) - 22px)); } /* a row outside .cp-sec has the narrow gutter: the arrow stays on the page (tester 2, 2px sideways at 1280) */
	.cp-hrow__btn--next { right: max(0px, calc(var(--cp-pw) - 22px)); }
	.cp-hrow__track { margin: 0 112px 16px; }
}
@media (min-width: 990px) {
	.cp-fc--grid .cp-hrow.cp-grid, .cp-fb--grid .cp-fb__list { grid-template-columns: repeat(var(--row-cols, 4), minmax(0, 1fr)); }
	.cp-fc--carousel .cp-hrow.cp-grid > li, .cp-fb--carousel .cp-fb__list > li { flex: 0 0 calc((100% - (var(--row-cols, 4) - 1) * 16px - 80px) / var(--row-cols, 4)); }
}

/* ---------- featured-blog cards ---------- */
.cp-fb { padding-top: 18px; padding-bottom: 14px; }
.cp-fb__head { margin-bottom: 18px; }
.cp-fb__list > li { flex: 0 0 58vw; width: 58vw; max-width: 58vw; min-width: 0; scroll-snap-align: start; }
.cp-fb__card { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: 8px; box-shadow: 0 1px 2px rgba(22, 32, 43, .05), 0 4px 14px rgba(22, 32, 43, .05); overflow: hidden; }
.cp-fb__media { display: block; margin: 20px 20px 0; aspect-ratio: 100 / 56; overflow: hidden; }
.cp-fb__media img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .4s ease; }
.cp-fb__body { display: flex; flex-direction: column; gap: 15px; flex: 1; padding: 30px 27px 25px; }
.cp-fb__name { margin: 0; font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: -.009em; color: #2b333d; text-wrap: wrap; }
.cp-fb__name a { color: inherit; text-decoration: none; }
.cp-fb__name a::after { content: ""; position: absolute; inset: 0; }
.cp-fb__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: auto; font-size: 12px; line-height: 18px; color: #6b7280; }
@media (hover: hover) {
	.cp-fb__card:hover .cp-fb__media img { transform: scale(1.03); }
	.cp-fb__card:hover .cp-fb__name a { text-decoration: underline; text-underline-offset: 3px; }
}
@media (min-width: 750px) {
	.cp-fb.cp-pt-0 { padding-top: 0; }
	.cp-fb.cp-pt-h { padding-top: 20px; }
	.cp-fb.cp-pt-s { padding-top: 40px; }
	.cp-fb.cp-pb-0 { padding-bottom: 0; }
	.cp-fb.cp-pb-h { padding-bottom: 20px; }
	.cp-fb.cp-pb-s { padding-bottom: 40px; }
	.cp-fb__head { margin-bottom: 32px; }
	.cp-fb__list > li { width: auto; max-width: none; }
	.cp-fb__media { aspect-ratio: auto; }
	.cp-fb__media img { height: auto; }
	.cp-fb__body { padding: 31px 27px 24px; gap: 16px; }
	.cp-fb__name { font-size: 19px; line-height: 1.4; }
	.cp-fb__meta { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.cp-fb__media img, .cp-arrow { transition: none !important; }
}

/* =====================================================================================================
   cp-brand-deals (ours): brand cards. Phone: two rows that scroll sideways.
   ===================================================================================================== */
.cp-brand-deals { background: var(--bd-bg, #fff); padding: var(--bd-pt-m, 24px) 0 var(--bd-pb-m, 24px); }
.cp-bd__inner { padding-top: 18px; padding-bottom: 16px; }
.cp-bd__head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 0 0 var(--bd-headgap, 24px); }
.cp-bd__title { margin: 0; color: var(--bd-ink, #16202B); font-size: 21px; font-weight: var(--bd-hw, 400); line-height: 1.22; letter-spacing: -.01em; text-wrap: wrap; }
.cp-bd__title em { font-style: normal; color: var(--bd-accent, #003662); }
.cp-bd__viewall { font-size: var(--bd-vs, 15px); font-weight: 600; color: var(--bd-link, #003662); text-decoration: none; }
.cp-bd__viewall:hover { text-decoration: underline; }
.cp-bd__list { list-style: none; margin: 0; padding: calc(var(--bd-badge-m, 54px) / 2 + 4px) 0 4px; display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 104px; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scrollbar-width: none; }
.cp-bd__list::-webkit-scrollbar { display: none; }
.cp-bd__card { position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; text-align: center; text-decoration: none; color: #fff; background: var(--bd-fill, #1A1A1A); border-radius: var(--bd-radius, 16px); padding: calc(var(--bd-badge-m, 54px) / 2 + 10px) 8px calc(var(--bd-padb, 18px) / 2); min-height: var(--bd-minh-m, 120px); transition: transform .18s ease; }
/* the circular logo badge sits over the top edge of the card */
.cp-bd__badge { position: absolute; top: calc(var(--bd-badge-m, 54px) / -2); left: 50%; transform: translateX(-50%); width: var(--bd-badge-m, 54px); height: var(--bd-badge-m, 54px); border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; padding: calc(var(--bd-badge-pad, 9px) / 2); box-sizing: border-box; border: var(--bd-ring, 4px) solid var(--bd-bg, #fff); }
.cp-bd__badge img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.cp-bd__name { font-size: var(--bd-name-m, 12px); font-weight: 600; line-height: 1.2; }
.cp-bd__offer { margin-top: 4px; font-size: var(--bd-offer-m, 13px); font-weight: 700; line-height: 1.2; }
.cp-bd__cta { display: none; margin-top: auto; padding-top: 10px; font-size: var(--bd-cta, 12px); font-weight: 600; opacity: .9; }
/* Light cards: the logo carries the brand colour, the card stays quiet. */
.cp-bd--light .cp-bd__list { padding-top: 0; }
.cp-bd__card--light { color: var(--bd-name-ink, #16202B); background: var(--bd-card, #fff); border: 1px solid var(--bd-line, #E6E9EE); padding: 12px 6px 10px; gap: 6px; min-height: 0; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.cp-bd__logo { display: flex; align-items: center; justify-content: center; width: 100%; height: var(--bd-logo-m, 40px); margin-bottom: 2px; }
.cp-bd__logo img { max-width: 82%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.cp-bd__card--light .cp-bd__name { font-size: var(--bd-name-m, 12px); font-weight: 600; }
.cp-bd__card--light .cp-bd__offer { margin-top: 2px; padding: 3px 7px; border-radius: 999px; background: var(--bd-offer-bg, #FBF3E1); color: var(--bd-offer-ink, #7A5A12); font-size: var(--bd-offer-m, 13px); font-weight: 600; line-height: 1.3; }
@media (hover: hover) {
	.cp-bd--lift .cp-bd__card:hover { transform: translateY(-4px); }
	.cp-bd__card--light:hover { border-color: var(--bd-line-h, #003662); box-shadow: 0 10px 24px -14px rgba(0, 30, 60, .35); }
}
@media (min-width: 750px) {
	.cp-brand-deals { padding: var(--bd-pt, 48px) 0 var(--bd-pb, 48px); }
	.cp-bd__inner { padding-top: 0; padding-bottom: 0; }
	.cp-bd__title { font-size: var(--bd-hs, 40px); line-height: 1.15; letter-spacing: -.011em; }
	.cp-bd__list { margin: 0; padding: calc(var(--bd-badge, 76px) / 2 + 4px) 0 0; grid-auto-flow: row; grid-template-rows: none; grid-auto-columns: auto; grid-template-columns: repeat(var(--bd-cols-t, 4), minmax(0, 1fr)); gap: var(--bd-gap, 20px); overflow: visible; }
	.cp-bd__card { padding: calc(var(--bd-badge, 76px) / 2 + 14px) 12px var(--bd-padb, 18px); min-height: var(--bd-minh, 160px); }
	.cp-bd__badge { top: calc(var(--bd-badge, 76px) / -2); width: var(--bd-badge, 76px); height: var(--bd-badge, 76px); padding: var(--bd-badge-pad, 9px); }
	.cp-bd__name { font-size: var(--bd-name, 15px); }
	.cp-bd__offer { font-size: var(--bd-offer, 17px); }
	.cp-bd__cta { display: block; }
	.cp-bd--light .cp-bd__list { padding-top: 0; }
	.cp-bd__card--light { padding: 18px 14px 16px; min-height: 0; }
	.cp-bd__logo { height: var(--bd-logo, 64px); margin-bottom: 6px; }
	.cp-bd__card--light .cp-bd__name { font-size: var(--bd-name, 15px); }
	.cp-bd__card--light .cp-bd__offer { padding: 4px 10px; font-size: var(--bd-offer, 17px); }
}
@media (min-width: 990px) {
	.cp-bd__list { grid-template-columns: repeat(var(--bd-cols, 6), minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
	.cp-bd__card { transition: none !important; transform: none !important; }
}

/* =====================================================================================================
   cp-google-reviews (ours): rating summary beside a rail of reviews
   ===================================================================================================== */
.cp-rv { background: var(--rv-bg, #fff); color: var(--rv-ink, #2B333D); padding: var(--rv-pt-m, 28px) 0 var(--rv-pb-m, 28px); }
.cp-rv__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; padding-top: 18px; padding-bottom: 16px; }
.cp-rv__summary { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.cp-rv__title { grid-column: 1 / -1; margin: 0; color: var(--rv-head, #16202B); font-size: 21px; font-weight: var(--rv-hw, 400); line-height: 1.22; letter-spacing: -.01em; text-wrap: wrap; }
.cp-rv__title em { font-style: normal; color: var(--rv-accent, #003662); }
.cp-rv__score { display: flex; align-items: center; gap: 14px; margin: 0; }
.cp-rv__num { font-size: 30px; font-weight: 300; line-height: 1; letter-spacing: -.03em; color: var(--rv-head, #16202B); }
.cp-rv__meta { display: flex; flex-direction: column; gap: 4px; }
.cp-rv__stars { display: inline-flex; gap: 2px; }
.cp-rv__stars svg { width: 18px; height: 18px; fill: var(--rv-star, #C49430); }
.cp-rv__stars--sm svg { width: 15px; height: 15px; }
.cp-rv__count { font-size: 14px; color: var(--rv-mut, #6B7280); }
.cp-rv__actions { display: flex; align-items: center; flex-wrap: nowrap; justify-content: flex-end; gap: 10px; margin: 0; }
.cp-rv__btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--rv-link, #003662); color: var(--rv-link, #003662); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.cp-rv__btn:hover { background: var(--rv-link, #003662); color: #fff; }
.cp-rv__link { display: none; font-size: 14px; font-weight: 600; color: var(--rv-link, #003662); text-decoration: none; }
.cp-rv__link:hover { text-decoration: underline; }
.cp-rv__rail { min-width: 0; }
.cp-rv__track { list-style: none; margin: 0; padding: 2px 2px 4px; display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.cp-rv__track::-webkit-scrollbar { display: none; }
.cp-rv__card { scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; width: 72vw; max-width: 72vw; background: var(--rv-card, #fff); border: 1px solid var(--rv-line, #E6E9EE); border-radius: var(--rv-radius, 16px); padding: 14px; }
.cp-rv__text { margin: 0; padding: 0; border: 0; font-style: normal; quotes: none; font-size: 13.5px; line-height: 1.45; color: var(--rv-ink, #2B333D); display: -webkit-box; -webkit-line-clamp: var(--rv-clamp, 6); -webkit-box-orient: vertical; overflow: hidden; }
.cp-rv__who { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.cp-rv__avatar { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--rv-av-bg, #F1F4F7); color: var(--rv-av-ink, #003662); font-size: 15px; font-weight: 600; }
.cp-rv__whotext { display: flex; flex-direction: column; min-width: 0; }
.cp-rv__name { font-size: 14px; font-weight: 600; color: var(--rv-head, #16202B); }
.cp-rv__date { font-size: 12px; color: var(--rv-mut, #6B7280); }
.cp-rv__nav { display: none; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.cp-rv__arrow { width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--rv-line, #E6E9EE); background: var(--rv-card, #fff); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .15s ease; }
.cp-rv__arrow:hover { border-color: var(--rv-link, #003662); }
.cp-rv__arrow svg { width: 18px; height: 18px; fill: none; stroke: var(--rv-head, #16202B); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* review stars fill, one after another, when a card arrives (the script adds cp-anim and is-in) */
.cp-rv.cp-anim .cp-rv__card .cp-rv__stars svg { opacity: .25; transform: scale(.7); transition: opacity .3s ease, transform .35s cubic-bezier(.2, 1.6, .4, 1); }
.cp-rv.cp-anim .cp-rv__card.is-in .cp-rv__stars svg { opacity: 1; transform: none; }
.cp-rv.cp-anim .cp-rv__card.is-in .cp-rv__stars svg:nth-child(2) { transition-delay: .08s; }
.cp-rv.cp-anim .cp-rv__card.is-in .cp-rv__stars svg:nth-child(3) { transition-delay: .16s; }
.cp-rv.cp-anim .cp-rv__card.is-in .cp-rv__stars svg:nth-child(4) { transition-delay: .24s; }
.cp-rv.cp-anim .cp-rv__card.is-in .cp-rv__stars svg:nth-child(5) { transition-delay: .32s; }
@media (min-width: 750px) {
	.cp-rv { padding: var(--rv-pt, 56px) 0 var(--rv-pb, 56px); }
	.cp-rv__inner { padding-top: 0; padding-bottom: 0; }
	.cp-rv__summary { display: block; margin-bottom: 0; }
	.cp-rv__title { margin: 0 0 20px; font-size: var(--rv-hs, 40px); line-height: 1.15; letter-spacing: -.011em; }
	.cp-rv__num { font-size: var(--rv-score, 64px); }
	.cp-rv__actions { flex-wrap: wrap; justify-content: flex-start; gap: 16px; margin-top: 24px; }
	.cp-rv__btn { min-height: 0; padding: 11px 18px; font-size: 14px; }
	.cp-rv__link { display: inline; }
	.cp-rv__track { grid-auto-columns: calc((100% - var(--rv-gap, 20px)) / 2); gap: var(--rv-gap, 20px); }
	.cp-rv__card { width: auto; max-width: none; padding: 22px 22px 20px; }
	.cp-rv__text { font-size: var(--rv-ts, 15px); line-height: 1.55; }
	.cp-rv__nav { display: flex; }
}
@media (min-width: 990px) {
	.cp-rv__inner { grid-template-columns: minmax(240px, var(--rv-sum, 320px)) minmax(0, 1fr); gap: 48px; }
	.cp-rv__track { grid-auto-columns: calc((100% - var(--rv-gap, 20px) * 2) / 3); }
}
@media (prefers-reduced-motion: reduce) {
	.cp-rv *, .cp-rv *::before { transition: none !important; }
}

/* =====================================================================================================
   cp-promo (ours): the Birthday Club band. Shares the look of the service sections (cp-svc); what it
   needs of that look is repeated here so the band stands on its own.
   ===================================================================================================== */
.cp-sec.cp-promo { --ink: #16202B; --txt: #2B333D; --mut: #6B7280; --navy: #003662; --navy-h: #002849; --mist: #F7F8FA; --tile: #EEF2F6; --line: #E6E9EE; --gold: #C49430; color: var(--txt); font-size: 15px; line-height: 1.6; padding: 18px 0; background: #fff; }
.cp-sec.cp-promo.cp-svc--mist { background: var(--mist); }
.cp-promo *, .cp-promo *::before, .cp-promo *::after { box-sizing: border-box; }
.cp-promo p { margin: 0; }
.cp-promo__card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px; }
.cp-promo__card--plain { grid-template-columns: minmax(0, 1fr); }
.cp-svc--mist .cp-promo__card { border-color: transparent; }
.cp-promo__img { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--tile); }
.cp-promo__img img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 60% 40%; display: block; }
.cp-promo .cp-svc__eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); margin: 0 0 6px; }
.cp-promo .cp-promo__h { font-size: 19px; line-height: 1.2; font-weight: 400; letter-spacing: -.01em; color: var(--ink); margin: 0; text-transform: none; text-wrap: wrap; }
.cp-promo .cp-promo__p { margin-top: 6px; font-size: 14px; color: var(--mut); max-width: 60ch; }
.cp-promo .cp-svc__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 12px; font-size: 14.5px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; border: 1.5px solid var(--cp-action, #D9480F); background: var(--cp-action, #D9480F); color: #fff; transition: background .15s, border-color .15s, color .15s; cursor: pointer; }
.cp-promo .cp-svc__btn:hover { background: var(--cp-action-hover, #BF3F0C); border-color: var(--cp-action-hover, #BF3F0C); color: #fff; }
.cp-promo .cp-svc__btn--ghost { background: #fff; color: var(--navy); border-color: #C9D3DE; }
.cp-promo .cp-svc__btn--ghost:hover { background: var(--tile); color: var(--navy); border-color: var(--navy); }
.cp-promo .cp-svc__btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.cp-promo .cp-promo__btn { grid-column: 1 / -1; min-height: 44px; }
@media (min-width: 750px) {
	.cp-sec.cp-promo { font-size: 16px; padding: 28px 0; }
	.cp-promo__card { grid-template-columns: 220px minmax(0, 1fr) auto; gap: 28px; border-radius: 20px; padding: 16px 28px 16px 16px; }
	.cp-promo__card--plain { grid-template-columns: minmax(0, 1fr) auto; padding-left: 28px; }
	.cp-promo__img { aspect-ratio: 16 / 10; border-radius: 14px; }
	.cp-promo .cp-promo__h { font-size: 24px; }
	.cp-promo .cp-promo__p { font-size: 15.5px; }
	.cp-promo .cp-svc__btn { padding: 0 22px; font-size: 15px; }
	.cp-promo .cp-promo__btn { grid-column: auto; min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
	.cp-promo * { transition: none !important; }
}

/* =====================================================================================================
   cp-store-proof (ours): "a real shop" band
   ===================================================================================================== */
.cp-sp { background: var(--sp-bg, #fff); color: var(--sp-ink, #16202B); padding: var(--sp-pt-m, 36px) 0 var(--sp-pb-m, 36px); }
.cp-sp__inner { display: grid; grid-template-columns: 1fr; gap: var(--sp-gap-m, 28px); align-items: center; padding-top: 22px; padding-bottom: 22px; }
.cp-sp__eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-eyebrow, #6B7280); }
.cp-sp__heading { margin: 0 0 16px; color: inherit; font-size: var(--sp-hs-m, 28px); font-weight: var(--sp-hw, 400); line-height: 1.12; letter-spacing: -.011em; text-wrap: wrap; }
/* the brand emphasis: one word in the accent colour, upright, same weight */
.cp-sp__heading em { font-style: normal; color: var(--sp-accent, #003662); }
.cp-sp__body { font-size: 14px; line-height: 1.5; }
.cp-sp__body p { margin: 0 0 10px; }
.cp-sp__facts { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.cp-sp__facts li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; }
.cp-sp__facts svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; color: var(--sp-icon, #003662); }
.cp-sp__buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cp-sp__btn { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 auto; min-height: 44px; text-align: center; text-decoration: none; font-size: 14px; font-weight: 600; padding: 12px 22px; border-radius: var(--sp-btn-r, 8px); transition: filter .15s ease; }
.cp-sp__btn:hover { filter: brightness(.94); }
/* one action colour on the live shop: the primary button is orange whatever the section's own colour says */
.cp-sp__btn--primary { background: var(--cp-action, #D9480F); color: var(--sp-btn-ink, #fff); border: 1px solid transparent; }
.cp-sp__btn--secondary { background: transparent; color: var(--sp-ink, #16202B); border: 1px solid var(--sp-btn-line, #16202B); }
.cp-sp__media { display: grid; grid-template-columns: 1.5fr 1fr; gap: 6px; margin-top: 16px; }
.cp-sp__pair { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 6px; margin: 0; }
.cp-sp__fig { margin: 0; }
.cp-sp__fig img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: var(--sp-radius, 24px); }
.cp-sp__fig--main, .cp-sp__fig--main img { height: 100%; }
.cp-sp__pair img { aspect-ratio: 16 / 10; height: auto; }
@media (min-width: 750px) {
	.cp-sp__inner { padding-top: 0; padding-bottom: 0; }
	.cp-sp__eyebrow { margin-bottom: 12px; font-size: var(--sp-eye-fs, 12px); }
	.cp-sp__body { font-size: var(--sp-body-m, 15px); line-height: 1.7; }
	.cp-sp__facts { margin-top: 20px; gap: 10px; }
	.cp-sp__facts li { font-size: var(--sp-body-m, 15px); }
	.cp-sp__buttons { margin-top: 26px; }
	.cp-sp__btn { display: inline-block; min-height: 0; font-size: var(--sp-btn-fs, 15px); }
	.cp-sp__media { grid-template-columns: 1fr; gap: var(--sp-img-gap, 14px); margin-top: 0; }
	.cp-sp__pair { grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: var(--sp-img-gap, 14px); }
	.cp-sp__fig--main, .cp-sp__fig--main img { height: auto; }
	.cp-sp__fig--main img { aspect-ratio: var(--sp-ratio, 16 / 9); }
	.cp-sp__pair img { aspect-ratio: 4 / 3; }
}
@media (min-width: 990px) {
	.cp-sp { padding: var(--sp-pt, 72px) 0 var(--sp-pb, 72px); }
	.cp-sp__inner { grid-template-columns: var(--sp-text, 42fr) var(--sp-media, 58fr); gap: var(--sp-gap, 56px); }
	.cp-sp--flip .cp-sp__text { order: 2; }
	.cp-sp__heading { font-size: var(--sp-hs, 40px); }
	.cp-sp__body, .cp-sp__facts li { font-size: var(--sp-body, 16px); }
	.cp-sp__btn { flex: 0 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
	.cp-sp__btn { transition: none !important; }
}

/* =====================================================================================================
   W9 (27 Oct 2026): ONE content width and ONE section title on every page that uses these sections
   ===================================================================================================== */
@media (min-width: 990px) {
	.cp-sec { --cp-pw: var(--cp-cw-gutter, 20px); }
	.cp-pw { max-width: calc(var(--cp-content, 1320px) + 2 * var(--cp-pw)); }
}
/* the product and article rows take the one title: compact and bold, "See all" on the same line */
.cp-fc .cp-fc__head, .cp-fb .cp-fb__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; margin-bottom: 12px; }
.cp-fc .cp-fc__head > *, .cp-fb .cp-fb__head > * { grid-column: 1 / -1; }
.cp-fc .cp-fc__head > .cp-fc__title, .cp-fb .cp-fb__head > .cp-fb__title { grid-column: 1; grid-row: 1; }
.cp-fc .cp-fc__head > .cp-fc__all, .cp-fb .cp-fb__head > .cp-fc__all { grid-column: 2; grid-row: 1; }
.cp-fc .cp-fc__title, .cp-fb .cp-fb__title { font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.cp-fc .cp-fc__title em, .cp-fb .cp-fb__title em { font-style: normal; color: inherit; }
.cp-fc .cp-fc__all, .cp-fb .cp-fc__all { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.cp-fc .cp-fc__text, .cp-fb .cp-fb__text { margin-top: 2px; font-size: 13px; line-height: 1.4; color: #6b7280; }
.cp-fc--center .cp-fc__head { text-align: left; }
@media (min-width: 990px) {
	.cp-fc .cp-fc__head, .cp-fb .cp-fb__head { margin-bottom: 18px; }
	.cp-fc .cp-fc__title, .cp-fb .cp-fb__title { font-size: 26px; }
	.cp-fc .cp-fc__all, .cp-fb .cp-fc__all { font-size: 15px; }
	.cp-fc .cp-fc__text, .cp-fb .cp-fb__text { font-size: 15px; }
}

/* =====================================================================================================
   the home page (SITE-2, mockups/website-2026-10-27: phone-header-home, desktop-header-home, kit-cards,
   reviews-block). Phone first; computers from 990px. One orange for actions, navy for structure.
   ===================================================================================================== */
.cph { background: #fff; padding-bottom: 20px; overflow-x: clip; }
.cph-sec { padding-block: 22px 8px; }
.cph-d { display: none; }
.cph-t-dog { background: #e4effa; }
.cph-t-cat { background: #fdeee3; }
.cph-t-treat { background: #fff3d6; }
.cph-t-care { background: #e6f4ec; }
.cph-t-toy { background: #efe9fb; }
/* a sideways row on phones: it runs to the screen's edges and starts at the gutter */
.cph-cats__list, .cph-kits__list, .cph-best__list.cp-grid, .cph-rv__list {
	display: flex; gap: 10px; margin: 0 calc(-1 * var(--cp-cw-gutter)); padding: 2px var(--cp-cw-gutter) 6px;
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--cp-cw-gutter); scrollbar-width: none; list-style: none;
}
.cph-cats__list::-webkit-scrollbar, .cph-kits__list::-webkit-scrollbar, .cph-best__list::-webkit-scrollbar, .cph-rv__list::-webkit-scrollbar { display: none; }
.cph-cats__list > li, .cph-kits__list > li, .cph-best__list > li, .cph-rv__list > li { flex: none; scroll-snap-align: start; }
/* positioned, so the words for screen readers inside a card (position: absolute) scroll with the row and never widen the page */
.cph-cats__list, .cph-kits__list, .cph-best__list.cp-grid, .cph-rv__list, .cph-kit { position: relative; }
.cph :focus-visible { outline: 2px solid #003662; outline-offset: 2px; }

/* W3: the intro block */
.cph-intro { padding-top: 14px; }
.cph-intro__in { padding: 14px; border-radius: 16px; background: #f7f8fa; }
.cph-intro__t { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: #16202b; }
.cph-intro__l { margin: 3px 0 12px; font-size: 13px; line-height: 1.5; color: #5b6675; }
.cph-intro__brands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.cph-brandtile { display: grid; place-items: center; height: 54px; overflow: hidden; border: 1px solid #e6e9ee; border-radius: 10px; background: #fff; color: #003662; text-decoration: none; transition: border-color .15s; }
.cph-brandtile img { width: auto; max-width: 78%; height: auto; max-height: 38px; object-fit: contain; }
.cph-brandtile:hover { border-color: #003662; }
.cph-brandtile--more { font-size: 12.5px; font-weight: 600; line-height: 1.2; text-align: center; }

/* W7: category tiles */
.cph-cat { display: block; width: 82px; text-align: center; color: #16202b; text-decoration: none; }
.cph-cat__img { display: grid; place-items: center; width: 82px; height: 82px; overflow: hidden; border-radius: 18px; }
.cph-cat__img img { width: 92%; height: 92%; object-fit: contain; }
.cph-cat__l { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.cph-cat__l .cp-sh__chev { display: none; }

/* the offer card (and grooming and boarding beside it on computers) */
.cph-offer { padding-top: 18px; }
.cph-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; height: 100%; padding: 14px 16px; border-radius: 16px; background: #ffe9db; color: #b43e05; }
.cph-card__k { margin: 0; font-size: 11.5px; font-weight: 700; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; }
.cph-card__t { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.25; color: #7a2a03; }
.cph-card__s { grid-column: 1 / -1; margin: 0; font-size: 12.5px; line-height: 1.45; color: #b43e05; }
.cph-card__tiers { grid-column: 2; grid-row: 1 / 3; display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cph-tier { min-width: 74px; padding: 8px 10px; border-radius: 10px; background: #fff; text-align: center; line-height: 1.2; }
.cph-tier b { display: block; font-size: 17px; color: #d9480f; }
.cph-tier small { font-size: 11px; color: #2b333d; }
.cph-card--delivery { background: #eef1f4; color: #2b333d; }
.cph-card--delivery .cph-card__k { color: #003662; }
.cph-card--delivery .cph-card__t { color: #16202b; }
.cph-card--delivery .cph-card__s { color: #2b333d; }
.cph-svc { display: none; }

/* W8: kit cards */
.cph-kits__list > li { width: 300px; }
.cph-kit { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e6e9ee; border-radius: 16px; background: #fff; }
.cph-kit__strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 10px; background: #f7f8fa; }
.cph-kit__th { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 10px; background: #fff; }
.cph-kit__th img { width: 84%; height: 84%; object-fit: contain; }
.cph-kit__more { position: absolute; right: 4px; bottom: 4px; min-width: 24px; padding: 2px 6px; border-radius: 999px; background: #003662; color: #fff; font-size: 11.5px; font-weight: 700; line-height: 16px; text-align: center; }
.cph-kit__body { display: flex; flex: 1; flex-direction: column; padding: 12px 14px 14px; }
.cph-kit__t { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; color: #16202b; }
.cph-kit__s { margin: 2px 0 0; font-size: 12.5px; line-height: 1.4; color: #6b7280; }
.cph-kit__list { display: -webkit-box; height: 2.9em; margin: 8px 0 0; overflow: hidden; font-size: 12.5px; line-height: 1.45; color: #2b333d; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cph-kit__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; }
.cph-kit__price { margin: 0; line-height: 1.2; white-space: nowrap; }
.cph-kit__now { font-size: 18px; font-weight: 700; color: #16202b; }
.cph-kit__was { margin-left: 4px; font-size: 13px; color: #6b7280; }
.cph-kit__save { margin: 3px 0 0; font-size: 12px; font-weight: 600; line-height: 1.3; color: #1f7a3f; }
.cph-kit__add { margin: 0; }
.cph-btn { height: 40px; padding: 0 18px; border: 0; border-radius: 8px; background: #d9480f; color: #fff; font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; }
.cph-btn:hover { background: #bf3f0c; box-shadow: none; }

/* W7: lifestyle photos (the only photo row) */
.cph-pets__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.cph-pets__list > li:nth-child(n + 3) { display: none; }
.cph-pet { position: relative; display: block; aspect-ratio: 4 / 3.3; overflow: hidden; border-radius: 16px; background: #f7f8fa; }
.cph-pet img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.cph-pet__l { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 2px; padding: 6px 10px; border-radius: 8px; background: #fff; color: #16202b; font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.cph-pet__l .cp-sh__chev { width: 15px; height: 15px; }

/* W7/W9: bestsellers (the shop's product card, laid out as drawn) */
.cph-best__list.cp-grid > li { width: 164px; }
.cph-best .cp-card { overflow: hidden; padding: 0 0 8px; border: 1px solid #e6e9ee; border-radius: 16px; box-shadow: none; }
.cph-best .cp-card__tags { min-height: 0; height: 30px; padding: 8px 8px 0; }
.cph-best .cp-card__top { margin: 4px 8px 0; border-radius: 12px; background: #f7f8fa; }
.cph-best .cp-card__media { display: grid; place-items: center; height: 140px; aspect-ratio: auto; }
.cph-best .cp-card__media img { width: auto; max-width: 86%; height: auto; max-height: 86%; mix-blend-mode: multiply; }
.cph-best .cp-card__body { flex: 1; min-height: 0; padding: 8px 8px 0; overflow: visible; }
.cph-best .cp-card__brand { margin: 0; }
.cph-best .cp-card__title { min-height: 2.6em; margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: #16202b; }
.cph-best .cp-card__opts { height: 24px; margin: 6px 0 0; overflow: hidden; }
.cph-best .cp-card__optname { display: none; }
.cph-best .cp-card__pills { flex-wrap: nowrap; gap: 4px; overflow: hidden; }
.cph-best .cp-card__pills li { flex: none; min-width: 0; }
.cph-best .cp-card__pills li:nth-child(n + 2):not(:has(.cp-card__pill--more)) { flex: 0 1 auto; }
.cph-best .cp-card__pill { padding: 2px 6px; border: 1px solid #e6e9ee; border-radius: 6px; background: #fff; color: #2b333d; font-size: 11.5px; line-height: 1.5; }
.cph-best .cp-card__pill.is-chosen { border-color: #003662; background: #fff; color: #003662; font-weight: 600; }
.cph-best .cp-card__price, .cph-best .cp-card__price--sale { margin: auto 0 0; padding-top: 8px; font-size: 15px; font-weight: 700; }
.cph-best .cp-card__was { font-size: 13px; font-weight: 400; color: #6b7280; }
.cph-best .cp-card__title:has(+ .cp-card__price) { margin-bottom: 30px; } /* no sizes: the same room, so prices line up */
.cph-best .cp-card__add, .cph-best .cp-card .cp-card__tags ~ .cp-card__add { position: relative; top: auto; right: auto; display: flex; width: auto; height: 38px; min-height: 38px; margin: 8px 8px 0; padding: 0 12px; border-radius: 8px; font-size: 13.5px; box-shadow: none; }

/* W7: brands in one line (computers) */
.cph-brands { display: none; }

/* W10: reviews, his "B" */
.cph-rv__write { position: relative; flex: none; }
.cph-rv__write > summary { list-style: none; }
.cph-rv__write > summary::-webkit-details-marker { display: none; }
.cph-rv__write[open] > summary .cp-sh__chev { transform: rotate(90deg); }
.cph-rv__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; display: grid; gap: 4px; min-width: 230px; padding: 12px; border: 1px solid #e6e9ee; border-radius: 12px; background: #fff; box-shadow: 0 12px 32px rgba(0, 20, 40, .16); }
.cph-rv__menu p { margin: 0 0 4px; font-size: 12.5px; color: #6b7280; }
.cph-rv__menu a { display: flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 8px; background: #f7f8fa; color: #003662; font-size: 14px; font-weight: 600; text-decoration: none; }
.cph-rv__menu a:hover { background: #eef1f4; }
.cph-rv__line { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: #2b333d; }
.cph-rv__line .cph-rv__stars { margin-right: 6px; vertical-align: -2px; }
.cph-rv__r { font-weight: 700; color: #003662; text-decoration: underline; text-decoration-color: rgba(0, 54, 98, .35); text-underline-offset: 3px; }
.cph-rv__r:hover { text-decoration-color: currentColor; }
.cph-rv__stars { display: inline-flex; gap: 1px; color: #f5b301; }
.cph-rv__line .cph-rv__stars svg { width: 14px; height: 14px; }
.cph-rv__stars svg { width: 16px; height: 16px; fill: currentColor; }
.cph-rv__stars--sm svg { width: 13px; height: 13px; }
.cph-rv__list > li { width: 280px; }
.cph-rq { display: flex; flex-direction: column; height: 100%; padding: 14px; border-radius: 16px; background: #f7f8fa; }
.cph-rq__text { display: -webkit-box; margin: 6px 0 8px; overflow: hidden; font-size: 13.5px; line-height: 1.5; color: #2b333d; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
.cph-rq__who { margin: auto 0 0; font-size: 12px; line-height: 1.4; color: #6b7280; }
.cph-rq__who b { font-weight: 600; color: #16202b; }

@media (hover: hover) {
	.cph-pet:hover img { transform: scale(1.03); }
	.cph-cat:hover .cph-cat__l { text-decoration: underline; text-underline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) {
	.cph-pet img, .cph-brandtile, .cph-cat__img img { transition: none !important; }
}

/* ---------- computers ---------- */
@media (min-width: 990px) {
	.cph-sec { padding-block: 44px 12px; }
	.cph-m { display: none; }
	.cph-d { display: inline; }
	/* the intro's words stay the page's h1 for readers and search; on screen the menu and the facts line say the same */
	.cph-intro { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; }
	.cph-cats__list, .cph-kits__list, .cph-best__list.cp-grid, .cph-rv__list { margin: 0; padding: 0; overflow: visible; }

	.cph-cats__list { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px; }
	.cph-cat { display: flex; flex-direction: column; width: auto; overflow: hidden; border-radius: 16px; text-align: left; }
	.cph-cat__img { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 0; }
	.cph-cat__img img { width: 86%; height: 86%; transition: transform .3s ease; }
	.cph-cat__l { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 10px 14px; background: #003662; color: #fff; font-size: 15px; }
	.cph-cat__l .cp-sh__chev { display: block; }
	.cph-cat:hover .cph-cat__img img { transform: scale(1.04); }

	.cph-offer { padding-top: 44px; }
	.cph-offer__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
	.cph-card { padding: 26px 30px; }
	.cph-card__t { font-size: 26px; }
	.cph-card__s { font-size: 14.5px; }
	.cph-tier { min-width: 120px; padding: 14px; }
	.cph-tier b { font-size: 26px; }
	.cph-tier small { font-size: 13px; }
	.cph-svc { display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; border-radius: 16px; background: #f7f8fa; }
	.cph-svc img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
	.cph-svc__t { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 22px 24px; }
	.cph-svc__h { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; color: #16202b; }
	.cph-svc__t p { margin: 0; font-size: 14px; line-height: 1.5; color: #6b7280; }
	.cph-svc__t .cph-svc__links { display: flex; gap: 18px; margin-top: 6px; }

	.cph-kits__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
	.cph-kits__list > li { width: auto; }
	.cph-kit { height: 100%; }
	.cph-kit__strip { gap: 8px; padding: 12px; }
	.cph-kit__body { padding: 16px 18px 18px; }
	.cph-kit__t { font-size: 18px; }
	.cph-kit__s, .cph-kit__list { font-size: 14px; }
	.cph-kit__now { font-size: 21px; }

	.cph-pets__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
	.cph-pets__list > li:nth-child(n + 3) { display: block; }
	.cph-pet { aspect-ratio: 4 / 3; }
	.cph-pet__l { left: 16px; bottom: 16px; padding: 9px 14px; font-size: 16px; }

	.cph-best__list.cp-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
	.cph-best__list.cp-grid > li { width: auto; }
	.cph-best .cp-card { padding-bottom: 10px; }
	.cph-best .cp-card__tags { padding: 10px 10px 0; }
	.cph-best .cp-card__top { margin: 4px 10px 0; }
	.cph-best .cp-card__media { height: 200px; }
	.cph-best .cp-card__body { padding: 10px 10px 0; }
	.cph-best .cp-card__title { font-size: 14.5px; }
	.cph-best .cp-card__price, .cph-best .cp-card__price--sale { font-size: 16.5px; }
	.cph-best .cp-card__add, .cph-best .cp-card .cp-card__tags ~ .cp-card__add { height: 40px; min-height: 40px; margin: 8px 10px 0; font-size: 14px; }

	.cph-brands { display: block; }
	.cph-brands__list { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
	.cph-brands .cph-brandtile { height: 86px; border-radius: 12px; }
	.cph-brands .cph-brandtile img { max-height: 56px; }

	.cph-rv__line { margin-bottom: 18px; font-size: 16px; }
	.cph-rv__line .cph-rv__stars svg { width: 18px; height: 18px; }
	.cph-rv__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
	.cph-rv__list > li { width: auto; }
	.cph-rv__list > li:nth-child(n + 5) { display: none; }
	.cph-rq { padding: 20px; }
	.cph-rq__text { font-size: 15px; -webkit-line-clamp: 6; }
	.cph-rq__who { font-size: 13px; }
}