@font-face {
    font-family:  'Inter';
    src:          url('../fonts/Inter-Variable-Latin.woff2') format('woff2');
    font-weight:  100 900;
    font-style:   normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family:  'Inter';
    src:          url('../fonts/Inter-Variable-LatinExt.woff2') format('woff2');
    font-weight:  100 900;
    font-style:   normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family:  'Inter';
    src:          url('../fonts/Inter-Variable-Cyrillic.woff2') format('woff2');
    font-weight:  100 900;
    font-style:   normal;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family:  'Inter';
    src:          url('../fonts/Inter-Variable-CyrillicExt.woff2') format('woff2');
    font-weight:  100 900;
    font-style:   normal;
    font-display: swap;
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

:root {
    --color-primary:     #508E51;
    --color-primary-hov: #1C7D46;
    --color-secondary:   #353329;
    --color-accent:      #55AC61;
    --color-text:        #231E1E;
    --color-heading:     #000000;
    --color-muted:       #6C6962;
    --color-muted-alt:   #57574E;
    --color-border:      #E1E1E1;
    --color-bg:          #FFFFFF;
    --color-bg-alt:      #F7F7F7;
    --color-bg-lighter:  #F4F3EE;
    --color-bg-green:    #F8F8F8;
    --color-orange:      #F49805;
    --color-red:         #E02828;

    --font-body:    Inter, sans-serif;
    --font-heading: Inter, sans-serif;
    --line-height:  1.5;

    --fs-h1: 74px;  --lh-h1: 1.1;
    --fs-h2: 48px;  --lh-h2: 1.1;
    --fs-h3: 24px;  --lh-h3: 1.15;
    --fs-body: 16px;
    --fs-small: 14px;
    --ls-heading: -0.02em;

    --container-width:   1584px;
    --container-padding: 20px;

    --radius:       10px;
    --radius-btn:   8px;
    --transition:   0.2s ease;
    --shadow:       0 0 8px rgba(147, 147, 147, .2);

    --topbar-height: 50px;
    --header-height: 70px;
    --header-bg:     #ffffff;
    --footer-bg:     #353329;
    --footer-color:  #ffffff;

    --z-dropdown: 100;
    --z-sticky:   200;
    --z-modal:    400;
}

html {
    font-size: 16px;
    scroll-padding-top: var(--header-height);
    overflow-x: hidden;
}

body {
    font-family:      var(--font-body);
    font-size:        var(--fs-body);
    line-height:      var(--line-height);
    color:            var(--color-text);
    background-color: var(--color-bg);
    display:          flex;
    flex-direction:   column;
    min-height:       100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family:    var(--font-heading);
    font-weight:    700;
    line-height:    1.1;
    letter-spacing: var(--ls-heading);
    color:          var(--color-heading);
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }

.site      { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1; }

.container {
    width:     100%;
    max-width: var(--container-width);
    padding:   0 var(--container-padding);
    margin:    0 auto;
}

.color-green { color: #55ac61; }

.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         14px 26px;
    border:          1px solid #ffffff;
    border-radius:   10px;
    font-family:     var(--font-body);
    font-size:       18px;
    font-weight:     500;
    line-height:     24px;
    cursor:          pointer;
    transition:      background var(--transition), color var(--transition), border-color var(--transition);
}

.btn__arrow { flex-shrink: 0; }

.btn--primary {
    background: linear-gradient(90deg, #3F8F46 0%, #6DC170 100%);
    color:      #ffffff;
}

.btn--primary:hover { background: linear-gradient(180deg, var(--color-primary-hov) 0%, var(--color-primary-hov) 100%); }

.btn--light {
    background: #ffffff;
    color:      var(--color-secondary);
}

.btn--light:hover {
    background: var(--color-secondary);
    color:      #ffffff;
}

.tag {
    display:       inline-flex;
    align-self:    flex-start;
    padding:       12px 20px;
    border:        1px solid var(--color-accent);
    border-radius: 60px;
    font-size:     16px;
    line-height:   20px;
    color:         var(--color-text);
}

.breadcrumbs {
    display:       flex;
    align-items:   center;
    gap:           8px;
    margin-bottom: 24px;
    font-size:     14px;
    line-height:   16px;
}

.woocommerce-breadcrumb {
    margin:      0 0 20px;
    font-size:   14px;
    line-height: 16px;
    color:       #000000;
}

.woocommerce-breadcrumb a { color: rgba(0, 0, 0, .5); }
.woocommerce-breadcrumb a:hover { color: #000000; }

.screen-reader-text {
    clip:     rect(1px, 1px, 1px, 1px);
    height:   1px;
    overflow: hidden;
    position: absolute;
    width:    1px;
}
.screen-reader-text:focus {
    clip:       auto;
    height:     auto;
    left:       5px;
    top:        5px;
    padding:    15px 23px;
    background: #f1f1f1;
    color:      #21759b;
    display:    block;
    font-weight: 700;
    z-index:    100000;
}

.product-card {
    display:        flex;
    flex-direction: column;
    height:         100%;
    background:     #ffffff;
    border-radius:  8px;
    overflow:       hidden;
    transition:     box-shadow .3s;
}

.product-card:hover { box-shadow: 0 0 5px rgba(0, 0, 0, .35); }

.product-card__image {
    display:         flex;
    flex-shrink:     0;
    align-items:     center;
    justify-content: center;
    height:          390px;
    border-bottom:   1px solid var(--color-border);
}

.product-card__image img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: contain;
}

.product-card__info {
    display:        flex;
    flex-direction: column;
    flex:           1;
    gap:            16px;
    padding:        16px;
    transition:     background .3s;
}

.product-card:hover .product-card__info { background: #f5f5f5; }

.product-card__title {
    display:            -webkit-box;
    overflow:            hidden;
    -webkit-box-orient:  vertical;
    -webkit-line-clamp:  2;
    font-size:   16px;
    font-weight: 600;
    line-height: 20px;
    color:       var(--color-heading);
}

.product-card__meta {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             20px;
}

.product-card__stock {
    display:     flex;
    flex-shrink: 0;
    align-items: center;
    gap:         8px;
    font-size:   14px;
    line-height: 16px;
    color:       var(--color-accent);
}

.product-card__stock--out { color: var(--color-muted); }

.product-card__sku {
    font-size:   14px;
    line-height: 16px;
    text-align:  left;
    color:       var(--color-muted);
}

.product-card__row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             20px;
    margin-top:      auto;
}

.product-card__price {
    font-size:   16px;
    line-height: 20px;
    color:       var(--color-heading);
}

.product-card__cart {
    display:         flex;
    flex-shrink:     0;
    align-items:     center;
    justify-content: center;
    width:           42px;
    height:          38px;
    border:          1px solid var(--color-accent);
    border-radius:   6px;
    color:           var(--color-accent);
    transition:      background var(--transition), color var(--transition);
}

.product-card__cart:hover {
    background: var(--color-accent);
    color:      #ffffff;
}

.product-card__cart-icon--added { display: none; }

.product-card__cart.added {
    background:   var(--color-accent);
    border-color: var(--color-accent);
    color:        #ffffff;
}

.product-card__cart.added .product-card__cart-icon--default { display: none; }
.product-card__cart.added .product-card__cart-icon--added   { display: block; }

.added_to_cart.wc-forward { display: none !important; }

.product-card__cart--disabled,
.product-card__cart--disabled:hover {
    background:     var(--color-bg-alt);
    border-color:   var(--color-border);
    color:          var(--color-muted);
    cursor:         not-allowed;
    pointer-events: none;
}

@media (max-width: 1366px) {
    .product-card__image { height: 200px; }
}

@media (max-width: 1024px) {
    .product-card__image { height: 245px; }
}

@media (max-width: 767px) {
    .product-card__image { height: 185px; }
    .product-card__info { gap: 12px; padding: 12px; }
    .product-card__meta { flex-direction: column; align-items: flex-start; gap: 6px; }
}

@media (max-width: 1024px) {
    :root {
        --fs-h1: 48px;
        --fs-h2: 36px;
        --fs-h3: 20px;
    }
}

@media (max-width: 768px) {
    :root {
        --fs-h1: 32px;
        --fs-h2: 24px;
        --fs-h3: 18px;
    }
}

@media (max-width: 767px) {
    :root {
        --container-padding: 16px;
    }
}