:root {
    --color-bg: #fefefe;
    --color-text-primary: #1c2b27;
    --btn-back: #FFFFFa;
    --white: #fff;
    --purple: #C4A1FF;
    --dark-purple: #9722C9;
    --green: #0FA856;
    --lavender: #E3E0F3;
    --light-lavender: #F6F5FB;
    --blue: #3301FF;
    --pink: #FFB3EF;
    --light-yellow: #FFDD58;
    --light-grey: #EEEEEC;
    --light-blue: #f9fafc;
    --back: #F5F5F5;
    --grid-image:
        linear-gradient(#ececec 1px, transparent 1px),
        linear-gradient(90deg, #ececec 1px, transparent 1px);
}

@font-face {
    font-family: 'Clash Display';

    src:
        url("/static/fonts/ClashDisplay-Variable.ecb3ce8cf5b0.woff2")
        format('woff2');

    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* GENERAL */
* { box-sizing: border-box; }
html,
body {
    margin: 0;
    padding: 0;
    font-family: "Space Grotesk", sans-serif;
    line-height: 1.8;
    font-size: 16px;
}
html { scroll-behavior: smooth; overflow-y: scroll; }
body { overflow-x: hidden; }
/** { outline: 1px solid red; }*/


/* CONTENT */
.layout-root {
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    background-color: var(--color-bg);
    background-image: var(--grid-image);
    background-size: 100px 100px;
}

.layout-container {
    display: grid;
    grid-template-columns: 1fr;
    margin: 65px auto 0;
    width: 1200px;
/*    padding: 0 20px;*/


}

.layout-content {
    padding-bottom: 100px;
    padding-top: 15px;
}

.mobile-text { display: none; }

h1, h2 { font-family: "Clash Display", sans-serif; }

h2 { font-size: 24px; }

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-base);
}
a:hover { }
.cat-desc { margin: 0; text-align: justify; }

a[data-tooltip] {
    position: relative;
}

a[data-tooltip]:hover::after {
    content: attr(data-tooltip);

    position: absolute;
    top: 120%;
    left: 60%;
    transform: translateX(-50%);

    padding: 1px 5px;

    background: #a6a6a6;
    color: #fff;

    white-space: nowrap;
    border-radius: 6px;
    font-size: 10px;

    z-index: 1000;
}

.link-site { text-decoration: none; position: relative; }


.category-scroll {
  position: relative;
  display: flex;
  overflow-x: auto;
  gap: 0;
  height: auto;
  padding: 5px 5px;
  justify-content: space-between;
  scroll-behavior: auto;
  max-width: 1350px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.2);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
  scrollbar-width: none;
}

.category-scroll::-webkit-scrollbar { display: none; }

.category-scroll a { flex: 0 0 auto; }

.category-chip {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 90px;
  height: 45px;

  font-size: 12px;
  font-family: "Space Grotesk", sans-serif;
  line-height: 1.2;

  text-align: center;
  transition: var(--transition-base);
  padding: 0;
  box-sizing: border-box;
}

.category-chip__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;

  overflow: hidden;

  line-height: 1.2;

  max-height: calc(1.2em * 3);

  text-align: center;
  word-break: break-word;

  -webkit-box-decoration-break: clone;
}

.category-chip:hover,
.category-chip.active {
    background: none;
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 1px;
    text-decoration-thickness: 1px;
}


/* HEADER */
.site-header {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(7px);
    border-bottom: 2px solid #1C2B27;
}

.mobile-menu__list--top {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin: 0;
    padding: 0;
    font-family: "Space Grotesk", sans-serif;
    list-style: none;
}

.mobile-menu__list--top { display: none; }
.mobile-menu__list--top .mobile-menu__item { margin: 0; }
.nav-2 { display: none; }
.nav-main {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 5px 30px;
    height: 50px;
      position: relative;
}

.nav-main::before,
.nav-main::after {
  content: "";
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: black;
}

.nav-main::before {
  left: 40%;
}

.nav-main::after {
  left: 60%;
}

/* --left menu-- */
.nav-left {
    justify-self: start;
}

.nav-left-list {
    display: flex;
    gap: 5px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: "Space Grotesk", sans-serif;

    overflow: visible;
}

.nav-left-list li a {
    display: inline-flex;
    align-items: center;
    position: relative;

    font-family: "Space Grotesk", sans-serif;
    color: var(--color-text-primary);
    text-decoration: none;
    padding: 0 8px;
    font-size: 14px;
    gap: 8px;
}


/*.nav-left-list li a::before {
    content: "";

    width: 12px;
    height: 12px;

    border-radius: 50%;
    background: var(--light-yellow);

    flex-shrink: 0;
}

.nav-left-list li.is-active a::before {
    background: #0FA856;
}*/

.nav-left-list li a:hover,
.nav-left-list li.is-active a {
    font-weight: 600;
}

.nav-logo { justify-self: center; }
.logo-text {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-family: 'Clash Display';
}
.logo-letter--primary { color: var(--blue); }
.logo-letter--secondary { color: var(--blue); }



/* --theme-switch-- */
.nav-right { justify-self: end; font-size: 14px; }
.nav-groups {
    justify-self: end;
    font-size: 14px;
    padding: 3.5px 20px;
    color: var(--color-text-primary);
    background: var(--pink);
    border-radius: 20px;
    border: 1.5px solid #1C2B27;
    box-shadow: 2px 2px 0 #1C2B27, 1px 2px 0 -10px #1C2B27;
}
/*#theme-switch {
    width: 45px;
    height: 45px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-base);
    background: transparent;
}

#theme-switch:active { transform: var(--transform-base); }
#theme-switch__icon {
    font-size: 1.8rem;
    color: var(--color-text-primary);
    transition: var(--transition-base);
}
#theme-switch__icon:hover {  }*/


/* FOOTER */
.site-footer { border-top: 2px solid #1C2B27; border-bottom: 2px solid #1C2B27;}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 40px auto 40px;
    text-align: left;
}

.footer-col h4 {
    font-size: 14px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 8px;
}

.footer-col ul li a {
    font-size: 14px;
    color: var(--color-text-primary);
    text-decoration: none;
}

.footer-col ul li a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-text {
    font-size: 14px;
    line-height: 1.5;
}

.footer-bottom {
    font-size: 13px;
    text-align: center;
}

#scroll-top-button {
    position: fixed;
    right: 15px;
    bottom: 15px;

    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1.5px solid var(--yellow);
    border-radius: 50%;

    background: var(--pink);

    font-size: 22px;
    line-height: 1;

    color: var(--white);

    cursor: pointer;

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.3s ease, transform 0.2s ease;

    z-index: 9997;
}

#scroll-top-button.show {
    opacity: 1;
    pointer-events: auto;
}


/* SIDEBAR */
.sidebar-nav {
    padding: 27px 0 10px;
    height: fit-content;
    display: none;
}
.burger {
    display: none;
    background: none;
    border: none;
    font-size: 26px;
    cursor: pointer;
    color: var(--color-text-primary);
    top: -10px;
}


/* DOG-CARDS */
/* slider */
.dog-slider {
    display: flex;
    justify-content: space-between;
    gap: 19px;
    overflow-x: auto;
    padding: 0;
    margin: 0;
    scroll-snap-type: x proximity;
    flex-wrap: nowrap;
    scroll-behavior: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: auto;
}
/*.dog-slider .dog-card-link { flex: 0 0 250px; }*/

.dog-slider::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.slider-block {
    display: grid;
/*
    overflow: hidden;
*/
    position: relative;
    width: 100%;
}

.homepage .slider-block { background: transparent; padding-bottom: 60px; }

.slider-inner {
    position: relative;
    width: 1200px;
    margin: 0 auto;
    margin-top: -56px;
/*    background: var(--white);

    border: 1.5px solid #1C2B27;
    box-shadow: 4px 4px 0 #1C2B27, 3px 4px 0 -10px #1C2B27;*/

    padding: 70px 0 20px;

    overflow: hidden;
}

/*.slider-inner::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 36px;

    background: var(--white);

    border-bottom: 2px solid #1C2B27;
    pointer-events: none;
}

.slider-inner::after {
    content: "";

    position: absolute;
    top: 13px;
    left: 16px;

    width: 12px;
    height: 12px;
    border-radius: 50%;

    background: #ff5f57;

    box-shadow:
        18px 0 0 #FFDD58,
        36px 0 0 #0FA856;

    pointer-events: none;
}*/


.slider-nav {
    position: absolute;
    top: 0;
    right: 0;

    display: flex;
    gap: 10px;

    z-index: 999;
    pointer-events: auto;

}


.slider-arrow {
    background: none;
    border: 0;
/*    border-radius: 999px;
    box-shadow: 2px 2px 0 #1C2B27, 1px 2px 0 -1px #1C2B27;*/
    color: #1C2B27;
    font-size: 18px;
    cursor: pointer;
    border: 0px solid;
    padding: 1px 3px;
    margin-top: 4px;
    touch-action: none;
    font-family: "Space Grotesk", sans-serif;
}

.dog-slider-viewport {
    overflow: hidden;
    width: 100%;
}



.dog-slider-track {
    display: flex;
    gap: 19px;
    transition: transform 0.35s ease;
    will-change: transform;
}

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
}

.slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #1C2B27;
    opacity: 0.2;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.slider-dot:hover { cursor: pointer; }

.slider-dot.active {
    opacity: 1;
    transform: scale(1.2);
}

.slider-arrow {
    transition: opacity 0.2s ease;
}

.slider-arrow.disabled {
    opacity: 0.25;
    pointer-events: none;
}

.dog-card-link {
/*    flex: 0 0 calc((100% - 3 * 19px) / 4);*/
    text-decoration: none;
    position: relative;
    display: block;

    padding: 0;



    /*border: 2px solid #1C2B27;*/
/*
    box-shadow: 3px 5px 0 0 #1C2B27;
*/

/*    border-radius: 30px;*/

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


.dog-card-link::after {

    content: "↗︎";

    position: absolute;
    right: 7px;
    bottom: 7px;

    width: 22px;
    height: 22px;

    display: none;
    align-items: center;
    justify-content: center;

    font-weight: 700;
    color: var(--blue);
    font-weight: 800;
    background: var(--light-yellow);
    border: 1.5px solid var(--color-text-primary);
    font-size: 11px;
    border-radius: 50%;
}

.dog-card-link:hover::after {
/*    background: var(--purple);*/
}

.dog-card-link:hover {
}

/*.dog-card-link:nth-child(6n + 1) {
    background: var(--lavender);
    box-shadow: 5px 5px 0 var(--blue);
}

.dog-card-link:nth-child(6n + 2) {
    background: var(--pink);
    box-shadow: 5px 5px 0 var(--dark-purple);
}

.dog-card-link:nth-child(6n + 3) {
    background: var(--green);
    box-shadow: 5px 5px 0 var(--blue);
}

.dog-card-link:nth-child(6n + 4) {
    background: #FCFD96;
    box-shadow: 5px 5px 0 var(--dark-purple);
}

.dog-card-link:nth-child(6n + 5) {
    background: #A8F0FF;
    box-shadow: 5px 5px 0 var(--blue);
}

.dog-card-link:nth-child(6n + 6) {
    background: #FFD6A5;
    box-shadow: 5px 5px 0 var(--dark-purple);
}*/

.dog-card-link:hover .dog-card { }
.dog-card-link:hover .dog-card__image { filter: brightness(0.8); }
.dog-card-link:hover .dog-card__title {  }

.dog-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 285px;
    height: 380px;
    overflow: hidden;
    background: var(--white);
    border: 0.5px solid var(--blue)
}

.dog-card__image {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
/*    border-radius: 20px;*/
/*    border: 2.5px solid #1C2B27;*/
}

.dog-card__info {
    height: 80px;
    padding: 0 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background: var(--white);
    gap: 0;
    font-family: "Space Grotesk", sans-serif;
}

.dog-card__title {
    font-family: 'Clash Display';
    margin: 0;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.2;
    color: var(--blue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;

}

.dog-card__group {
    align-items: center;
    gap: 6px;
    font-weight: 800;
    color: var(--dark-purple);
    margin: 0;
    font-size: 13px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    width: 100%;
}


.dog-card__section {
    align-items: center;
    font-weight: 400;
    color: var(--color-text-primary);
    margin: 0;
    font-size: 11px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    width: 100%;
}

/* dogs-list.html */

.layout-content .slider-block { }


/* POST */
.post-container {
    color: var(--color-text-primary);

    }

.post-header {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0;
    padding-right: 3px;
}

.post-title {
    margin: 0;
    font-size: 33px;
    font-family: 'Clash Display';
    line-height: 1.2;
    color: var(--blue);
}

.post-title-cat {
    margin: 0;
    font-size: 33px;
    font-family: 'Clash Display';
    margin: 20px 0 0px;
    line-height: 1.2;
    color: var(--blue);
}

.post-media-nav {
    position: absolute;
    top: 10px;
    right: 0;
    display: flex;
    height: 36px;
    gap: 20px;
    text-transform: lowercase;
    z-index: 999;
    pointer-events: auto;
}


.post-media-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    gap: 5px;
    opacity: 0.8;
    color: #1C2B27;
    text-decoration: none;
    border: 0px solid;
    padding: 1px 3px;
    margin-top: 4px;
    line-height: 1;
    font-size: 18px;
    font-family: "Space Grotesk", sans-serif !important;;
/*    border-radius: 999px;
    box-shadow: 2px 2px 0 #1C2B27, 1px 2px 0 -1px #1C2B27;*/
}


.main-img-viewport {
    width: 350px;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.post-main-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    flex-direction: column;
}

.post-media {
    display: grid;
    position: relative;
    grid-template-columns: 400px 1fr;
    align-items: start;
    margin: 20px 0 30px 0;
    gap: 10px 60px;
    border: 0.5px solid var(--blue);
    /*background: var(--white);
    border: 1.5px solid #1C2B27;
    box-shadow: 4px 4px 0 #1C2B27, 3px 4px 0 -10px #1C2B27;
    background-image:
        url("/static/14.73e4459e22d3.png"),
        url("/static/15.7b313e593052.png"),
        url("/static/16.741102fe2ab6.png");

    background-position:
        right 0 bottom 10px,
        right 0 bottom 42px,
        right 0 bottom 74px;

    background-size:
        60px,
        60px,
        60px;

    background-repeat: no-repeat;*/
    padding: 80px 0 35px 60px;
    overflow: hidden;
}

.slider-pagination {
    display:flex;
    justify-content:center;
    align-items:center;
    gap: 6px;

    margin-top: 20px;

    font-family: "Space Grotesk",sans-serif;
    font-size: 16px;
    font-weight: 500;

    user-select:none;
}

.slider-current{
    color:var(--blue);
}

.slider-separator{
    opacity:.45;
}

.slider-total{
    opacity:.7;
}

/*.post-main-image::after {
    content: "";
    position: absolute;
    top: -80px;
    left: -80px;
    width: 100px;
    height: 200px;
    background: url("/static/20.dd6d882ae77f.png") no-repeat center;
    background-size: contain;
    z-index: 60;
}*/

/*.post-main-image::before {
    content: "";
    position: absolute;
    bottom: -70px;
    left: 320px;
    width: 100px;
    height: 200px;
    background: url("/static/20.dd6d882ae77f.png") no-repeat center;
    background-size: contain;
    z-index: 60;
}*/

/*.post-media::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 36px;

    background: var(--white);

    border-bottom: 2px solid #1C2B27;
    pointer-events: none;
}

.post-media::after {
    content: "";

    position: absolute;
    top: 13px;
    left: 16px;

    width: 12px;
    height: 12px;
    border-radius: 50%;

    background: #ff5f57;

    box-shadow:
        18px 0 0 #FFDD58,
        36px 0 0 #0FA856;

    pointer-events: none;
}*/

.main-img-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    touch-action: none;

    width: 40px;
    font-size: 25px;
    opacity: 0.6;
    height: 40px;

    border: 0px solid #1C2B27;
    background: transparent;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 10;

    transition: background 0.2s ease;
}

.main-img-arrow:hover {
/*    background: var(--purple);*/

}

.mini-gallery {
    display: none;
}

.main-img-arrow.prev {
    left: -45px;
}

.main-img-arrow.next {
    right: -45px;
}

.post-photo-author {
    font-size: 11px;
    color: #8a8a8a;
    text-align: center;
    line-height: 1.1;
    padding-top: 30px;
}

.post-image {
    width: 400px;
    height: 500px;
    object-fit: cover;
    object-position: center;
    will-change: opacity, transform;

    cursor: pointer;

     border: 0.5px solid var(--blue);
   /*box-shadow:
        7px 7px 0 var(--purple),
        -20px -18px 0 var(--light-yellow);*/

    transition: opacity 0.2s ease;
}


.post-image:hover {  }

.photo-author { font-size: 0.75rem; text-align: center; }
.images-rule { font-size: 10px; margin: 0; line-height: 1; }

.post-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.breed-tag {
    display: inline-flex;
    align-items: center;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 18px;
    padding: 6px 13px 6px 0;
    color: var(--dark-purple);
}

.breed-tag:hover { color: var(--blue); }

.post-colors { font-size: 14px; }

.post-params-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.param-card {
    display: flex;
    flex-direction: column;
    height: 100%;

    padding: 5px 20px 5px 0;

    border: 0px solid var(--color-text-primary);

    font-size: 14px;

    transition: transform .15s ease;
}

.param-card .top {
    display: flex;
    align-items: center;
    gap: 6px;

    font-size: 11px;
    opacity: 0.75;
    line-height: 1;
}

.param-card strong {
    margin-top: 2px;

    font-size: 15px;
    font-weight: 500;

    position: relative;

    line-height: 1.1;
    width: fit-content;
    padding: 3px 10px 3px 0;

}

/*.param-card strong:before{
	position: absolute;
	content: "";
	width: 50%;
	height: 20px;
	bottom: 7px;
	left: 5px;
	background: transparent;
	transform: rotate(-3deg);
	z-index: -1;
	box-shadow: 0 9px 7px -2px #676767;
}
.param-card strong:after{
	position: absolute;
	content: "";
	width: 50%;
	height: 20px;
	bottom: 7px;
	right: 5px;
	background: transparent;
	transform: rotate(3deg);
	z-index: -1;
	box-shadow: 0 9px 7px -2px #676767;
}*/

.param-card:hover { color: var(--blue); }

.param-card.wide {
    grid-column: 1 / -1;
}
.param-card .icon {
    font-size: 14px;
}

/* label */

.param-card span {
    opacity: 0.7;
    font-size: 12px;
}

.param-info {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 14px;
    height: 14px;

    margin-left: 4px;

    border: 1px solid currentColor;
    border-radius: 50%;

    font-family: "Space Grotesk", sans-serif;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;

    cursor: help;
    opacity: 0.65;
}

.param-tooltip {
    position: absolute;

    left: 50%;
    bottom: calc(100% + 8px);

    transform: translateX(-50%);

    width: 160px;

    padding: 8px 10px;

    background: white;
    color: var(--dark-purple);

    font-family: "Space Grotesk", sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;

    border-radius: 5px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .15s ease,
        transform .15s ease;

    z-index: 100;
}

.param-info:hover .param-tooltip {
    opacity: 1;
    visibility: visible;

    transform: translateX(-50%) translateY(-2px);
}

.post-colors {
    font-size: 14px;
    margin-top: 2px;
}

.color-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin-top: 6px;
}


.color-tags span {
    display: inline-block;

    padding: 3px 8px;

    background: var(--pink);

    border: 2px solid var(--color-text-primary);
    border-radius: 999px;

    font-size: 11px;
}

.post-params-grid p { margin: 0; font-size: 14px; }

.post-params-grid i {
    font-family: "Space Grotesk", sans-serif;
    border-right-width: 2.5px;
    border-bottom-width: 2.5px;
    border-radius: 7px;
    padding: 2px 4px 0;
}

.tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 14px;
    height: 14px;

    font-size: 10px;
    line-height: 1;
    border: 1px solid #1C2B27;
    border-radius: 50%;

    background: transparent;

    transform: translateY(-4px);
    cursor: pointer;
}

.tooltip-text {
    position: absolute;
    bottom: 150%;
    left: 50%;
    transform: translateX(-50%);

    visibility: hidden;
    opacity: 0;

    color: var(--color-text-primary);
    padding: 5px 15px;
    border: 2px solid #1C2B27;
    box-shadow: 2px 4px 0 0 #1C2B27;
    background: var(--white);
    border-radius: 7px;

    padding: 8px 10px;
    margin-bottom: 2px;
    font-size: 13px;
    font-weight: 400;
    white-space: normal;
    width: 400px;

    transition: 0.2s ease;
    z-index: 10;
}

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}


.section-title {
    font-size: 20px;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;

/*    text-transform: uppercase;*/
}

.size-paws {
    display: inline-flex;
    align-items: flex-end;
    gap: 8px;
    margin: 0 6px;
}
.size-paws span {
    display: inline-block;
    line-height: 1;
    transition: transform 0.2s ease;
}
.dog-muted { opacity: 0.3; }
.dog-active { opacity: 1; transform: scale(1.15); }


/*.mini-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: fit-content;
    gap: 15px;

    margin-top: 6px;
}

.gallery-image {
    width: 120px;
    height: 114px;

    object-fit: cover;

    border: 1.5px solid var(--color-text-primary);

*//*
    border-radius: 17px;
*//*

    cursor: pointer;

    transition: transform .15s ease, filter .15s ease;
}

.gallery-image:hover {

}*/

.post-text {
    font-size: 16px;
    text-align: justify;
    line-height: 1.8;

    }


.post-text-explore {
    font-size: 16px;
    text-align: justify;
    line-height: 1.8;
    width: 100%;

}

.post-text strong {
    font-family: "Space Grotesk", sans-serif;
    font-size: 16px;
    font-weight: 700;

    }
.updated { text-align: end; margin: 5px; }

.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    overscroll-behavior: contain;
    touch-action: none;
}
.modal.active { display: flex; }
.modal-content { max-height: 770px; }
.modal-author { font-size: 1rem; text-align: center; color: var(--white); }

#modal-img {
    transition: transform 0.05s linear, opacity 0.25s ease;
    transform-origin: center center;
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
}

.close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 21px;
    font-weight: bold;
    background: var(--light-yellow);
    color: var(--color-text-primary);
    border: 2px solid #1C2B27;
    cursor: pointer;
    padding: 3px 7px;
    height: 45px;
    width: 45px;
    text-align: center;
    justify-items: center;
    border-radius: 999px;
}
.close:hover { background: var(--purple); }

.modal-arrow {
    position: absolute;
    top: 50%;
    font-size: 20px;
    z-index: 9999;
    border-radius: 999px;
    color: var(--color-text-primary);
    background: var(--light-yellow);
    color: var(--color-text-primary);
    border: 2px solid #1C2B27;
    cursor: pointer;
    right: 30px;
    padding: 3px 7px;
    height: 45px;
    width: 45px;
    text-align: center;
    justify-items: center;
}
.modal-arrow:hover { background: var(--purple); }
.modal-arrow.prev { left: 30px; }
.modal-arrow.next { right: 30px; }

.post-meta-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 0;
    margin-top: 20px;
}

.share-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.8;
    padding: 6px 20px;
    border: 1.5px solid #1C2B27;
    border-radius: 999px;
    box-shadow: 2px 2px 0 #1C2B27, 1px 2px 0 -10px #1C2B27;
    background: var(--btn-back);
    cursor: pointer;

    transition:
        transform .15s ease,
        background .15s ease,
        box-shadow .15s ease;
}

.share-btn:hover {
    background: var(--purple);
}

.share-text {
    font-size: 15px;
    color: #161616;
    font-family: "Space Grotesk", sans-serif;
}

.share-arrow {
    position: relative;

    width: 22px;
    height: 22px;

    font-size: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 2px solid #1C2B27;
    border-radius: 50%;

    background: var(--light-yellow);

    transition: background .2s ease;
}

.share-btn:hover .share-arrow {
    background: var(--light-yellow);
}

.compare-section {
    margin-top: 30px;
}

.compare-panel {
    padding: 15px 0;

}

.compare-controls {
    display: flex;
    gap: 10px;
    border-radius: 999px;
    align-items: center;
    width: fit-content;
}

.current-post-dog {
    font-weight: bold;
    color: var(--blue);
    font-family: "Space Grotesk", sans-serif;
    font-size: 20px;
    }

.compare-select {
    height: 42px;
    line-height: 38px;
    padding: 0 40px 0 12px;

    font-family: "Space Grotesk", sans-serif;
    font-size: 15px;

    text-align: center;

    cursor: pointer;

    border: 1.5px solid #1C2B27;
    border-radius: 999px;
    box-shadow: 2px 2px 0 #1C2B27, 1px 2px 0 -10px #1C2B27;
    width: 220px;

    background: var(--white);

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image:
        linear-gradient(45deg, transparent 50%, #1C2B27 50%),
        linear-gradient(135deg, #1C2B27 50%, transparent 50%);

    background-position:
        calc(100% - 22px) 50%,
        calc(100% - 14px) 50%;

    background-size: 8px 8px;
    background-repeat: no-repeat;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vs { font-weight: 600; }

.compare-btn {
    line-height: 1.8;
    padding: 6px 20px;
    border: 2px solid #1C2B27;
    background: var(--white);
    font-family: 'Clash Display';
    font-size: 14px;
}

.compare-select:hover {
    background: var(--light-yellow);
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, #1C2B27 50%),
        linear-gradient(135deg, #1C2B27 50%, transparent 50%);

    background-position:
        calc(100% - 22px) 50%,
        calc(100% - 14px) 50%;

    background-size: 8px 8px;
    background-repeat: no-repeat;

    }

#compareTableWrapper {
    width: 100%;
    max-width: 900px;
    margin: 5px auto;
    position: relative;

    transition:
        opacity .20s ease,
        transform .20s ease;

    transform-origin: top center;
}

/*#compareTableWrapper.is-changing {
    opacity: 0;
    transform: translateY(0px) scale(.985);
}*/




.compare-table {
    width: 100%;
    max-width: 800px;
    margin: 30px auto 10px;
    position: relative;
    border-radius: 5px;
    border-collapse: separate;
    border-spacing: 0 2px;
    table-layout: fixed;
/*    border: 2px solid var(--color-text-primary);
    background: var(--white);
    box-shadow: 3px 3px 0 #1C2B27, 2px 3px 0 -10px #1C2B27;*/
    padding: 0;
    overflow: hidden;
}

/*
.compare-table::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 36px;

    background: var(--btn-back);

    border-bottom: 2px solid #1C2B27;
    pointer-events: none;
}

.compare-table::after {
    content: "";

    position: absolute;
    top: 13px;
    left: 16px;

    width: 12px;
    height: 12px;
    border-radius: 50%;

    background: #ff5f57;

    box-shadow:
        18px 0 0 #FFDD58,
        36px 0 0 #0FA856;

    pointer-events: none;
}
*/

.compare-table .header-row th {
    font-family: 'Clash Display';
    font-size: 16px;
    text-align: center;
    color: var(--blue);
    justify-content: flex-start;
}

.param-name {
    font-family: "Space Grotesk", sans-serif;
    font-size: 12px;
    text-align: center;
    padding: 5px 0 3px;
    line-height: 1.1;
}

.param-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0.7;
}

.param-icon {
    font-size: 14px;
    opacity: 0.7;
}

.compare-breed-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    height: 130px;
}

.compare-breed-image {
    width: 70px;
    height: 70px;

    border-radius: 50%;
    object-fit: cover;

/*    border: 2px solid #1C2B27;*/
    background: var(--white);

    display: block;
}

.compare-breed-info {
    display: flex;
    flex-direction: column;
    gap: 2px;

    text-align: center;

    font-family: 'Clash Display';
    font-size: 18px;
    line-height: 1.2;
}

.compare-breed-link {
    color: var(--blue);
    text-decoration: none;
    transition: 0.2s ease;
   font-family: "Space Grotesk", sans-serif;
}

.compare-breed-link:hover {
    opacity: 0.7;
}

.breed-meta {
    font-size: 12px;
    opacity: 0.7;
    font-weight: 600;
    line-height: 1.3;
    width: 250px;
    color: var(--dark-purple);
    font-family: "Space Grotesk", sans-serif;
}

.value-row td {
    text-align: center;
    font-size: 14px;


}


.value-a {
    font-weight: 500;
}

.value-b {
    font-weight: 500;
}



.value-row:hover td {
    color: var(--blue);
    font-weight: 700;
    transition: 0.2s ease;
}

.compare-table-header {
    display: flex;
    justify-content: flex-end;
}

.compare-close-btn {
    position: absolute;
    top: 35px;
    right: 60px;

    border: none;
    background: transparent;
    font-size: 22px;
    cursor: pointer;
    opacity: 1;
    color: var(--color-text-primary);
    z-index: 50;
}

.compare-close-btn:hover {
    opacity: 1;
    color: var(--blue);
}


/* HOME.HTML */
.fullwidth-content {
    width: 100%;
    margin: 0 auto;
}

.homepage {
    margin: 0;
    width: 100%;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}


.home-text-block {
    background: transparent;
    flex: 1;
    display: flex;
    min-height: 180px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
    width: 100%;
}

.home-text-block-title {
    font-size: 35px;
    margin: 0;
    font-family: "Space Grotesk", sans-serif;
    text-align: center;
}

.home-text-block-text {
    font-size: 16px;
    font-family: "Space Grotesk", sans-serif;
    text-align: center;
    max-width: 700px;
    width: 100%;
    opacity: 0;
    animation: fadeIn 0.3s ease forwards;
    margin: 10px 0 0;
}


@keyframes fadeIn {
    to {
        opacity: 1;
    }
}


.hero-block-1 {
    display: flex;
    width: 100%;
    min-height: calc(100vh);
}

.wave {
  position: relative;
  height: 120px;
  overflow: hidden;
}

.wave svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.hero-wave,
.hero-wave-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    height: 120px;
    color: #FFDD58;
}

.hero-wave {
    bottom: 120px;
}

.hero-wave-bottom {
    bottom: 0;
    transform: scaleY(-1);
}

.hero-wave svg,
.hero-wave-bottom svg {
    width: 100%;
    height: 100%;
    display: block;
}
.hero-block-2 {
    display: flex;
    width: 100%;
    min-height: calc(40vh - 80px);
    justify-content: center;
}

.hero-content {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    gap: 60px;

    overflow: hidden;
}

/* FIGURES */
.hero-content::before,
.hero-content::after {
    content: "";

    position: absolute;

    background-repeat: no-repeat;
    background-size: contain;

    pointer-events: none;

    will-change: transform;

    z-index: 0;
}

/* LEFT BLOB */
.hero-content::before {
    left: 130px;
    top: 190px;

    width: 240px;
    height: 240px;

    background-image: url("/static/17.151cb69e24e0.png");

    animation: floatBlob 7s ease-in-out infinite;
}

/* RIGHT FIGURE */
.hero-content::after {
    right: 130px;
    bottom: 100px;

    width: 100px;
    height: 100px;

    background-image: url("/static/15.7b313e593052.png");

    animation: floatSmall 5s ease-in-out infinite;
}

/* ANIMATIONS */
@keyframes floatBlob {

    0% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-12px)
            rotate(-4deg);
    }

    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }
}

@keyframes floatSmall {

    0% {
        transform:
            translateY(0)
            rotate(0deg)
            scale(1);
    }

    50% {
        transform:
            translateY(8px)
            rotate(6deg)
            scale(1.04);
    }

    100% {
        transform:
            translateY(0)
            rotate(0deg)
            scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {

    .hero-content::before,
    .hero-content::after {
        animation: none;
    }
}

.hero-inner {
    position: relative;

    max-width: 1350px;
    margin: 100px auto 0;

    display: flex;
    flex-direction: column;

    gap: 40px;
    align-items: center;

    overflow: visible;

    z-index: 1;
}

.hero-inner > * {
    position: relative;
    z-index: 2;
}

.hero-inner::before,
.hero-inner::after {
    content: "";

    position: absolute;

    background-repeat: no-repeat;
    background-size: contain;

    pointer-events: none;

    will-change: transform;

    z-index: 0;
}

/* TOP RIGHT */
.hero-inner::before {
    right: 0;
    top: -5px;

    width: 150px;
    height: 150px;

    background-image: url("/static/13.fd0fd68933c1.png");

    animation: rotateFloatLeft 55s linear infinite;
}

/* BOTTOM LEFT */
.hero-inner::after {
    left: 60px;
    bottom: 10px;

    width: 100px;
    height: 100px;

    background-image: url("/static/19.db7db524e3d2.png");

    animation: rotateFloatRight 45s linear infinite;
}

/*.hero-inner::after {
    left: 30px;
    bottom: 18px;

    width: 80px;
    height: 80px;

    background-image: url("/static/logo.7f13ab28b879.png");

animation: pulseScale 3s ease-in-out infinite;
}*/

.slider-prev,
.slider-next {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.slider-prev.is-disabled,
.slider-next.is-disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
}

.slider-prev.is-hidden,
.slider-next.is-hidden {
    display: none;
}

@keyframes pulseScale {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* CLOCKWISE */
@keyframes rotateFloatLeft {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* COUNTER CLOCKWISE */
@keyframes rotateFloatRight {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {

    .hero-inner::before,
    .hero-inner::after {
        animation: none;
    }
}

.hero-left {
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.hero-right {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.hero-center {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom: 2px solid var(--color-text-primary);
}


/* HERO TEXT */
.homepage-title-1 {
    font-family: 'Clash Display';
    max-width: 900px;
    width: 100%;
    font-weight: 600;
    font-size: 160px;
    line-height: 1;
    letter-spacing: 0.3px;
    text-align: center;
    margin: 0 0 5px;
    color: var(--color-text-primary);

}

.homepage-subtitle {
    margin-top: 12px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 25px;
    line-height: 1.5;
    color: var(--color-text-primary);
    -webkit-text-stroke: 0.5px #1C2B27;
    font-weight: 900;
    text-align: center;

}

.homepage-subsubtitle { max-width: 550px; margin: 0 auto; font-size: 18px; opacity: 0.6; }

/* SEARCH BLOCK */
.hero-right .homepage-search-block {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 30px;

    background: transparent;
    padding: 0;
    height: auto;
    width: 100%;
}

.homepage-search {
/*    background: var(--color-yellow);
    width: 320px;


    border: 2px solid var(--color-frame);
    border-right-width: 4px;
    border-bottom-width: 4px;

    text-align: center;
    padding: 20px 0;
    border-radius: 30px;*/
}

.homepage-search label {
    display: block;
    font-size: 30px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 12px;
    text-align: center;
    font-family: 'Clash Display';
}


/* SELECT */
.homepage select {

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 200px;
    padding: 13px 25px;
    text-align: center;
    font-family: "Space Grotesk", sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    border: 2px solid #1C2B27;
    border-radius: 999px;
    box-shadow: 2px 2px 0 #1C2B27, 1px 2px 0 -10px #1C2B27;
    background: var(--white);
/*    border-radius: 999px;*/
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #1C2B27 50%),
        linear-gradient(135deg, #1C2B27 50%, transparent 50%);

    background-position:
        calc(100% - 22px) calc(50% + 2px),
        calc(100% - 14px) calc(50% + 2px);

    background-size: 8px 8px;
    background-repeat: no-repeat;

}

.homepage select::before {
    content: "";

    position: absolute;
    inset: 0;

    background: #f7b6d2;
    border: 2px solid #1C2B27;

    transform: translate(8px, 8px);

    z-index: -1;
}

.homepage select:hover, #breed-select-1:hover {
    background: var(--purple);

    box-shadow:
        4px 5px 0 0 #1C2B27,
;

    background-image:
        linear-gradient(45deg, transparent 50%, #1C2B27 50%),
        linear-gradient(135deg, #1C2B27 50%, transparent 50%);

    background-position:
        calc(100% - 22px) calc(50% + 2px),
        calc(100% - 14px) calc(50% + 2px);

    background-size: 8px 8px;
    background-repeat: no-repeat;
}

.homepage select:active {
    transform: translateY(0px);
}

.homepage select:focus {
    outline: none;
}

#breed-select-1 {
    background: var(--pink);
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #1C2B27 50%),
        linear-gradient(135deg, #1C2B27 50%, transparent 50%);

    background-position:
        calc(100% - 22px) calc(50% + 2px),
        calc(100% - 14px) calc(50% + 2px);

    background-size: 8px 8px;
    background-repeat: no-repeat;
}



.catalog-structure {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 20px 30px;

    margin-top: 24px;
    margin-bottom: 30px;
}

/* CARD */

.group-row {
    position: relative;

    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 13px;
    /*align-items: center;*/
/*    height: 110px;*/
    border: 0.5px solid var(--blue);
    padding: 20px;

    text-decoration: none;
    color: var(--color-text-primary);

    background: var(--light-blue);

    overflow: hidden;

}

/* colorful neo-memphis cards *//*

.group-row:nth-child(6n + 1) {

    box-shadow: 5px 5px 0 var(--blue);
}

.group-row:nth-child(6n + 2) {

    box-shadow: 5px 5px 0 var(--dark-purple);
}

.group-row:nth-child(6n + 3) {

    box-shadow: 5px 5px 0 var(--green);
}

.group-row:nth-child(6n + 4) {

    box-shadow: 5px 5px 0 var(--light-yellow);
}

.group-row:nth-child(6n + 5) {

    box-shadow: 5px 5px 0 var(--purple);
}

.group-row:nth-child(6n + 6) {

    box-shadow: 5px 5px 0 var(--pink);
}*/

/*.group-row:hover {
    background: var(--white);
}*/

.group-open-icon {
    position: absolute;

    width: 30px;
    height: 30px;

    top: 6px;
    right: 8px;

    display: flex;
    align-items: center;
    justify-content: center;

/*
    border: 1.5px solid var(--color-text-primary);
    border-radius: 50%;*/

    color: var(--blue);

    font-size: 15px;
}

.group-open-icon i {
    color: inherit;
}

.group-row:hover .group-open-icon i {
    color: var(--dark-purple);
}

/*.group-row::before {
    content: "➥";

    position: absolute;

    width: 22px;
    height: 22px;

    top: 10px;
    right: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--light-yellow);

    border: 1.5px solid var(--color-text-primary);

    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border-radius: 50%;

    color: var(--color-text-primary);
}

.group-row:hover::before {
    background: var(--purple);
}*/


.group-cover {
    width: 80px;
    height: 80px;

    object-fit: cover;

    flex-shrink: 0;
    border-radius: 999px;
    background: white;

    flex-shrink: 0;

    transition:
        transform .2s ease,
        border-radius .2s ease;
}

.group-row:hover .group-cover {
    filter: brightness(0.8);
}

.group-sections {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.group-sections-inline{
    font-size: 16px;
    line-height: 1.7;
}

.group-sections-inline strong{
    font-family: "Space Grotesk", sans-serif;
}

.group-name {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
}

.groups-link {
    display: block;


    margin-bottom: 2px;

    font-family: "Space Grotesk", sans-serif;
    font-size: 14px;
    line-height: 1.6;

    text-align: start;

    transition:
        transform .18s ease;
}

.group-row:hover .groups-link {

}

.groups-sections {
    display: block;

    margin-top: -20px;

    font-size: 11px;
    line-height: 1.25;

    opacity: .82;
}


/* CONTACT.HTML */

.contact-list {
    list-style: none;
    margin: 10px 0;
    padding-left: 0;
}

.contact-list li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
}

.contact-list li::before {
    content: "▻";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 16px;
    color: var(--blue);
}
.hero-inner-contact {
    width: 100%;
    max-width: 1350px;
    margin: 20px auto;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 30px;
    align-items: stretch;

    padding: 0;
}

.hero-right-contact {
    height: 100%;
    order: -1;
/*    background-image:
        url("/static/4.15b0ea9fa91b.png");

    background-position:
        right 50% bottom 5px;

    background-size:
        70px;

    background-repeat: no-repeat;*/
}

/* FORM */
.policy-container {
    font-size: 16px;
}

.policy-container form {
    margin: 0;
}

.policy-container form p,
.form-check-wrapper {
    width: 100%;
    margin: 0 0 16px;
}

.form-label,
.consent-label {
    font-size: 13px;
    color: var(--color-text-primary);
    display: block;

    text-align: left;
}

.policy-container input[type="text"],
.policy-container input[type="email"],
.policy-container textarea {
    width: 100%;

    font-size: 14px;

    border-top: 0px solid #1C2B27;
    border-bottom: 1px solid #1C2B27;
    border-left: 0px solid #1C2B27;
    border-right: 0px solid #1C2B27;

    background: transparent;

    transition: border-color .15s ease, box-shadow .15s ease;
}

.policy-container input[type="text"]:focus,
.policy-container input[type="email"]:focus,
.policy-container textarea:focus {
    outline: none;

    border-color: var(--purple);


}

.policy-container textarea {
    resize: vertical;
    min-height: 80px;
}

.form-check-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.form-check-wrapper input {
    margin-top: 4px;
}

.form-error {
    max-width: 100%;
    margin: -10px 0 12px;
}

.form-oferta {
    font-size: 10px;
}

#btn-custom {
    display: inline-block;
    margin: 0;
    padding: 10px 25px;
    font-size: 14px;
    color: #161616;
    background: var(--light-yellow);
    border: 1.5px solid #1C2B27;
    box-shadow: 3px 3px 0 #1C2B27, 2px 3px 0 -10px #1C2B27;
    flex-shrink: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}


/* layout */
.contact-layout {
    gap: 30px;
    align-items: start;
}

.contact-form-side {
    width: 100%;
}


/* POLICIES */
.num-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.num-list a { display: block; }
.num-list a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.link-policies { }
.link-policies:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    }

.bulleted-list li::marker { cline-height: 2.5;}


/* DOG_GROUPS.HTML */
.dog-groups {
    width: 100%;
    margin: 20px 0;
    text-align: center;
    display: flex;
    gap: 10px;
    flex-direction: column;
}

/* TITLE */
.group-title {
    width: 700px;
    margin: 0 auto;
    /*border-radius: 999px;*/
    border-bottom: 0.5px solid var(--blue);
    border-top: 0px solid #333;
    border-left: 0px solid #333;
    border-right: 0px solid #333;
    background: transparent;
/*    box-shadow: 1px 2px 0 #1C2B27;*/

    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 16px;

    text-align: center;

    padding: 10px 14px;

    cursor: pointer;
    position: relative;
    color: var(--color-text-primary);

    transition: box-shadow .18s ease, background .18s ease;
}

.group-title:hover {

}

.group-title::after {
    content: "+";
    color: var(--blue);

    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;


    border-radius: 50%;

    background: transparent;

    font-size: 20px;
    line-height: 1;
}

.group-title:hover::after {
    color: var(--dark-purple);
    background: transparent;
}

/* when opened */
.group-title.active::after {
    content: "–";
}

/* CONTENT */
.group-content {
    max-height: 0;
    overflow: hidden;

    transition: max-height 0.3s ease;
}

.group-content ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 600px;
    margin: 0 auto;
    padding: 18px;
    list-style: none;
    background: transparent;
    border-right: 0px solid #1C2B27;
    border-left: 0px solid #1C2B27;
}

/* rainbow links */
.group-content li:nth-child(7n+1) a { color: #e63946; }
.group-content li:nth-child(7n+2) a { color: #f4a261; }
.group-content li:nth-child(7n+3) a { color: #2a9d8f; }
.group-content li:nth-child(7n+4) a { color: #457b9d; }
.group-content li:nth-child(7n+5) a { color: #6a4c93; }
.group-content li:nth-child(7n+6) a { color: #8d99ae; }
.group-content li:nth-child(7n+7) a { color: #bc4749; }


.group-content a {
    text-decoration: none;

    font-size: 15px;
    font-weight: 500;

    transition:
        transform .15s ease,
        opacity .15s ease;

    display: inline-block;
}

.group-content a:hover {
    transform: scale(1.1);
}

/* MEMPHIS */
.flags-desktop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  z-index: 4;
}

.flags-desktop span {
  flex: 1;
  height: 20px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  opacity: 0.3;
}

.flags-desktop span:nth-child(4n+1) { background: #ff4d4d; }
.flags-desktop span:nth-child(4n+2) { background: #FF8EED; }
.flags-desktop span:nth-child(4n+3) { background: #06d6a0; }
.flags-desktop span:nth-child(4n+4) { background: #4d96ff; }

.flags-mobile { display: none; }


.memphis-circle {
  position: absolute;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  filter: drop-shadow(3px 3px 0 #45494D);
  z-index: 4;
}

.circle-1 { top: 15; right: 20px; }
.circle-2 { top: 18%; right: 20%; }
.circle-3 { top: 19%; right: 95%; opacity: 0.6; }
.circle-4 { top: 300px; left: 220px; opacity: 0.2; }
.circle-5 { top: 400px; left: 150px; }

/* Triangle */
.memphis-triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;

  z-index: 4;
}

.triangle-1 { top: 16%; left: 15%; }
.triangle-2 { top: 10%; left: 20%; }
.triangle-3 {  bottom: 35%; right: 10%; opacity: 0.6;}
.triangle-4 { top: 100px; left: 230px; opacity: 0.2; }
.triangle-5 { top: 500px; left: 120px; }

/* Star */
.memphis-star {
  position: absolute;
  width: 45px;
  height: 45px;
  z-index: 4;
}

.memphis-star::before,
.memphis-star::after {
  content: '';
  position: absolute;
  inset: 0;
  aspect-ratio: 1;
  clip-path: polygon(50% 0,
    calc(50%*(1 + sin(.4turn))) calc(50%*(1 - cos(.4turn))),
    calc(50%*(1 - sin(.2turn))) calc(50%*(1 - cos(.2turn))),
    calc(50%*(1 + sin(.2turn))) calc(50%*(1 - cos(.2turn))),
    calc(50%*(1 - sin(.4turn))) calc(50%*(1 - cos(.4turn)))
   );
  z-index: 4;

}

.star-1 { top: 30%; right: 250px; }
.star-2 { top: 20%; left: 10%; }
.star-3 { top: 110%; right: 90%; opacity: 0.6; }
.star-4 { bottom: 100px; left: 130px; opacity: 0.2; }
.star-5 { top: 480px; left: 200px; }

/* Heart */
.memphis-heart {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #FF8EED;
  transform: rotate(-45deg);
  z-index: 4;
}

.memphis-heart::before,
.memphis-heart::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.memphis-heart::before { top: -12px; left: 0; }
.memphis-heart::after { top: 0; left: 12px; }

.heart-1 { top: 700px; left: 400px; }
.heart-2 { top: 55%; right: 15%; }
.heart-3 { top: 80%; right: 7%; opacity: 0.6; }
.heart-4 { bottom: 0; left: 250px; opacity: 0.2; }
.heart-5 { top: 550px; left: 120px; }

/* Half-circle */
.memphis-half-circle {
  position: absolute;
  width: 45px;
  height: 20px;
  background: #FFA594;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;

  z-index: 4;
}

.half-1 { top: 500px; right: 400px; }
.half-2 { top: 70%; left: 25%; }
.half-3 { bottom: -40%; right: 10%; opacity: 0.6; }
.half-4 { top: 420px; left: 250px; transform: translate(0, -18px) rotate(-90deg); opacity: 0.2; }
.half-5 { top: 520px; left: 150px; }

/* Cloud */
.memphis-cloud {
  position: relative;
  width: 50px;
  height: 12px;
  background: #43e5e8;
  border-radius: 12.5px;
  z-index: 4;
}

.memphis-cloud::before,
.memphis-cloud::after {
  content: '';
  position: absolute;
  background: #43e5e8;
  border-radius: 50%;
}

.memphis-cloud::before { width: 20px; height: 20px; top: -10px; left: 5px; }
.memphis-cloud::after { width: 25px; height: 23px; top: -12.5px; right: 5px; }

.cloud-1 { top: 780px; left: 50px; position: absolute; display: none; }
.cloud-2 { top: 220px; left: 50px; position: absolute; }
.cloud-3 { bottom: -10%; right: 95%; position: absolute; opacity: 0.6; }
.cloud-4 { top: 420px; left: 220px; position: absolute; opacity: 0.2; }
.cloud-5 { top: 520px; left: 150px; position: absolute; }

.arrow-icon {
    position: relative;
    width: 20px;
    height: 20px;
    margin: 20px auto 50px auto;
    z-index: 4;
}

.arrow-icon:before,
.arrow-icon:after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;

    border-left: 8px solid #1C2B27;
    border-bottom: 8px solid #1C2B27;

    animation: arrow-icon 3s linear infinite;
}

.arrow-icon:after {
    border-left: 8px solid #1C2B27;
    border-bottom: 8px solid #1C2B27;
    animation: arrow-icon 3s linear infinite -1.5s;
}

@keyframes arrow-icon {
    0% {
        opacity: 0;
        transform: translate(0, -18px) rotate(-45deg);
    }
    10%, 90% {
        opacity: 0;
    }
    50% {
        opacity: 1;
        transform: translate(0, 0) rotate(-45deg);
    }
    100% {
        opacity: 0;
        transform: translate(0, 18px) rotate(-45deg);
    }
}



/* breadcrumbs */

.breadcrumbs { font-size: 12px; color: var(--color-text-primary); }
.breadcrumbs a { }
.breadcrumbs .current { color: var(--blue); }
.breadcrumbs-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

}


/* guides */
.guides-list {
    margin: 24px 0 20px;
    gap: 20px 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.guide-card {
    background: var(--light-blue);
    position: relative;
    border: 0.5px solid var(--blue);
    min-height: 114px;
    display: block;
    padding: 20px;
    text-decoration: none;
    color: var(--color-text-primary);


    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/*.guide-card:nth-child(6n + 1) {

    box-shadow: 5px 5px 0 var(--blue);
}

.guide-card:nth-child(6n + 2) {

    box-shadow: 5px 5px 0 var(--dark-purple);
}

.guide-card:nth-child(6n + 3) {

    box-shadow: 5px 5px 0 var(--green);
}

.guide-card:nth-child(6n + 4) {

    box-shadow: 5px 5px 0 var(--light-yellow);
}

.guide-card:nth-child(6n + 5) {

    box-shadow: 5px 5px 0 var(--purple);
}

.guide-card:nth-child(6n + 6) {

    box-shadow: 5px 5px 0 var(--pink);
}*/

/*.guide-card::before {
    content: "↗︎";

    position: absolute;

    width: 22px;
    height: 22px;

    top: 10px;
    right: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--light-yellow);

    border: 1.5px solid var(--color-text-primary);

    font-size: 11px;
    font-weight: 700;
    border-radius: 50%;
    line-height: 1;

    color: var(--color-text-primary);
}

.guide-card:hover::before {
    background: var(--purple);
}*/

.group-open-icon i {
    color: inherit;
}

.guide-card:hover .group-open-icon i {
    color: var(--dark-purple);
}

.guide-title {
    display: block;
    font-weight: 700;
    font-family: "Space Grotesk", sans-serif;
    font-size: 16px;
    margin-bottom: 6px;
    color: var(--color-text-primary);
}

.guide-card p {
    margin: 0;
    font-size: 14px;
    opacity: 0.85;
    line-height: 1.4;
}

.guide-image {
    width: 100%;
    height: 230px;

    margin: 30px 0 40px;

    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.guide-image-1 {
    background-image: url("/static/guides1.992cdac31cc7.png");
}

.guide-image-2 {
    background-image: url("/static/guides2.0c9756bdde6d.png");
}

.guide-image-3 {
    background-image: url("/static/guides3.c2739aba2c1b.png");
}

.guide-image-4 {
    background-image: url("/static/guides4.002912659077.png");
}

.guide-image-5 {
    background-image: url("/static/guides5.48137f1d425b.png");
}

.guide-image-6 {
    background-image: url("/static/guides6.061944851f8f.png");
}

.image-aboutus {
    background-image: url("/static/aboutus.0b2988566b79.png");
}
.image-contact {
    background-image: url("/static/contact.c29d9d314855.png");
}
.image-guides {
    background-image: url("/static/guides.06d7611e08ef.png");
}
.image-logo {
    background-image: url("/static/logo.7f13ab28b879.png");
}