@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&family=Yanone+Kaffeesatz:wght@300;400;700&display=swap');

:root {
    --color-primary: #73c2c7;
    --color-primary--hover: #53a7ad;
    --color-primary--active: #388e94;

    --color-secondary: #33617c;
    --color-secondary--hover: #194a66;
    --color-secondary--active: #0b354d;

    --color-light: #ffffff;
    --color-light--hover: #d4ebed;
    --color-light--active: #b2e8ed;

    --color-accent: #ffdc93;
    --color-accent--hover: #e6bf73;
    --color-accent--active: #dbb058;

    --color-category--active: #71bec3;
    --color-separator: #e6e6e6;
    --color-text: #2a2525;
    --color-dark: #584112;
    --color-additional: #22417d;
    --color-inverse: #fff;
    --color-muted: #ddd;

    --color-accent-blue: #4390bf;
    --color-accent-green: #6cbf43;
    --color-accent-red: #bf4343;

    --pageblock-margin: 96px;
    --border-radius: 6px;
    --border-radius-child: 4px;

    --font-family-default: 'Arimo', sans-serif;
    --font-family-headings: 'Yanone Kaffeesatz', sans-serif;

    --font-size-extra: 18px;
    --font-size-main: 16px;
    --font-size-nav-list: 14px;
    --font-size-small: 12px;

    --transition--static: all .3s ease-out;
    --transition--hover: all .2s ease-in;

    --grid-gap: 30px;
}
* {
    box-sizing: border-box;
}

::-webkit-input-placeholder {
    color: var(--color-primary);
    font-family: var(--font-family-headings);
    font-size: var(--grid-gap);
    font-weight: 300;
}
:-ms-input-placeholder {
    color: var(--color-primary);
    font-family: var(--font-family-headings);
    font-size: var(--grid-gap);
    font-weight: 300;
}
:-moz-placeholder {
    color: var(--color-primary);
    font-family: var(--font-family-headings);
    font-size: var(--grid-gap);
    font-weight: 300;
}
::-moz-placeholder {
    color: var(--color-primary);
    font-family: var(--font-family-headings);
    font-size: var(--grid-gap);
    font-weight: 300;
}

html, body {
    color: var(--color-text);
    font-family: var(--font-family-default);
    margin: 0;
    padding: 0;
}
h1, h2, h3, h4, h5, h6,
.trf-touch-swipe-casousel {
    user-select: none;
}

/*headings*/
h1, h2, h3, h4, h5, h6, .trf-h3 {
   font-family: var(--font-family-headings);
}
h1,
h2 {
    color: var(--color-secondary);
    font-size: 48px;
    font-weight: 300;
}
h3,
.trf-h3 {
    color: var(--color-secondary);
    font-size: 36px;
    font-weight: 400;
}
h4,
.trf-h4 {
    color: var(--color-secondary);
    font-size: 28px;
    font-weight: 400;
}

/*links*/
a {
    color: var(--color-secondary);
    transition: var(--transition--static);
}
a:hover {
    color: var(--color-secondary--hover);
    text-decoration: none;
    transition: var(--transition--hover);
}
a:active {
    color: var(--color-secondary--active);
    text-decoration: none;
    transition: var(--transition--hover);
}
.phone {
    display: block;
    font-family: var(--font-family-headings);
    font-size: 50px;
    font-weight: 300;
    text-decoration: none;
    white-space: nowrap;    
}
header .phone {
    color: var(--color-primary); 
    text-align: center;
}
header .phone:hover {
    color: var(--color-primary--hover);
}
header .phone:active {
    color: var(--color-primary--active);
}
footer .phone {
    color: var(--color-accent); 
    display: block;
    font-size: 42px;
    text-align: left;
    padding-left: 24px;
    position: relative;
}
footer .phone::before {
    color: var(--color-accent);
    content: "\f095";
    display: inline-block;
    font-family: 'Line Awesome Free';
    font-weight: 900;
    font-size: var(--font-size-extra);
    position: absolute;
    left: 0;
    top: 10px;
    width: 16px;
}
footer .phone + .phone {
    margin-top: 8px;
}
footer .phone:hover {
    color: var(--color-accent--hover);
}
footer .phone:active {
    color: var(--color-accent--active);
}

/*backgrounds*/
.trf-bg-primary {
    background: var(--color-primary);
}
.trf-bg-secondary {
    background: var(--color-secondary);
}
.trf-bg-waves {
    /*background-image: url(../img/wave-pattern.svg);*/
    background-image: url(../img/wave-pattern.jpg);
    background-repeat: repeat;
    background-position: top center;
}
.trf-bg-waves-alt {
    /*background-image: url(../img/wave-pattern.svg);*/
    background-image: url(../img/wave-pattern-saturated.jpg);
    background-repeat: repeat;
    background-position: center center;
}

/*gradients*/
.trf-bg-gradient-default {
    background: var(--color-primary);
    background: -moz-linear-gradient(top, var(--color-primary) 0%, var(--color-secondary) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, var(--color-primary)), color-stop(100%, var(--color-secondary)));
    background: -webkit-linear-gradient(top, var(--color-primary) 0%, var(--color-secondary) 100%);
    background: -o-linear-gradient(top, var(--color-primary) 0%, var(--color-secondary) 100%);
    background: -ms-linear-gradient(top, var(--color-primary) 0%, var(--color-secondary) 100%);
    background: linear-gradient(to bottom, var(--color-primary) 0%, var(--color-secondary) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--color-primary)', endColorstr='var(--color-secondary)', GradientType=0 );
}

/*general blocks*/
.page-wrapper {
    overflow: hidden visible !important;
    position: relative;
}
.trf-pageblock {
    position: relative;
    padding: 64px 0;
    width: 100%;
}
.trf-pageblock-home .trf-grid>*:first-child .trf-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.trf-pageblock-home .trf-catalog-grid--element {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    row-gap: var(--grid-gap);
}
.trf-pageblock-home h2 {
    font-weight: 400;
    margin-top: var(--font-size-main);
    text-transform: uppercase;
}
.trf-pageblock-home p {
    font-size: var(--font-size-nav-list);
}
.trf-pageblock-home .trf-button,
.trf-pageblock-new-fish .trf-button {
    display: block;
    text-align: center;
    width: 100%;
}
.trf-pageblock-home .trf-catalog-grid--element p {
    padding: 0 20px;
}
.trf-catalog-grid--element p {
    padding: 0 20px;
    margin-top: var(--grid-gap);
    font-size: var(--font-size-nav-list);
}
.trf-pageblock-home + .trf-pageblock-home {
    margin-top: 118px;
}
.trf-pageblock-new-fish {
    margin-bottom: 76px;
}
.trf-pageblock-new-fish .trf-panel-shadowed {
    background: #fff url(../img/fish-rozn.svg) 100px center no-repeat;
    background-size: auto 200%;
    margin-top: 20vh;
}
.trf-pageblock-new-fish h2 {
    font-weight: 400;
    margin-top: 8px;
    text-transform: uppercase;
}
.trf-overlay-new-fish {
    background-image: url(../img/bg-new-fish.jpg);
    z-index: -1 !important;
}
.trf-pageblock-home .trf-flora-spec-list {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
}
.trf-pageblock-home .trf-flora-spec-list img, 
.trf-pageblock-home .trf-flora-spec-list svg {
    height: 28px;
    width: 28px;
    margin-right: 8px;
}
.trf-flora-spec-list.trf-flora-spec-list-extended {
    flex-direction: column;
    row-gap: 10px;
    margin-bottom: var(--font-size-extra);
}
.trf-flora-spec-list.trf-flora-spec-list-extended>* {
    flex-direction: row;
    justify-content: space-between;
}
.trf-flora-spec-list.trf-flora-spec-list-extended>*>div {
    flex-direction: row;
}

.trf-container {
    margin: 0 auto;
    max-width: calc(100vw - (var(--pageblock-margin) * 2));
    position: relative;
    z-index: 1;
}

/*panels*/
.trf-panel-shadow {
    background-color: var(--color-light);
}

/*grid*/
.trf-grid {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--grid-gap) * -1);
    position: relative;
    row-gap: var(--grid-gap);
}
.trf-grid>* {
    padding-left: var(--grid-gap);
}
.trf-grid.trf-grid-collapse {
    margin-left: 0;
    gap: 0;
}
.trf-grid.trf-grid-collapse>* {
    padding-left: 0;
}
.trf-grid-justify-center {
    justify-content: center;
}
.trf-col-1-5 {
    width: 20%;
    flex: 0 20%;
}
.trf-col-2-5 {
    width: 40%;
    flex: 0 40%;
}
.trf-col-3-5 {
    width: 60%;
    flex: 0 60%;
}
.trf-col-4-5 {
    width: 80%;
    flex: 0 80%;
}
.trf-col-1-12 {
    width: calc(100% / 12);
    flex: 0 8.33%;
}
.trf-col-1-6,
.trf-col-2-12 {
    width: calc(100% / 6);
    flex: 0 16.66%;
}
.trf-col-1-4,
.trf-col-3-12 {
    width: 25%;
    flex: 0 25%;
}
.trf-col-1-3,
.trf-col-4-12 {
    width: calc(100% / 3);
    flex: 0 33.33%;
}
.trf-col-5-12 {
    width: calc(100% / 2.4);
    flex: 0 41.66%;
}
.trf-col-1-2,
.trf-col-2-4,
.trf-col-6-12 {
    width: 50%;
    flex: 0 50%;
}
.trf-col-7-12 {
    width: calc(100% / 12 * 7);
    flex: 0 58.33%;
}
.trf-col-2-3,
.trf-col-8-12 {
    width: calc(100% / 3 * 2);
    flex: 0 66.66%;
}
.trf-col-3-4,
.trf-col-9-12 {
    width: 75%;
    flex: 0 75%;
}
.trf-col-10-12 {
    width: calc(100% / 6 * 5);
    flex: 0 83.33%;
}
.trf-col-11-12 {
    width: calc(100% / 12 * 11);
    flex: 0 91.66%;
}
.trf-col-1-1,
.trf-col-4-4,
.trf-col-5-5,
.trf-col-12-12 {
    width: 100%;
    flex: 0 100%;
}
.trf-grid--center {
    align-items: center;
}

/*buttons*/
.trf-button {
    border: none;
    cursor: pointer;
    font-family: var(--font-family-headings);
    font-size: 30px;
    font-weight: 300;
    line-height: 40px;
    text-decoration: none;
    padding: 18px 24px;
    transition: var(--transition--static);
}
.trf-button:hover,
.trf-button:active {
    transition: var(--transition--hover);
}

.trf-button--primary {
    background: var(--color-primary);
    color: var(--color-inverse);
}
.trf-button--primary:hover {
    background: var(--color-primary--hover);
    color: var(--color-inverse);
}
.trf-button--primary:active {
    background: var(--color-primary--active);
    color: var(--color-inverse);
}

.trf-button--secondary {
    background: var(--color-secondary);
    color: var(--color-inverse);
}
.trf-button--secondary:hover {
    background: var(--color-secondary--hover);
    color: var(--color-inverse);
}
.trf-button--secondary:active {
    background: var(--color-secondary--active);
    color: var(--color-inverse);
}


.trf-button--accent {
    background: var(--color-accent);
    color: var(--color-dark);
    font-size: var(--font-size-main);
    font-weight: 700;
}
.trf-button--accent:hover {
    background: var(--color-accent--hover);
    color: var(--color-dark);
}
.trf-button--accent:active {
    background: var(--color-accent--active);
    color: var(--color-dark);
}

.callback-button {    
    box-shadow:     0px 5px 15px 0px rgba(89, 68, 26, 0.1),
                    0px 15px 35px 0px rgba(89, 68, 26, 0.15);
    display: block;
    font-size: var(--font-size-main);
    font-weight: 300;    
    height: 36px;
    line-height: var(--font-size-main);
    padding: 10px 24px;
    text-align: center;
    width: 100%;
}
.callback-button:hover {    
    box-shadow:     0px 3px 35px 0px rgba(89, 68, 26, 0.02),
                    0px 7px 45px 0px rgba(89, 68, 26, 0.025);
}

/*menu*/
.trf-menubar {
    font-size: 0px;
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.trf-menubar>* {
    display: flex;
    position: relative;
}
.trf-menubar>*:nth-child(n+2)::before {
    background-color: var(--color-accent--active);
    border-radius: 50%;
    content: '';
    display: block;
    position: absolute;
    left: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
}
.trf-menubar>li>a {
    /*color: var(--color-inverse);*/
    color: var(--color-additional);
    font-family: var(--font-family-headings);
    font-size: 30px;
    font-weight: 300;
    height: 76px;;
    line-height: 40px;
    /*display: block;*/
    text-decoration: none;
    padding: 18px 24px;

    display: flex;
    justify-content: center;
    align-self: center;    
    align-items: center;
}
.trf-menubar>li:hover>a,
.trf-menubar>li.active>a {
    background: var(--color-light--hover);
}

.trf-flex-justify {
    display: flex;
    justify-content: space-between;
}
.trf-flex-column {
    flex-direction: column;
}
.trf-flex-center {
    display: flex;
    justify-content: center;
}

.la-search {
    font-size: 32px;
    line-height: 36px;
}
.la-shopping-cart {
    font-size: 36px;
    line-height: 36px;
}
.trf-menubar.trf-iconbar>*:nth-child(n+2)::before {
    background-color: var(--color-primary);
    border-radius: 0;
    left: 0px;
    top: 0;
    bottom: 0;
    transform: none;
    width: 1px;
    height: 100%;
}


/*category list*/
.trf-category-list,
.trf-checkmark-list,
.trf-dropdown-cart-list,
.trf-flora-stat-list,
.trf-file-list,
.trf-unmarked-list {
    font-size: 0px;
    display: flex;
    flex-direction: column;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.trf-category-list>*,
.trf-checkmark-lis>*,
.trf-dropdown-cart-list,
.trf-flora-stat-list,
.trf-file-list>* {
    display: flex;
    position: relative;
}
.trf-category-list a {
    color: var(--color-text);
    font-size: var(--font-size-nav-list);
    font-weight: 300;
    display: block;
    text-decoration: none;
    padding: 6px 8px;
}
.trf-category-list a:hover {
    background-color: var(--color-light--hover);
    color: var(--color-secondary);
}
.trf-category-list>*.active a {
    background-color: var(--color-category--active);
    color: var(--color-inverse);
}


/*checkmark list*/
.trf-checkmark-list>* {
    font-size: var(--font-size-nav-list);
    padding: 6px 8px 6px 20px;
    position: relative;
}
.trf-checkmark-list>*::before {
    content: "\f00c";
    color: var(--color-accent-green);
    display: block;
    font-family: 'Line Awesome Free';
    font-size: 14px;
    font-weight: 900;
    width: 14px;
    height: 14px;
    position: absolute;
    left: 0;
    top: 7px;
}


/*social links*/
.trf-social-links {
    font-size: 0px;
    display: flex;
    flex-direction: row;
    list-style-type: none;
    margin: 0;
    margin-bottom: 32px;
    padding: 0;
    gap: 24px;
}
.trf-social-links>* {
    transition: var(--transition--static);
}
.trf-social-links>*:hover {
    transition: var(--transition--hover);
    opacity: .9;
    transform: scale(1.05);
}
.trf-social-links>* a {
    display: block;
}
.trf-social-links img {
    height: 60px;
    width: 60px;
}


/*nav list*/
nav {
    position: relative;
}
.trf-nav-list {
    font-size: 0px;
    display: flex;
    flex-direction: column;
    list-style-type: none;
    margin: 0;
    margin-bottom: 32px;
    padding: 0;
    gap: 24px;
}
.trf-nav-list>* {
    display: flex;
    position: relative;
}
/*.trf-nav-list>*:nth-child(n+2) {
    margin-top: 24px;
}*/
.trf-nav-list a {
    color: var(--color-text);
    font-size: var(--font-size-nav-list);
    font-weight: 300;
    display: block;
    text-decoration: none;
    padding: 0;
}
.trf-nav-list a:hover {
    background-color: var(--color-light--hover);
    color: var(--color-secondary);
}
.trf-nav-list>*.active a {
    background-color: var(--color-category--active);
    color: var(--color-inverse);
}


/*file list*/
.trf-file-list>li {
    display: flex;
    flex-direction: row;
}
.trf-file-list>li a {
    color: #00842f;
    text-decoration: none;
}
.trf-file-list>li:hover a {
    color: var(--color-accent-green);
    text-decoration: none;
}
.trf-file-list>li .trf-file-list--ico path {
    transition: var(--transition--static);
}
.trf-file-list>li:hover .trf-file-list--ico path {
    fill: var(--color-accent-green) !important;
    transition: var(--transition--hover);
}
.trf-file-list>li + li {
    margin-top: var(--grid-gap);
}
.trf-file-list--ico {
    width: 46px;
}
.trf-file-list--meta {
    font-size: var(--font-size-main);
    margin-left: var(--font-size-small);
}
.trf-file-list--meta p {
    font-size: var(--font-size-nav-list);
    margin: 0;
}
.trf-file-list--file-title {
    color: #00842f;
    font-size: 28px;
    font-weight: 400;
    margin: 0;
}
.trf-file-list--file-title + *{
    margin-top: 8px;
}


/*unmarked list*/
.trf-unmarked-list>li {
    font-size: var(--font-size-nav-list);
}
.trf-unmarked-list>li + li {
    margin-top: var(--font-size-small);
}



/*flora spec*/
.trf-flora-spec-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    row-gap: var(--grid-gap);
}
.trf-flora-spec-list>* {
    color: var(--color-primary);
    font-family: var(--font-family-headings);
    font-size: 30px;
    font-weight: 400;
    line-height: 36px;
    text-align: center;

    flex-direction: column;
    display: flex;
    align-items: center; 
}
.trf-flora-spec-list>*>div {
    color: var(--color-text);
    font-family: var(--font-family-default);
    font-size: var(--font-size-small);
    line-height: var(--font-size-small);
    flex-direction: column;
    display: flex;
    align-items: center; 
}
.trf-flora-spec-list>*.disabled {
    color: #e3f2f3;
}
.trf-flora-spec-list>*.disabled path {
    fill: #e3f2f3;
}
.trf-flora-spec-list div {
    text-align: center;
}
.trf-flora-spec-list div>span {
    color: var(--color-secondary);
    white-space: nowrap;
}
.trf-flora-spec-list img,
.trf-flora-spec-list svg {
    height: 36px;
    width: 36px;
}


/**/
.trf-flora-meta {
    align-items: flex-start !important;
    flex-direction: column;
    font-size: var(--font-size-nav-list);
    padding-bottom: 0 !important;
    padding-top: var(--font-size-main) !important;
}
.trf-flora-desc-list {
    margin: 0;
}
.trf-flora-desc-list>* {
    margin-bottom: 8px;
}
.trf-flora-desc-list dt {
    color: var(--color-secondary);
    float: left;
    clear: both;
    width: auto;
    margin-right: 4px;
}
.trf-flora-desc-list dd {
    margin-inline-start: 0px;
    float: left;
}


/*address*/
.address {
    font-size: 11px;
    padding-left: 24px;
    position: relative;
}
.address::before {
    content: "\e645";
    display: inline-block;
    font-family: 'Rivolicons-Free';
    font-size: 16px;
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
}
header .address {
    color: var(--color-secondary);
}
header .address::before {
    color: var(--color-primary);
}
footer .address {
    color: var(--color-light);
    font-size: var(--font-size-nav-list);
    line-height: var(--font-size-extra);
}
footer .address::before {
    color: var(--color-primary);
}

footer .copyright {
    color: var(--color-primary);
    font-size: var(--font-size-nav-list);
}

/*category menubar*/
.trf-category-menubar {
    font-size: 0px;
    display: flex;
    flex-direction: row;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.trf-category-menubar>* {
    display: flex;
    flex-grow: 1;
    position: relative;
}
.trf-category-menubar>*:nth-child(n+2) {
    border-left: 1px solid var(--color-separator);
}
.trf-category-menubar a {
    background: transparent;
    color: var(--color-primary);
    font-family: var(--font-family-headings);
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 24px;
    text-align: left;
    width: 100%;
}
.trf-category-menubar a span {
    padding-top: 4px;
}
.trf-category-menubar a:hover {
    background-color: var(--color-light--hover);
    color: var(--color-secondary);
}
.trf-category-menubar>*.active a {
    background-color: var(--color-accent);
    box-shadow:     0px 5px 15px 0px rgba(89, 68, 26, 0.1),
                    0px 15px 35px 0px rgba(89, 68, 26, 0.15);
    color: var(--color-dark);
}
.trf-category-menubar-ico {
    display: inline-block;
    margin-right: 8px;
    height: 32px;
    width: 32px;
}
.trf-category-menubar>*.active .trf-category-menubar-ico path.filprimary {
    fill: var(--color-light);
}
.trf-category-menubar>*.active .trf-category-menubar-ico path.filsecondary {
    fill: var(--color-accent--active);
}
.trf-category-menubar.trf-category-menubar-extra>* {
    flex-grow: 1;
    flex-basis: 0;
}
.trf-category-menubar.trf-category-menubar-extra a {
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: 22px;
}
.trf-category-menubar.trf-category-menubar-extra span {
    height: 48px;
}
.trf-category-menubar.trf-category-menubar-extra p {
    color: var(--color-text);
    font-family: var(--font-family-default);
    text-align: center;
    font-size: var(--font-size-nav-list);
    font-weight: 300;
}
.trf-category-menubar.trf-category-menubar-extra .trf-category-menubar-ico {
    display: inline-block;
    margin: 0 auto var(--grid-gap);
    height: 60px;
    width: 60px;
}
.trf-category-menubar.trf-category-menubar-extra .trf-category-menubar-wave {
    margin-top: var(--font-size-nav-list);
    width: 40%;
}
.trf-category-menubar.trf-category-menubar-extra .trf-category-menubar-wave path {
    fill: var(--color-secondary);
}

/*catalog grid*/
p+.trf-catalog-grid {
    margin-top: 64px;
}
.trf-catalog-grid--element {
    height: 100%;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
}
.trf-catalog-grid--element h3 {
    font-size: 30px;
    font-weight: 600;
    margin: 0;
}
.trf-catalog-grid--element h3 a {
    text-decoration: none;
    padding: 0 20px;
}
.trf-catalog-grid--element .trf-button {
    background: var(--color-light);
    color: var(--color-primary);
    display: block;
    text-align: center;
    position: relative;
}
.trf-catalog-grid--element .trf-button::before {
    background: var(--color-separator);
    content: '';
    display: block;
    height: 1px;
    position: absolute;
    left: 20px;
    top: 0;
    right: 20px;
    transition: var(--transition--static);
}
.trf-catalog-grid--element .trf-button:hover {
    background: var(--color-light--hover);
    color: var(--color-secondary);
}
.trf-catalog-grid--element .trf-button:hover::before {
    opacity: 0;
    transition: var(--transition--hover);
}
.trf-catalog-grid--element .trf-button:active {
    background: var(--color-light--active);
    color: var(--color-secondary);
}
.trf-catalog-grid--element,
.trf-table-cart>tbody>tr {
    background: var(--color-inverse);
    box-shadow: 0px 5px 15px 0px rgba(51, 97, 124, 0.2);
    transition: var(--transition--static);   
}
.trf-catalog-grid--element:hover,
.trf-panel-shadowed,
.trf-table-cart>tbody>tr:hover {
    background: var(--color-inverse);
    box-shadow:     0px 5px 15px 0px rgba(51, 97, 124, 0.2),
                    0px 15px 35px 0px rgba(51, 97, 124, 0.25);
    transition: var(--transition--hover);
}

.trf-news-grid h3::before {
    left: 20px;
}
.trf-news-grid .trf-badge {
    font-weight: 300;
}

.trf-product-quantity--wrapper>.trf-button::before {
    display: none;
}
.trf-product-quantity--wrapper>.trf-button {
    background: var(--color-primary);
    color: var(--color-inverse);
}
.trf-product-quantity--wrapper>.trf-button:hover {
    background: var(--color-primary--hover);
    color: var(--color-inverse);
}
.trf-product-quantity--wrapper>.trf-button:active {
    background: var(--color-primary--active);
    color: var(--color-inverse);
}
.trf-product-quantity--wrapper>.trf-button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/*thumbs*/
.trf-thumb-wrapper {
    overflow: hidden;
    position: relative;
}
.trf-thumb-wrapper img {
    width: 100%;
}
.trf-thumb-wrapper + h3 {
    margin-top: var(--font-size-extra);
    margin-bottom: var(--font-size-main);
}
.trf-thumb-wrapper + .trf-thumb-wrapper {
    margin-top: 16px;
}
.trf-thumb-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}
.trf-thumb-wrapper.trf-thumb-video .trf-thumb-overlay {
    background: var(--color-secondary);
    opacity: .5;
}
.trf-thumb-wrapper.trf-thumb-video::before {
    content: '';
    display: block;
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    content: "\f04b";
    color: var(--color-light);
    display: block;
    font-family: 'Line Awesome Free';
    font-size: 36px;
    font-weight: 900;
    line-height: 36px;
    width: 36px;
    height: 36px;
    z-index: 2;
    transition: var(--transition--static);
}
.trf-thumb-wrapper.trf-thumb-video:hover::before {
    transform:  translateY(-50%) translateX(-50%) scale(0.75);
    transition: var(--transition--hover);
}
.trf-thumb {
    display: block;
    transition: var(--transition--static);
}
.trf-thumb-wrapper:hover .trf-thumb {
    opacity: .6;
    transform:  scale(1.05);
    transition: var(--transition--hover);
}

.trf-product-slider-nav {
    margin-top: 20px;
}
.trf-product-slider-nav .slick-list {
    margin: 0 -10px;
}
.trf-product-slider-nav .slick-slide {
    background: var(--color-light--hover);
    margin: 0 10px;
}
.trf-product-slider-nav .slick-slide:not(.slick-current):hover img {
    cursor: pointer;
    opacity: .9;
    transition: var(--transition--hover);
}
.trf-product-slider-nav .slick-slide img {
    transition: var(--transition--static);
    width: 100%;
}
.trf-product-slider-nav .slick-slide:not(.slick-current) img {
    opacity: .3;
    mix-blend-mode: luminosity;
}
/*.trf-product-slider-nav .slick-slide::before {
    background: var(--color-secondary);
    opacity: .5;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}*/


/*badges*/
.trf-thumb-badge-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;

    pointer-events: none;
}
.trf-badge {
    color: var(--color-light);
    font-family: var(--font-family-headings);
    font-size: var(--font-size-extra);
    height: 36px;
    padding: 8px 20px;
    line-height: 20px;
}
.trf-badge + .trf-badge {
    margin-top: 4px;
}
.trf-badge-new {
    background-color: var(--color-accent-blue);
}
.trf-badge-sale {
    background-color: var(--color-accent-green);
}
.trf-badge-outofstock {
    background-color: var(--color-accent-red);
}
.trf-badge-onrequest {
    background-color: var(--color-category--active);
}



/*prices*/
.trf-catalog-grid--element--price-block {
    padding: 0 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: var(--font-size-extra);
}
.trf-catalog-grid--element--price-block .price,
.trf-table-cart .price {
    font-family: var(--font-family-headings);
    font-size: 50px;
}
.trf-catalog-grid--element--price-block .price-unit,
.trf-table-cart .price-unit {
    font-family: var(--font-family-headings);
    font-size: var(--font-size-extra);
}
.trf-catalog-grid--element--price-block .under-waved {
    padding-top: 4px;
}
.trf-catalog-grid--element--price-block .under-waved::before {
    bottom: -16px;
}
.trf-catalog-grid--element--price-block .price-text {
    font-size: var(--font-size-nav-list);
}

.trf-catalog-grid--element--price-block.flora {
    align-items: flex-start;
    flex-direction: column;
    row-gap: var(--font-size-main);
}
.trf-catalog-grid--element--price-block.flora>*:first-child {
    align-items: baseline;
    display: flex;
    flex-direction: row;
    column-gap: var(--font-size-extra);
    width: 100%;
}
.trf-catalog-grid--element--price-block.flora>*:first-child .trf-select {
    flex-grow: 2;
}


/*quick wiev link*/
.trf-catalog-grid--element--quick-wiev-link {
    padding: 0 20px 8px;
    text-align: center;
}
.trf-catalog-grid--element--quick-wiev-link a {
    border-bottom: 1px dotted var(--color-secondary);
    color: var(--color-secondary);
    font-size: var(--font-size-extra);
    text-decoration: none;
    text-align: center;
    transition: var(--transition--static);
}
.trf-catalog-grid--element--quick-wiev-link a:hover {
    border-bottom: 1px dotted transparent;
    transition: var(--transition--hover);
}


/*pagination*/
.trf-pagination {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
.trf-pagination>ul {
    font-size: 0;
    list-style-type: none;
    gap: 10px;
}
.trf-pagination>ul>li>* {
    display: block;
    font-family: var(--font-family-headings);
    font-size: 30px;
    font-weight: 300;
    height: 46px;
    line-height: 46px;
    min-width: 46px;
    text-align: center;
    text-decoration: none;
    border: 1px solid #e3f2f3;
}
.trf-pagination>ul>li:first-child>*,
.trf-pagination>ul>li:last-child>* {
    padding: 0 18px;
}
.trf-pagination>ul>li:hover>* {
    background: #d4ebed;
    border: 1px solid #e3f2f3;
    color: var(--color-secondary);
}
.trf-pagination>ul>li.active>* {
    background: #73c2c7;
    border: 1px solid var(--color-category--active);
    color: var(--color-light);
}
.trf-pagination>ul>li.disabled>* {
    pointer-events: none;
}
.trf-pagination>ul>li.disabled>* {
    border: 1px solid #e3f2f3;
    color: #e3f2f3;
}



/*touch swipe carousel*/
.trf-touch-swipe-casousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    scroll-padding: 48px;
    padding-bottom: 32px;
    -webkit-overflow-scrolling: touch;
    width: calc(100% + var(--pageblock-margin));
    margin-right: -var(--pageblock-margin);
}
.trf-touch-swipe-casousel--item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 calc((100vw - (var(--pageblock-margin) * 2)) / 4);
    width: calc((100vw - (var(--pageblock-margin) * 2)) / 4);
    height: 600px;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    background-color: var(--color-muted);
    font-size: 1.5rem;
    border-radius: var(--border-radius);
}
.trf-touch-swipe-casousel--item .trf-button {
    border-radius: var(--border-radius-child);
}
.trf-touch-swipe-casousel>.trf-touch-swipe-casousel--item:last-child {
    margin-right: var(--pageblock-margin);
}


/*form*/
.trf-form input:not([type]), 
.trf-form input[type=text], 
.trf-form input[type=password], 
.trf-form input[type=email], 
.trf-form input[type=url], 
.trf-form input[type=search], 
.trf-form input[type=tel], 
.trf-form input[type=number], 
.trf-form input[type=datetime], 
.trf-form input[type=datetime-local], 
.trf-form input[type=date], 
.trf-form input[type=month], 
.trf-form input[type=time], 
.trf-form input[type=week], 
.trf-form input[type=color], 
.trf-form select, 
.trf-form textarea {
    height: 46px;
    line-height: 46px;
    max-width: 100%;
    padding: 8px 12px;
    border: none;
    border-bottom: 1px solid var(--color-light--active);
    background: #fff;
    font: var(--font-family-headings);
    outline: none;
    transition: var(--transition--static);
}
.trf-form input:not([type]), 
.trf-form input[type=text]:focus, 
.trf-form input[type=password]:focus, 
.trf-form input[type=email]:focus, 
.trf-form input[type=url]:focus, 
.trf-form input[type=search]:focus, 
.trf-form input[type=tel]:focus, 
.trf-form input[type=number]:focus, 
.trf-form input[type=datetime]:focus, 
.trf-form input[type=datetime-local]:focus, 
.trf-form input[type=date]:focus, 
.trf-form input[type=month]:focus, 
.trf-form input[type=time]:focus, 
.trf-form input[type=week]:focus, 
.trf-form input[type=color]:focus, 
.trf-form select:focus, 
.trf-form textarea:focus {
    border-bottom: 1px solid var(--color-primary--active);
    color: var(--color-primary--active);
    background: #e3f2f3;
    transition: var(--transition--hover);
}
.trf-form textarea {
    height: inherit;
}


/*checkbox*/
.trf-checkbox label {
    cursor: pointer;
    display: block;
    font-size: 11px;
    padding-left: 48px;
    position: relative;
    text-align: justify;
}
.trf-checkbox input[type=checkbox] {
    background: transparent;
    border: 0;
    cursor: pointer;
    outline: none;
    width: 0;
    height: 0;
    display: inline-block;
    position: absolute;
    left: 2px;
    top: 2px;
    margin: 0;
}
.trf-checkbox input[type=checkbox]::before {
	content: '';
	display: block;
    background: transparent;
    width: 28px;
    height: 28px;
	border: 2px solid var(--color-primary);
	position: absolute;
    left: 0;
    top: 0;	
    transition: var(--transition--static);
}
.trf-checkbox input[type=checkbox]:hover {
	border: 2px solid var(--color-primary--hover);
}
.trf-checkbox input[type=checkbox]:hover::before {
	border: 2px solid var(--color-primary--hover);
    transition: var(--transition--hover);
}
.trf-checkbox input[type=checkbox]::after {
	content: "\f00c";
    color: var(--color-secondary);
	display: block;
    font-family: 'Line Awesome Free';
    font-size: 24px;
    font-weight: 900;
    width: 24px;
    height: 24px;
	position: absolute;
    left: 4px;
    top: 4px;	
    transition: var(--transition--static);
	mix-blend-mode: luminosity;
    opacity: .1;
	background-size: contain;
}
.trf-checkbox input[type=checkbox]:hover::after {
    transition: var(--transition--hover);
	mix-blend-mode: luminosity;
    opacity: .3;
}
.trf-checkbox input[type=checkbox]:checked::after {
    transition: var(--transition--static);
	mix-blend-mode: normal;
    opacity: 1;
}
.trf-checkbox input[type=checkbox]:checked:hover::after {
    transition: var(--transition--hover);
	mix-blend-mode: normal;
    opacity: .8;
}


/*radio*/
.trf-radio + .trf-radio {
    margin-top: var(--font-size-extra);
}
.trf-radio input[type=radio] {
	display: none;
}
.trf-radio label {
	display: inline-block;
	cursor: pointer;
	position: relative;
	padding-left: 25px;
	margin-right: 0;
	line-height: 18px;
	user-select: none;
}
.trf-radio label::before {
	content: "";
	display: inline-block;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border-radius: 8px;
	position: absolute;
	left: 0;
	bottom: 1px;
    border: 1px solid #71bec3;
    transition: var(--transition--static);
}
.trf-radio label::after {
	content: "";
	display: block;
    position: absolute;
    top: 4px;
    left: 3px;
    height: 10px;
	width: 10px;
    background: var(--color-secondary);
    border-radius: 5px;
    opacity: 0;
    transition: var(--transition--static);
} 
/* Checked */
.trf-radio input[type=radio]:checked + label::after {
    opacity: 1;
    transition: var(--transition--hover);
} 
/* Hover */
.trf-radio label:hover::before,
.trf-radio label:hover::after {
	filter: brightness(120%);
    transition: var(--transition--hover);
} 
/* Disabled */
.trf-radio input[type=radio]:disabled + label::before {
	filter: grayscale(100%);
    transition: var(--transition--hover);
}

.trf-button--place-order {
    font-family: var(--font-family-headings);
    font-size: 30px;
    font-weight: 300;    
    line-height: 40px;
    box-shadow: 0px 5px 15px 0px rgba(51, 97, 124, 0.2);
}
.trf-button--place-order:hover {
    box-shadow:     0px 5px 15px 0px rgba(51, 97, 124, 0.2),
                    0px 15px 35px 0px rgba(51, 97, 124, 0.25);
}


.cart-order-total {
    color: var(--color-secondary);
    text-align: center;
    font-family: var(--font-family-headings);
    font-size: 50px;
    font-weight: 500;
    padding-top: var(--font-size-main);
}
.cart-order-total h3 {
    color: var(--color-secondary);
    margin: 0 0 var(--font-size-extra);
    text-align: center;
    font-family: var(--font-family-headings);
    font-size: 36px;
    font-weight: 300;
}



.footer-feedback-form--wrapper {
    overflow: visible;
    position: relative;
    z-index: 1;
}
.footer-feedback-form--wrapper::before,
.footer-feedback-form--wrapper::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    height: calc(100% + 76px);
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    width: 33%;
}
.footer-feedback-form--wrapper::before {
    background-image: url(../img/reeds-l.svg);
    background-position: bottom left;
    left: 0;
}
.footer-feedback-form--wrapper::after {
    background-image: url(../img/reeds-r.svg);
    background-position: bottom right;
    right: 0;
}
.footer-feedback-form {
    margin-bottom: calc(-64px - 76px);
    position: relative;
    z-index: 1;
}
.footer-feedback-form h3 {
    text-align: center;
}
.footer-feedback-form h3::before {    
    left: 50%;
    transform: translateX(-50%);
}


/*select*/
/*
.trf-select {
    cursor: pointer;
    height: 42px;
    width: 100%;
    background-color: var(--color-light);
    border: 1px solid var(--color-light--active);
    font-family: var(--font-family-headings);
    font-size: 30px;
    font-weight: 300;
    padding: 0 38px 0 8px;
    position: relative;
}
.trf-select::after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    height: 42px;
    width: 32px;
    text-align: center;
    background-color: var(--color-light);
    border: 1px solid var(--color-light--active);
    color: var(--color-secondary);
    font-family: 'Avenir Next Cyr Bold';
    font-size: 18px;
    position: absolute;
    top: 0;
    bottom: 0;
    cursor: pointer;
    transition: var(--transition--static);
}
.trf-select:hover::after {
    background: #d4ebed;
    border: 1px solid #e3f2f3;
    color: var(--color-secondary);
    transition: var(--transition--hover);
}
*/
.trf-select {
    position: relative;
}
.trf-select::before {
    box-sizing: border-box;
    content: '\f107';
    display: block;
    position: absolute;
    right: 0;
    height: 42px;
    line-height: 38px;
    width: 32px;
    text-align: center;
    background-color: var(--color-light);
    border: 1px solid var(--color-light--active);
    color: var(--color-secondary);
    font-family: 'Line Awesome Free';
    font-weight: 900;
    font-size: 18px;
    position: absolute;
    top: 0;
    bottom: 0;
    cursor: pointer;
    transition: var(--transition--static);
    z-index: 1;
    pointer-events: none;
}
.trf-select:hover::before {
    background: #d4ebed;
    border: 1px solid #e3f2f3;
    color: var(--color-secondary);
    transition: var(--transition--hover);
}
select {
    box-sizing: border-box;
    width: 100%;
    cursor: pointer;
    height: 42px;
    width: 100%;
    background-color: var(--color-light);
    border: 1px solid var(--color-light--active);
    font-family: var(--font-family-headings);
    font-size: 30px;
    font-weight: 300;
    padding: 0 38px 0 8px;
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    transition: var(--transition--static);
}
select::-ms-expand {
    display: none;
}



.header-home {
    background-image: url(../img/bg-home.jpg);
    padding-top: 50px;
    margin-bottom: 118px;
}
.header-home .trf-pageblock + .trf-pageblock {
    margin-top: 30vh;
}
.header-home .trf-panel-shadowed .trf-button {
    display: block;
    text-align: center;
}
.header-home .trf-nav-sticky:not(.active) nav {
    background: var(--color-secondary);
}
.header-home .trf-nav-sticky:not(.active) nav>ul>li>a {
    color: var(--color-inverse);
}
.header-home .trf-nav-sticky:not(.active) nav>ul>li:hover>a {
    background: var(--color-secondary--hover);
}
.header-home .logo-top {
    padding: 0 60px;
    margin: 12px 0 50px;
}
.header-home .logo-top.under-waved::before {
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    width: 135px;
    height: 10px;
}
.header-home .trf-color-inverse .phone {
    color: var(--color-inverse);
}
.header-home-panel {
    padding-left: 30vw;
    margin-left: -30vw;
    background-image: url(../img/wave-pattern.jpg);
    background-repeat: repeat;
    background-position: top center;
    position: relative;
}
.header-home-panel::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    background: #71bec3;
    width: 30vw;
    height: 76px;
}
.header-home-panel>div {
    background: var(--color-light);
}
.trf-line-height-expand {
    line-height: var(--grid-gap);
}

header>*:first-child {
    padding: 64px 0 0 12px;
}
header.header-home>*:first-child {
    padding: 64px 0 0 0;
}

footer {
    background: var(--color-secondary);
    color: var(--color-inverse);
    position: relative;
}
footer::before,
.trf-fish-catalog::after {
    background-image: -moz-linear-gradient( -90deg, rgba(0,23,67,0.50196) 0%, rgba(0,23,67,0) 100%);
    background-image: -webkit-linear-gradient( -90deg, rgba(0,23,67,0.50196) 0%, rgba(0,23,67,0) 100%);
    background-image: -ms-linear-gradient( -90deg, rgba(0,23,67,0.50196) 0%, rgba(0,23,67,0) 100%);
    content: '';
    display: block;
    height: 150px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
}
.trf-fish-catalog::after {
    top: inherit;
    bottom: 0;
    transform: rotate(180deg);
}

.trf-fish-catalog-panel {
    margin-bottom: -140px;
}
.trf-fish-catalog-panel .trf-button {
    display: block;
    text-align: center;
}

footer h3 {
    color: var(--color-inverse);
}
footer .trf-category-list {
    font-size: 0px;
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;    
}
footer .trf-category-list>* {
    display: flex;
    position: relative;
}
footer .trf-category-list a {
    background: var(--color-primary);
    color: var(--color-inverse);
    font-weight: 300;
    display: block;
    text-decoration: none;
    padding: 6px 8px;
}
footer .trf-category-list a:hover {
    background: var(--color-accent);
    color: var(--color-dark);
}
footer .trf-nav-list a {
    background: transparent;
    color: var(--color-inverse);
}
footer .trf-nav-list a:hover {
    background: transparent;
    color: var(--color-category--active);
}
footer .trf-nav-list>*.active a {
    background: transparent;
    color: var(--color-accent);
}


/*modals*/
.trf-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
    z-index: 100;
}
.trf-dropdown-search::after,
.trf-modal::after {
    content: "";
    display: block;
    position: absolute;
    background: rgba(51,97,124,.5);
    top: 50%;
    left: 50%;
    height: 200vh;
    width: 200vw;
    transform: translateX(-50vw) translateY(-50vh);
    z-index: -1;
    backdrop-filter: blur(4px);
  }
.trf-modal-content {
    background-color: #fff;
    box-shadow: 0px 5px 15px 0px rgba(51, 97, 124, 0.2),
                0px 15px 35px 0px rgba(51, 97, 124, 0.25);
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease-in;
    transform: translateY(50px);
}
.trf-modal-body {
    max-height: 70vh;
    overflow: hidden auto;
}
.trf-modal-close {
    cursor: pointer;
    position: absolute;
    top: var(--grid-gap);
    right: var(--grid-gap);
    font-size: 32px;
    width: 24px;
    height: 24px;
    z-index: 1;
}
.trf-modal-close i {
    color: var(--color-additional);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}
.trf-modal.active {
    opacity: 1;
    pointer-events: all;
    transition: opacity 0.2s ease-in, transform 0.2s ease-in;
}
.trf-modal.active > .trf-modal-content {
    transition: transform 0.2s ease-out;
    transform: translateY(0);
}


/*dropdowns*/
.trf-dropdown-wrapper {
    position: relative;
}
.trf-dropdown-switcher {
    position: relative;
}
.trf-dropdown-switcher.active {
    background: var(--color-additional);
    color: var(--color-light);
    z-index: 2;
}
.trf-dropdown-switcher.active:hover {
    background: var(--color-secondary--hover);
}
.trf-dropdown {
    background: var(--color-light);
    box-shadow: 0px 5px 15px 0px rgba(51, 97, 124, 0.2),
                0px 15px 35px 0px rgba(51, 97, 124, 0.25);
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: var(--transition--static);
}
.trf-dropdown.active {
    opacity: 1;
    pointer-events: all;
    transition: var(--transition--hover);
}

.trf-cart-count {
    background: var(--color-accent);
    border-radius: 12px;
    color: var(--color-dark);
    display: block;
    font-family: var(--font-family-headings);
    font-size: var(--font-size-main);
    font-weight: 400;
    height: 24px;
    min-width: 24px;
    line-height: 24px;
    padding: 0 6px;
    position: absolute;
    text-align: center;
    top: 8px;
    right: 8px;
}
.trf-dropdown-cart {
    right: 0;
    bottom: 0;
    transform: translateY(100%);
    width: 400px;
    z-index: 1;
    max-height: 60vh;
    overflow: hidden auto;
}
.trf-dropdown-cart-list li + li {
    margin-top: var(--font-size-main);
}
/*.trf-dropdown-cart-list--element {
    
}*/
.trf-dropdown-cart-list--element h3 {
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    text-decoration: none;
}
.trf-dropdown-cart-list--element h3 a {
    text-decoration: none;
}
.trf-dropdown-cart-list--element-price {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.trf-dropdown-cart-list--element-price .trf-product-count {
    font-size: var(--font-size-extra);
    height: var(--grid-gap);
    width: 100px;
}
.trf-dropdown-cart-list--element-price .trf-product-quantity>button {
    height: var(--grid-gap);
    width: var(--grid-gap);
}
.trf-dropdown-cart-list--element-price>* {
    align-items: center;
    display: flex;
}
.trf-dropdown-cart-list--element-price>*:first-child {
    white-space: nowrap;
}
.trf-dropdown-cart-list--element-price .price,
.trf-dropdown-cart-list--element-price .price-unit {
    font-family: var(--font-family-headings);
    font-size: var(--font-size-extra);
}
.trf-dropdown-cart-price-total {
    font-size: var(--font-size-main);
    margin-bottom: var(--font-size-main);
}
.trf-dropdown-cart-price-total>*:last-child {
    font-weight: 700;
}

.trf-dropdown-search {
    left: 0;
    top: 0;
    width: 1200px;
    z-index: 2;
    transform: translateX(calc(-100% + 152px));
}
.trf-dropdown-search::after {
    height: 200vh;
}
.trf-form-search {
    display: flex;
    flex-direction: row;
}
.trf-form-search input[type=text] {
    border: none;
    color: var(--color-secondary);
    font-size: 32px;
    height: 76px;
    padding: 18px 24px;
    position: relative;
    width: calc(100% - 76px);
    z-index: 1;
}
.trf-form-search input[type=text]:focus {
    background: var(--color-light);
    border: none;
}
.trf-form-search-button {
    background: var(--color-light);
    border: none;
    color: var(--color-additional);
    height: 76px;
    width: 76px;
    z-index: 2;
    transition: var(--transition--static);
}
.trf-form-search-button:hover {
    background: var(--color-light--hover);
    color: var(--color-additional);
    cursor: pointer;
    transition: var(--transition--hover);
}
/*
.trf-dropdown-search::after {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: none;
}
*/
.trf-menubar>li>a.trf-dropdown-switcher {
    width: 76px;
}


/*quantity*/
.multiprice-grid--element>* {
    align-items: center;
    display: flex;
    margin: 0;
    padding: 20px;
}
.multiprice-grid--element>*:first-child {
    padding: 20px 20px 0px;
}
.trf-h3,
.multiprice-grid--element h3 {
    font-size: 30px;
    font-weight: 600;
    margin: 0;
}
/*.trf-product-quantity--wrapper {
    display: flex;
}*/
.trf-product-quantity--wrapper>.trf-button,
.trf-dropdown-cart>.trf-dropdown-content>.trf-button {
	height: 42px;
    line-height: 38px;
    padding: 4px 24px 0px;
}
.trf-product-quantity {
	position: relative;
}
.trf-product-quantity>button {
	height: 42px;
    width: 32px;
    text-align: center;
	background-color: var(--color-light);
	border: 1px solid var(--color-light--active);
    color: var(--color-secondary);
    font-family: 'Avenir Next Cyr Bold';
    font-size: 18px;
	position: absolute;
    top: 0;
    bottom: 0;
	cursor: pointer;
	transition: var(--transition--static);
}
.trf-product-quantity>button:hover {
    background: #d4ebed;
    border: 1px solid #e3f2f3;
    color: var(--color-secondary);
	transition: var(--transition--hover);
}
.trf-product-quantity>button:active {
    color: #ddd;
	transition: var(--transition--hover);
}
.trf-product-count {
	height: 42px;
    width: 100%;
    text-align: center;
	background-color: var(--color-light);
	border: 1px solid var(--color-light--active);
    font-family: var(--font-family-headings);
    font-size: 30px;
    font-weight: 300;
    outline: none;
}
.trf-product-count:-webkit-outer-spin-button,
.trf-product-count:-webkit-inner-spin-button,
.trf-product-count::-webkit-outer-spin-button,
.trf-product-count::-webkit-inner-spin-button,
.trf-product-count:hover:-webkit-outer-spin-button,
.trf-product-count:hover:-webkit-inner-spin-button,
.trf-product-count:hover::-webkit-outer-spin-button,
.trf-product-count:hover::-webkit-inner-spin-button,
.trf-product-count:focus:-webkit-outer-spin-button,
.trf-product-count:focus:-webkit-inner-spin-button,
.trf-product-count:focus::-webkit-outer-spin-button,
.trf-product-count:focus::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; 
    opacity: 0;
}
input[type='number'] {
    -moz-appearance:textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.trf-product-quantity>button:first-of-type {
	left: 0;
}
.trf-product-quantity>button:last-of-type {
	right: 0;
}

.trf-color-primary {
    color: var(--color-primary);
}
.trf-color-secondary {
    color: var(--color-secondary);
}
.trf-color-additional {
    color: var(--color-additional);
}
.cover {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.trf-fit-height {
    height: 100%;
}

.logo-top {
    display: block;
    padding: 0 8px 8px;
}

.under-waved {
    position: relative;
}
.under-waved::before {
    background: transparent url(../img/wave-underscore.svg) no-repeat left center;
    background-size: cover;
    content: '';
    display: block;
    position: absolute;
    bottom: -20px;
    left: 0;
    height: 6px;
    width: 72px;
}
.under-waved>span>i {
    color: var(--color-primary);
    margin-right: 12px;
}

.slogan {
    color: var(--color-secondary);
    font-family: var(--font-family-headings);
    font-size: var(--font-size-main);
    font-weight: 300;
}

.trf-panel + .trf-panel {
    /*margin-top: 36px;*/
    margin-top: calc(var(--grid-gap) * 2);
}

.trf-padding-remove {
    padding: 0;
}
.trf-padding {
    padding: 30px;
}
.trf-padding-bottom {
    padding-bottom: var(--grid-gap);
}
.trf-margin-top {
    margin-top: var(--grid-gap);
}
.trf-margin-remove-top {
    margin-top: 0;
}
.trf-margin-neg-top {
    margin-top: -16px;
}
.trf-margin-bottom {
    margin-bottom: var(--grid-gap);
}
/*.trf-modal-content {
    max-height: 80vh;
}*/
.trf-modal-content>h3:first-of-type,
.trf-padding>h3:first-of-type {
    margin-top: 0px;
}
.trf-padding-small {
    padding: 36px;
}
.trf-padding-vertical-small {
    padding: 36px 0;
}
.trf-padding-vertical-medium {
    padding: 64px 0;
}
.trf-margin-top-medium {
    margin-top: 64px;
}
.trf-margin-top-large {
    margin-top: 96px;
}


.trf-nav-sticky-wrapper {
    box-sizing: content-box;
}
.trf-nav-sticky {
    /*top: -75px;*/
    z-index: 2;
    /*transition: var(--transition--static);*/
}
.trf-nav-sticky.active {    
    /*background-color: var(--color-light--hover);*/
    background-color: #e3f2f3;
    box-shadow: 0px 0px 6px 0px rgba(51, 97, 124, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    transition: var(--transition--static);
}

hr {
    box-sizing: content-box;
    height: 0;
    margin: 15px 0;
    border: 0;
    border-top: 1px solid var(--color-light--active);
}

.trf-element-displace {
    margin-bottom: -140px;
}

.trf-fish-catalog {
    background: #5fa4b0;
}
.trf-fish-catalog h2 {
    margin-top: 64px;
}
.trf-overlay-fish-catalog {
    background-image: url(../img/bg-fish-catalog.jpg);
    mix-blend-mode: luminosity;
    opacity: .3;
    z-index: 0;
}

.trf-menubar-switcher {
    display: none;
}

.trf-text-center {
    text-align: center;
}

.trf-color-inverse {
    color: var(--color-inverse);
}
.under-waved.trf-color-inverse::before {
    background: transparent url(../img/wave-underscore-inverse.svg) no-repeat left center;
    background-size: cover;
}
.under-waved.trf-text-center::before {
    left: 50%;
    transform: translateX(-50%);
}

.trf-table {
    /*border-collapse: collapse;*/
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 var(--grid-gap);
}
.trf-table-cart>thead th {
    color: var(--color-secondary);
    padding: var(--font-size-small);
    text-align: center;
    font-size: var(--font-size-nav-list);
    font-weight: 300;
}
.trf-table-cart .trf-thumb-wrapper,
.trf-table-cart>tbody tr>td:first-child {
    width: 150px;
}
.trf-table-cart>tbody tr>td:nth-child(n+2) {
    padding: var(--grid-gap);
}
.trf-table-cart>tbody tr>td:last-child {
    width: 106px;
}
.trf-table-cart>tbody tr h3 {
    margin: 0;
}
.trf-table-cart>tbody tr h3 a {
    text-decoration: none;
}
.trf-table-cart>tbody tr h3 + * {
    margin-top: var(--font-size-extra);
}
.trf-table-cart .trf-button-remove {
    background: #f8ecec;
    color: var(--color-accent-red);
    height: 46px;
    line-height: 46px;
    width: 46px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.trf-table-cart .trf-button-remove:hover {
    background: #f1dada;
}
.trf-table-cart input[type=number].trf-product-count {
    height: 42px;
    line-height: 42px;
    background-color: var(--color-light);
    border: 1px solid var(--color-light--active);
}
.trf-table-cart tr>td:nth-child(2) {
    min-width: 250px;
}
.trf-table-cart tr>td:nth-child(3),
.trf-table-cart .trf-product-quantity--wrapper {
    width: 120px;
}
.trf-table-cart tr>td:nth-child(4) {
    text-align: center;
}
.trf-table-scroller {
	position: relative;
    margin-right: -32px;    
    margin-left: -32px;
}
.trf-table-scroller-inner {
	overflow-x: scroll;
}
/*
.trf-table-wrapper {
	margin-right: 32px;
}
*/
/*.trf-category-menubar-extra::after,*/
.trf-table-scroller::before,
.trf-table-scroller::after {
    top: 0;
	bottom: 0;
	position: absolute;
	content: '';
	display: block;
    width: var(--grid-gap);
	height: 100%;
	background: rgba(255,255,255,0);
	background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,1)));
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );	
    z-index: 1;
}
/*.trf-category-menubar-extra {
    position: relative;
}
.trf-category-menubar-extra::after {
    right: 0;
}*/
.trf-table-scroller::before {
	left: 0;
    transform: rotate(180deg);
}
.trf-table-scroller::after {
	right: 0;
}
.trf-table-scroller table {
	border-right: var(--grid-gap) solid #fff;
    padding-left: 32px;
}
/*
.table-scroller table::after {
	width: 32px;
	display: inline-block;
	content: '';
	height: 100%;
}
*/

@media (max-width: 859px) {
    .trf-pageblock {
        padding: 32px 0;
    }
    .trf-container {
        margin: 0 calc(var(--pageblock-margin) / 3);
        max-width: inherit;
    }

    .trf-touch-swipe-casousel {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: calc(var(--pageblock-margin) / 6);
        scroll-padding: calc(var(--pageblock-margin) / 3);
        -webkit-overflow-scrolling: touch;
        width: calc(100% + (var(--pageblock-margin) / 3 * 2));
        margin-left: calc(-1 * (var(--pageblock-margin) / 3));
        margin-right: calc(-1 * (var(--pageblock-margin) / 3));
        padding-left: calc(var(--pageblock-margin) / 3 * 2);
        box-sizing: border-box;
    }
    .trf-touch-swipe-casousel--item {
        flex: 0 0 calc(100vw - (var(--pageblock-margin) / 3 * 2));
        width: calc(100vw - (var(--pageblock-margin) / 3 * 2));
        height: 300px;
        scroll-snap-align: start;
        scroll-snap-stop: normal;
        background-color: var(--color-muted);
        font-size: 1.5rem;
        border-radius: var(--border-radius);
    }
    .trf-touch-swipe-casousel>.trf-touch-swipe-casousel--item:last-child {
        margin-right: calc(var(--pageblock-margin) / 3);
    }
}

@media (max-width: 959.99px) {  
    /*.trf-button {
        font-size: var(--font-size-extra);
    }*/

    h1, h2 {
        font-size: 36px;
    }

    h3, .trf-h3 {
        font-size: 30px;
    }

    header .phone {
        margin-bottom: var(--font-size-extra);
    }

    .header-home::after {
        background-image: -moz-linear-gradient( -90deg, rgba(0,23,67,0.9) 0%, rgba(0,23,67,0) 100%);
        background-image: -webkit-linear-gradient( -90deg, rgba(0,23,67,0.9) 0%, rgba(0,23,67,0) 100%);
        background-image: -ms-linear-gradient( -90deg, rgba(0,23,67,0.9) 0%, rgba(0,23,67,0) 100%);
        content: '';
        display: block;
        height: 150px;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
    }

    header.header-home {
        padding-top: 0;
    }
    header.header-home>*:first-child {
        padding: 0;
    }
    header.header-home .trf-nav-sticky {
        top: 0;
    }

    .header-home .trf-pageblock + .trf-pageblock {
        margin-top: 0;
    }

    .header-home .trf-nav-sticky:not(.active) nav {
        background: transparent;
    }
    /*.header-home .trf-nav-sticky:not(.active) nav>ul>li>a {
        
    }*/

    .header-home .logo-top {
        padding: 0;
        margin: 12px 0 50px;
    }

    .header-home .trf-element-displace,
    .trf-pageblock-home .trf-element-displace,
    .trf-fish-catalog-panel {
        margin-bottom: 0;
    }

    .trf-pageblock-new-fish .trf-element-displace {
        margin-bottom: calc(-32px - 76px);
    }

    .trf-product-quantity--wrapper>.trf-button, 
    .trf-dropdown-cart>.trf-dropdown-content>.trf-button {
        font-size: 24px;
        padding: 4px 14px 0px;
        white-space: nowrap;
    }
    .multiprice-grid--element h3 {
        font-size: 18px;
        white-space: nowrap;
    }
    .trf-catalog-grid--element--price-block .price, .trf-table-cart .price {
        font-size: 30px;
    }

    header>*:first-child {
        padding: 32px 0 0 0;
    }  
    header>*:first-child>.trf-container>.trf-grid {
        row-gap: var(--font-size-extra);
    }  
    .trf-col-1-2-medium {
        width: 50%;
        flex: 0 50%;
    }
    .trf-col-1-1-medium {
        width: 100%;
        flex: 0 100%;
    }
    .trf-modal {
        max-width: calc(100vw - (var(--grid-gap) * 2));
    }
    .trf-thumb-wrapper.trf-fit-height {
        height: 300px;
    }
    .trf-padding-remove {
        padding: 0;
    }
    .trf-nav-sticky>.trf-container {
        margin: 0;
    }

    .trf-menubar-switcher {
        display: flex;
    }
    /*.trf-menubar-switcher>li>a {
        display: flex;
        justify-content: center;
        align-self: center;
    }*/
    .trf-menubar-main {
        position: absolute;
        bottom: 0%;
        left: 0%;
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease-out;
        z-index: 10;
        width: 100%;
        flex-direction: column;
        background: var(--color-light--hover);
    }
    .trf-menubar-main.active {
        opacity: 1;
        pointer-events: all;
        transition: opacity 0.3s ease-out;
    }
    
    .trf-dropdown-cart {
        width: 100vw;
    }    

    .trf-category-menubar,
    .trf-category-menubar.trf-category-menubar-extra {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 0;
        scroll-padding: calc(var(--grid-gap) / 3);
        -webkit-overflow-scrolling: touch;
        width: calc(100% + (var(--grid-gap) * 2));
        margin-left: calc(-1 * var(--grid-gap));
        margin-right: calc(-1 * var(--grid-gap));
        padding-left: var(--grid-gap);
        /*padding-right: var(--grid-gap);*/
        box-sizing: border-box;
        padding-bottom: var(--grid-gap);
    }    
    .trf-category-menubar>*,
    .trf-category-menubar.trf-category-menubar-extra>* {
        width: 60%;
        flex: 0 60%;
        min-width: 200px;
    }

    .trf-column-reverse-mobile {
        flex-direction: column-reverse;
    }

    footer {
        padding-top: calc(var(--grid-gap) * 3) !important;
    }

    .footer-feedback-form {
        margin-bottom: calc(-32px - 76px);
    }
    .footer-feedback-form--wrapper::before, 
    .footer-feedback-form--wrapper::after {
        width: 100vw;
    }    
    .footer-feedback-form--wrapper::before {
        left: -50vw;
    }
    .footer-feedback-form--wrapper::after {
        right: -50vw;
    }

    .trf-dropdown-search::after, .trf-modal::after {
        transform: translateX(0vw) translateY(-50vh);
    }
}

@media (max-width: 767.99px) {
    .trf-col-1-1-small {
        width: 100%;
        flex: 0 100%;
    }
}

@media (min-width: 1280px) {
    .trf-container {
        max-width: 1200px;
    }
    .trf-modal.trf-modal-wide {
        max-width: 60vw;
    }
}