html[data-pets-portal="cats"] {
    --pets-primary-hsl: 22.1212,98.0198%,60.3922%;
    --pets-light-primary-hsl: 25,100%,93%;
    /* Shared editor files may still contain the dogs palette after deployment. */
    --smplsColorPrimary-hsl: var(--pets-primary-hsl);
    --smplsColorLightPrimary-hsl: var(--pets-light-primary-hsl);
    --smplsColorDarkPrimary-hsl: 24,58%,18%;
    --smplsColorBrand-hsl: var(--pets-primary-hsl);
    --smplsColorInkPrimary-hsl: 22,89%,34%;
    --smplsColorBlack-hsl: 25,32%,10%;
    --smplsColorGray50-hsl: 30,50%,98%;
    --smplsColorGray100-hsl: 28,40%,95%;
    --smplsColorGray200-hsl: 27,28%,88%;
    --smplsColorGray300-hsl: 26,23%,79%;
    --smplsColorGray400-hsl: 25,19%,67%;
    --smplsColorGray500-hsl: 24,16%,46%;
    --smplsColorGray600-hsl: 24,20%,38%;
    --smplsColorGray700-hsl: 24,25%,28%;
    --smplsColorGray800-hsl: 24,28%,19%;
    --smplsColorGray900-hsl: 25,30%,14%;
    --smplsColorGray950-hsl: 25,32%,10%;
    --pets-tag-face: #fff0e6;
    --pets-tag-border: #ebc9af;
    /* Shared component colours resolve here; dog styles retain their own fallbacks. */
    --pets-neutral-950: #221a15;
    --pets-neutral-900: #2e221b;
    --pets-neutral-800: #3e2e24;
    --pets-neutral-700: #594335;
    --pets-neutral-600: #725847;
    --pets-neutral-500: #897263;
    --pets-neutral-400: #ac9482;
    --pets-neutral-300: #c8b6a8;
    --pets-neutral-200: #e2d6cc;
    --pets-neutral-100: #f2eae3;
    --pets-neutral-50: #fcf8f4;
    --pets-accent-950: #311a0f;
    --pets-accent-900: #46220f;
    --pets-accent-800: #643010;
    --pets-accent-700: #84390c;
    --pets-accent-600: #9b400b;
    --pets-accent-500: #aa450b;
    --pets-accent-400: #b94d12;
    --pets-accent-300: #ffab78;
    --pets-accent-200: #ffd1b2;
    --pets-accent-100: #ffe6d5;
    --pets-accent-50: #fff4ec;
    --smplsColorButtonText: #321b10;
    --smplsColorButtonTextDark: #321b10;
    --smplsColorButtonHover: #e56a23;
    --smplsColorButtonTextHover: #321b10;
    --smplsColorButtonHoverDark: #ff9a5e;
    --smplsColorButtonTextHoverDark: #321b10;
    --smplsColorLink: #a5420a;
    --smplsColorLinkDark: #ffab78;
    --smplsColorDecorationBlue: #fbe2d1;
    --smplsColorDecorationDots: #edbb9c;
    --smplsColorDecorationBlueDark: #553321;
    --smplsColorDecorationDotsDark: #8e5838;
}

html[data-pets-portal="cats"][data-theme] {
    --epHeadingUnderlineImage: url('/assets/portals/cats/underline.svg');
    --catsHeroMask: url('/assets/portals/cats/hero-organic-mask.svg');
    --catsHeroBackdrop: var(--smplsColorDecorationBlue);
}

html[data-pets-portal="cats"][data-theme="light"] {
    --blue: #a5420a;
    --light: #fff0e6;
}

html[data-pets-portal="cats"][data-theme="dark"] {
    --blue: #ffab78;
    --catsHeroBackdrop: var(--smplsColorDecorationBlueDark);
}

html[data-pets-portal="cats"][data-theme] :is(body.tags-mode #site_content, .home-tag-collection) {
    --smplsColorPrimary: hsl(var(--pets-primary-hsl));
    --smplsColorButton: hsl(var(--pets-primary-hsl));
    --smplsColorButtonDark: hsl(var(--pets-primary-hsl));
    --smplsColorButtonHover: #e56a23;
    --smplsColorButtonHoverDark: #ff9a5e;
    --smplsColorButtonText: #321b10;
    --smplsColorButtonTextDark: #321b10;
    --smplsColorLink: #a5420a;
    --smplsColorSubHeading: #a5420a;
    --blue: #a5420a;
}

html[data-pets-portal="cats"][data-theme="dark"] :is(body.tags-mode #site_content, .home-tag-collection) {
    --smplsColorLink: #ffab78;
    --smplsColorSubHeading: #ffab78;
    --blue: #ffab78;
}

html[data-pets-portal="cats"][data-theme] .btn {
    background-color: hsl(var(--smplsColorPrimary-hsl));
    color: #321b10;
}

html[data-pets-portal="cats"][data-theme] .btn:hover {
    background-color: #e56a23;
    color: #321b10;
}

html[data-pets-portal="cats"][data-theme] .btn:is(.light,.white) {
    background-color: var(--surface);
    color: var(--blue);
}

html[data-pets-portal="cats"][data-theme] .smpls-button.-underlined {
    color: var(--blue);
}

html[data-pets-portal="cats"] :is(.navinner .brand, .checkout-masthead, .footer-brand) img {
    object-fit: contain;
}

html[data-pets-portal="cats"][data-theme="dark"] .brand img {
    background: #fff7f0;
    border-radius: .5rem;
    padding: .3rem .5rem;
}

html[data-pets-portal="cats"][data-theme] .brand-hero-photo img {
    aspect-ratio: 1.08;
    object-fit: cover;
    object-position: 68% center;
    mix-blend-mode: normal;
    border-radius: 0;
    mask-image: var(--catsHeroMask);
    mask-size: 100% 100%;
    mask-position: center;
    mask-repeat: no-repeat;
}

/* Let the shared organic silhouette define photo edges instead of the oval wrapper. */
html[data-pets-portal="cats"][data-theme] .section-hero-photo .brand-hero-photo {
    border-radius: 0;
    overflow: visible;
}

/* Use the same wavy silhouette as the reference artwork. */
html[data-pets-portal="cats"][data-theme] .brand-hero-photo img[src*="/hero-tuxedo.webp"] {
    mask-image: var(--catsHeroMask);
    object-position: 72% center;
}

html[data-pets-portal="cats"][data-theme] .gallery-hero .hero-photo-caption {
    inset: auto 1.25rem 1.25rem;
    width: fit-content;
    max-width: calc(100% - 2.5rem);
    margin-inline: auto;
    padding: .8rem 1.2rem;
    border: 1px solid #ebd5c4;
    border-radius: 2rem;
    background: #fff7f0;
    color: #594335;
    box-shadow: 0 .25rem 1.25rem #3e2e2414;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .12em;
}

/* Cutout cats keep their ears and fur; the shape sits behind the whole illustration. */
html[data-pets-portal="cats"][data-theme] .brand-hero-photo:has(img:is(
    [src$="/calico-branded-tag-cutout.webp"],
    [src$="/cream-tag-cutout.webp"]
)) {
    height: auto;
    aspect-ratio: auto;
}

html[data-pets-portal="cats"][data-theme] :is(.brand-hero-photo, .brand-hero-photo picture):has(> img:is(
    [src$="/calico-branded-tag-cutout.webp"],
    [src$="/cream-tag-cutout.webp"]
)) {
    position: relative;
    isolation: isolate;
    padding-bottom: 12%;
}

html[data-pets-portal="cats"][data-theme] :is(.brand-hero-photo, .brand-hero-photo picture):has(> img:is(
    [src$="/calico-branded-tag-cutout.webp"],
    [src$="/cream-tag-cutout.webp"]
))::before,
html[data-pets-portal="cats"][data-theme] .contact-dog-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 12% 3% 2%;
    background: var(--catsHeroBackdrop);
    border-radius: 0;
    mask-image: var(--catsHeroMask);
    mask-size: 100% 100%;
    mask-position: center;
    mask-repeat: no-repeat;
}

html[data-pets-portal="cats"][data-theme] :is(.brand-hero-photo, .brand-hero-photo picture):has(> img:is(
    [src$="/calico-branded-tag-cutout.webp"],
    [src$="/cream-tag-cutout.webp"]
))::before {
    z-index: 0;
    inset: 10% -2% 0;
}

html[data-pets-portal="cats"][data-theme] .brand-hero-photo img:is(
    [src$="/calico-branded-tag-cutout.webp"],
    [src$="/cream-tag-cutout.webp"]
) {
    position: relative;
    z-index: 1;
}

html[data-pets-portal="cats"] .contact-dog-hero img {
    height: clamp(20rem, 36vw, 30rem);
    object-fit: contain;
    object-position: center bottom;
    border-radius: 0;
}

html[data-pets-portal="cats"] .tag-contact-scene img {
    object-fit: contain;
    object-position: center bottom;
    border-radius: 0;
}

/* Preserve each illustration's own silhouette and transparent edges. */
html[data-pets-portal="cats"][data-theme] .brand-hero-photo img:is(
    [src$="/cat-service-grey-graphic.webp"],
    [src$="/cat-service-apricot-graphic.webp"],
    [src$="/cats-family-organic.webp"],
    [src$="/calico-branded-tag-cutout.webp"],
    [src$="/cream-tag-cutout.webp"]
) {
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
    border-radius: 0;
    mask-image: none;
}

html[data-pets-portal="cats"] .hero-owner-avatars {
    display: none;
}

html[data-pets-portal="cats"] .cat-tag-guide {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    padding: 0;
    list-style: none;
}

html[data-pets-portal="cats"] .cat-tag-guide li {
    text-align: center;
}

html[data-pets-portal="cats"] .cat-tag-guide img {
    width: min(100%, 10rem);
    margin-inline: auto;
}

html[data-pets-portal="cats"] .brand-tag-icon {
    --blue: #a5420a;
    --pets-tag-face: #fff0e6;
    --pets-tag-border: #ebc9af;
}

html[data-pets-portal="cats"] #cc--main {
    --cc-text: #3e2e24;
    --cc-bg: #fcf8f4;
    --cc-btn-primary-bg: #aa450b;
    --cc-btn-primary-text: #fff;
    --cc-btn-primary-hover-bg: #84390c;
    --cc-btn-primary-hover-text: #fff;
    --cc-btn-secondary-bg: #f2eae3;
    --cc-btn-secondary-text: #594335;
    --cc-btn-secondary-hover-bg: #e2d6cc;
    --cc-btn-secondary-hover-text: #3e2e24;
    --cc-block-bg: #f2eae3;
    --cc-block-text: #594335;
    --cc-cookie-category-block-bg: #f2eae3;
    --cc-cookie-category-block-bg-hover: #e2d6cc;
    --cc-toggle-bg-on: #aa450b;
}

html[data-pets-portal="cats"] #cc--main #cm {
    --cc-bg: #2e221b;
    --cc-text: #fcf8f4;
    --cc-btn-primary-bg: #fd8037;
    --cc-btn-primary-text: #321b10;
    --cc-btn-primary-hover-bg: #ffab78;
    --cc-btn-primary-hover-text: #321b10;
    --cc-btn-secondary-text: #fcf8f4;
    --cc-btn-secondary-hover-bg: #594335;
}