/****************************************************************************************************
ÖZGÜL PASTANESİ
|-----------------------------------------------------------------------------------------------------|
INDEX
|-----------------------------------------------------------------------------------------------------|

-INITIALIZATION
    -FONT DECLARATIONS
    -CSS VARIABLE ASSIGNMENTS
    -RESETS
-BASIC LAYOUTS
-TYPOGRAPHY LAYOUTS
-UTILITY CLASSES
-ANIMATION KEYFRAMES
-SECTIONS
    -STATIC SECTIONS
    -COMPONENTS
-SCREEN SPECIFIC RULES AND RULE CHANGES
    -MOBILE SPECIFIC RULES
    -MEDIUM SIZED SCREEN SPECIFIC RULES
    -LARGE SCREEN SPECIFIC RULES

|-----------------------------------------------------------------------------------------------------|
END OF INDEX
|-----------------------------------------------------------------------------------------------------|

Additional Notes:

-The technique used in styling of this web site is a mixture of modular and traditional approaches.

-You will find a mobile first implementation as default. Rules for larger screen sizes,
as well as mobile specific utility class rules, are set or changed down below,
in the related screen media query. So, always be watchful about the prefixes to locate
the correct selector.

-Reused layout or modular selectors are tried to be implemented -so far as possible- independently
and have different prefixes regarding the screen size.

-When needed to refer the rule changes in other parts of the document or other sections, the acronyms used are
below:

    SMSCR: Mobile Specific Rules part of the css file.
    MDSCR: Medium Screen Specific Rules part of the css file.
    LGSCR: Large Screen Specific Rules part of the css file.

    JSFU(function_name): Java Script Function(function store_name) Referred to scripts.js.

-Measurements:
    -font sizes are always defined as "rem".
    -some properties other than font sizes are defined as "em" intentionally
    to keep these settings proportional to that element's font size.

|------------------------------------------------------------------------------------------------------|

******************************************************************************************************/
/******************************************************************************************************
|-----------------------------------------------------------------------------------------------------|
                    INITIALIZATION
|-----------------------------------------------------------------------------------------------------|

/* --------------------------------------------- */
/*********** GLOBAL CSS VARIABLES ****************/
/* --------------------------------------------- */

:root {
    /* const variables */

    --color--main--light: #FCA93A;
    --color--main--light--accent: #ffd298;
    --color--main--dark: #6D3F21;
    --color--grey--dark: #232021;
    --color--grey--medium: #E4E0DB;
    --color--grey--light: #F5F2ED;
    --color--white: #fff;
    --color--instagram: linear-gradient(49.12deg, #FFDD55 6.62%, #FF543E 50.06%, #C837AB 93.5%);


    --layout--max-page-width: 1200px;
    --layout--default-vertical-spacing: 2rem;
    --layout--default-content-spacing: 1.5rem;
    --layout--default-spacing: 1rem;
    --layout--default-side-spacing: 1rem;
    --layout--product-image-spacing: .5rem;

    --shadow--default-box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, .2);
    --shadow--default-box-shadow--hover: 4px 4px 10px 0px rgba(0, 0, 0, .35);
    --shadow--default-text-shadow: 4px 4px 4px rgba(0, 0, 0, .25);

    --transition--default-duration: 250ms;
    --transition--default-timing-function: ease-out;
}

/* --------------------------------------------- */
/***************** RESET RULES *******************/
/* --------------------------------------------- */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

body {
    box-sizing: border-box;
}

h1,
h2,
h3,
p {
    margin: 0;
}

/* All images are set responsive by default */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul {
    list-style: none;
}

/* Form elements use the defined font instead of defaults */
input,
button,
textarea,
select {
    font: inherit;

}

/* Resetting default button styles */
button {
    border: 0;
    cursor: pointer;
    background-color: transparent;
}

/******************************************************************************************************
|-----------------------------------------------------------------------------------------------------|
                    UTILITY CLASSES
|-----------------------------------------------------------------------------------------------------|
Notes:
    -There are four types of Utility classes:
        [no prefix] : means the selector is screen-independent.
        sm--  : applies to mobile devices.
        md--  : applies to tablet and small desktop screens
        lg--  : applies to larger screens

    You will find only non-prefixed selector rules here. For other prefixed selectors,
    please check the corresponding screen specific section.
******************************************************************************************************/

.full-width {
    width: 100%;
}

.flow-content > * + * {
    margin-top: var(--custom-spacing, var(--layout--default-content-spacing));
    /* if --custom-spacing is not defined in the element which also has flow-content class,
    then the default spacing works as a fallback value. If we want to give
    a different spacing to that element, we just define --custom-spacing in its class selector.*/
}

/* flex class selectors are used to add content with
responsive columns */

.flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.flex {
    display: flex;
    flex-direction: column;
}

/* This selector makes content spacing in divs,
flexboxes and grids more consistent (no border collapse issues etc) */

.flex--spaced-content > * + * {
    margin: var(--custom-spacing, var(--layout--default-content-spacing)) 0 0 0;
}

/* This selector makes the column widths equal
and at the same time shrinkable */

.flex--equal-columns > * {
    flex-basis: 100%;
}

.flex--centered {
    justify-content: center;
    align-items: center;
}

/* Check also MDSCR for .flex rules */

.visually-hidden {
    display: none;
}

.transparent {
    opacity: .5;
}

.centered,
.center-vertically {
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.centered,
.center-horizontally {
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}


/* Standard left and right buttons for slider modules */

.button {
    display: inline-block;
    text-decoration: none;
}

.button--left,
.button--right,
.button--left:hover,
.button--right:hover {
    position: absolute;
    -ms-flex-item-align: center;
    align-self: center;
    vertical-align: center;
    padding: 0.2rem;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
}

.button--left {
    left: 0;
    margin-left: 0.8rem;
}

.button--right {
    right: 0;
    margin-right: 0.8rem;
}

.button--left > svg,
.button--right > svg,
.button--close > svg {
    width: 3rem;
    height: 3.1rem;
    fill: #fff;
}

/* Standard slider navigator */

.indicator-nav {
    position: absolute;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    margin-bottom: 1.5rem;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2;
}

/******************************************************************************************************
  |-----------------------------------------------------------------------------------------------------|
                    ANIMATION KEYFRAMES
  |-----------------------------------------------------------------------------------------------------|
  ******************************************************************************************************/
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes rotate-image {
    0% {
        opacity: 0;
        transform: scale(.5) rotate(10deg);
        -webkit-transform: scale(.5) rotate(10deg);
        -moz-transform: scale(.5) rotate(10deg);
        -ms-transform: scale(.5) rotate(10deg);
        -o-transform: scale(.5) rotate(10deg);
    }
    100% {
        transform: scale(1) rotate(-3deg);
        -webkit-transform: scale(1) rotate(-3deg);
        -moz-transform: scale(1) rotate(-3deg);
        -ms-transform: scale(1) rotate(-3deg);
        -o-transform: scale(1) rotate(-3deg);
        opacity: 1;
    }
}


/******************************************************************************************************
|-----------------------------------------------------------------------------------------------------|
                  BASIC LAYOUTS
|-----------------------------------------------------------------------------------------------------|
******************************************************************************************************/
.limited-width,
.container {

    width: 100%;
    max-width: var(--layout--max-page-width);
    /* avoiding to use shorthand to prevent declaring a margin-top value,
    which can cause problems later */
    margin-left: auto;
    margin-right: auto;
}

/*main {*/
/*    padding-top: 2rem;*/
/*}*/

section,
.section,
footer {
    width: 100%;
    padding: .5rem var(--layout--default-side-spacing);
}

.button--main {
    position: relative;
    padding: .7rem 1.4rem;
    background-color: var(--color--main--light);
    color: var(--color--main--dark);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .1rem;
    box-shadow: var(--shadow--default-box-shadow);
    transition: all var(--transition--default-duration) var(--transition--default-timing-function);
    -webkit-transition: all var(--transition--default-duration) var(--transition--default-timing-function);
    -moz-transition: all var(--transition--default-duration) var(--transition--default-timing-function);
    -ms-transition: all var(--transition--default-duration) var(--transition--default-timing-function);
    -o-transition: all var(--transition--default-duration) var(--transition--default-timing-function);
}

.button--main:hover {
    background-color: var(--color--main--light--accent);
    box-shadow: var(--shadow--default-box-shadow--hover);

}

.button--main::after {
    content: "";
    position: absolute;
    top: .35em;
    bottom: .35em;
    left: .35em;
    right: .35em;
    border: 1px solid var(--color--main--dark);
    z-index: 99;
}

.button--header {
    width: 1.3rem;
    margin-right: 1rem;
}

.button--mobile-search {
    width: auto;
    height: auto;
    margin-left: auto;
    padding: .23em calc(.23em + 1px) .23em .23em;
    border-left: 0;
    margin-right: 0;
}

.button--mobile-search--open,
.button--mobile-search--close {
    border: 1px solid var(--color--main--dark);
    border-left: 0;
    padding-right: .23em;
}

.button--mobile-search--close {
    font-size: 2.8rem;
    padding: .2rem 0;
    line-height: .5;
    color: var(--color--main--dark);
}

.button--search {
    background-color: var(--color--main--dark);
}

.button--close-menu-wrapper {
    width: 100%;
}

.button--close-menu {
    display: block;
    color: var(--color--main--dark);
    font-size: 2.5rem;
    margin-left: auto;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .2);
    z-index: 3;
}

.bg--dark {
    background-color: var(--color--main--dark);
}

.bg--grey {
    background-color: var(--color--grey--light);
}

.bg--dark-grey {
    background-color: var(--color--grey--medium);

}

.decoration--cake {
    margin-left: auto;
    margin-right: auto;
}

.share > li {
    display: inline-block;
    margin-right: .2rem;
}

.share > li.desktop-only {
    display: none;
}

.share > h4 {
    margin-bottom: .5rem;
}

.desktop-only {
    display: none;
}


/******************************************************************************************************
  |-----------------------------------------------------------------------------------------------------|
                    TYPOGRAPHY LAYOUTS
  |-----------------------------------------------------------------------------------------------------|
    Notes: All default text layouts should be declared in this section.
    Please note that, these are default rules and can be overwritten in other more specific classes.
  ******************************************************************************************************/
body {
    font-family: 'Poppins', arial, sans-serif;
    text-align: center;
    color: var(--color--main--dark);
    animation: fade-in 250ms 0ms;
    -webkit-animation: fade-in 250ms 0ms;
    animation-fill-mode: backwards;
    animation-play-state: paused;
}

h1,
h2,
h3,
h4 {
    text-transform: uppercase;
    color: var(--color--main--dark);
}

h1 {
    font-size: 2.2rem;
}

h2 {
    font-size: 2rem;
    line-height: 1em;
}

h3 {
    font-size: 1.875rem;
}

h2.heading--white,
h3.heading--white,
h4.heading--white,
p.text--white {
    color: var(--color--white);
}

a,
.nav__menu-link {
    text-decoration: none;
    color: var(--color--main--dark);
    transition: color var(--transition--default-duration) var(--transition--default-timing-function);
    -webkit-transition: color var(--transition--default-duration) var(--transition--default-timing-function);
    -moz-transition: color var(--transition--default-duration) var(--transition--default-timing-function);
    -ms-transition: color var(--transition--default-duration) var(--transition--default-timing-function);
    -o-transition: color var(--transition--default-duration) var(--transition--default-timing-function);
}

a:hover,
.nav__menu-link:hover {
    color: var(--color--main--light);
}

a:hover > .social-icon {
    fill: var(--color--main--light);
}

label {
    display: inline-block;
}

.heading--dark {
    color: var(--color--main--dark);
}

.text--shadow {
    text-shadow: var(--shadow--default-text-shadow);
}

.social-icon {
    width: 1rem;
    height: 1rem;
}

/******************************************************************************************************
|-----------------------------------------------------------------------------------------------------|
                    SECTIONS
|-----------------------------------------------------------------------------------------------------|
******************************************************************************************************/

.header {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: var(--layout--default-spacing) 0 calc(var(--layout--default-spacing) / 2);
    background-color: var(--color--white);
}

.header__top-bar {
    width: 100%;
    display: none;
}

.header__logo {
    margin-left: .5rem;
    width: 6rem;
}

.header__search-bar {
    /*position: relative;*/
    background-color: var(--color--white);
    margin-left: auto;
}

.header__search-bar--open {
    z-index: 8888;
}

.header__search-form {
    /*position: relative;*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    visibility: visible;
    z-index: 999;
    margin-right: 1rem;
}

.header__search-results {
    position: absolute;
    top: 100%;
    left: 1vw;
    width: 98vw;
    margin-top: .3rem;
    display: block;
    background-color: var(--color--white);
    box-shadow: var(--shadow--default-box-shadow);
}

.header__search-result-item {
    display: flex;
    align-items: center;
    padding: .2rem;
    border-top: 1px solid var(--color--main--light--accent);
}

.header__search-result-item--caterogy {
    background-color: var(--color--grey--medium);
}

.header__search-result-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    margin-right: .5rem;
}

.header__search-result-link {
    display: flex;
    align-items: center;
}

.header__search-result-item--category .header__search-result-link:hover,
.header__search-result-item--category .header__search-result-link:focus {
    color: var(--color--white);
}

.header__search-result-item--category {
    background-color: #FCA93A;
}

.desktop-search-form {
    display: none;
}

.search-bar__input,
.desktop-search-bar__input {
    display: inline-block;
    font-family: 'Poppins', arial, sans-serif;
    font-weight: 300;
    line-height: 1.5rem;
    padding: 0;
    outline: none;
    -webkit-transition: width var(--transition--default-duration) var(--transition--default-timing-function);
    -moz-transition: width var(--transition--default-duration) var(--transition--default-timing-function);
    -ms-transition: width var(--transition--default-duration) var(--transition--default-timing-function);
    -o-transition: width var(--transition--default-duration) var(--transition--default-timing-function);
    transition: width var(--transition--default-duration) var(--transition--default-timing-function);
    margin-left: auto;
}

.search-bar__input {
    border: 0;
    width: 0;
}

.search-bar__input--active {
    width: 8rem;
    border: 1px solid var(--color--main--dark);
    border-right: 0;
    padding: .1rem .2rem .1rem;
}

.desktop-search-bar__input {
    width: 7rem;
    color: var(--color--white);
    background-color: var(--color--main--dark);
    border: 1px solid var(--color--main--dark);
    padding-left: .3em;
    -webkit-transition: width var(--transition--default-duration) var(--transition--default-timing-function);
    -moz-transition: width var(--transition--default-duration) var(--transition--default-timing-function);
    -ms-transition: width var(--transition--default-duration) var(--transition--default-timing-function);
    -o-transition: width var(--transition--default-duration) var(--transition--default-timing-function);
    transition: width var(--transition--default-duration) var(--transition--default-timing-function);
}


.button--search {
    margin-right: 0;
    padding: .440rem 1rem;

}

.button--search-box {

    font-size: .6rem;
    padding: .8em 1.5em;
    margin-top: 0;
}

.button--phone {
    display: block;
}

.button--lang,
.button--lang-mobile,
.button--lang-footer {
    display: block;
    background-color: var(--color--main--dark);
    color: var(--color--white);
    padding: .15em .3em;
    margin-right: 1rem;
    -webkit-transition: color var(--transition--default-duration) var(--transition--default-timing-function);
    -moz-transition: color var(--transition--default-duration) var(--transition--default-timing-function);
    -ms-transition: color var(--transition--default-duration) var(--transition--default-timing-function);
    -o-transition: color var(--transition--default-duration) var(--transition--default-timing-function);
    transition: color var(--transition--default-duration) var(--transition--default-timing-function);
}

.button--lang,
.button--lang-mobile {
    padding-left: .4rem;
    padding-right: .4rem;
}

.button--lang:hover,
.button--lang-mobile:hover {
    color: var(--color--main--light);
}

.button--lang {
    display: none;
}

.button--lang-footer {
    display: block;
    margin-top: 1rem;
    margin-right: 0;
    padding: 0 .7rem;
}

.nav__menu-wrapper {
    display: flex;
}

.footer-nav__menu-item {
    text-transform: uppercase;
}

/* Footer */

.footer {
    display: flex;
    text-align: left;
    flex-wrap: wrap;
}

.footer__logo-wrapper {
    padding: var(--layout--default-spacing) 0;
    border-bottom: 1px solid var(--color--grey--light);
}

.footer__logo {
    width: 100%;
    height: 3rem;
}

.footer__nav {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.footer__nav > * + * {
    margin-top: .5rem;
}

.footer__social-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
    order: 2;
    flex-grow: 1;

}

.footer__social-icon {
    width: 1.7rem;
    height: 1.7rem;
}

.footer__social-links > * + * {
    margin-left: var(--layout--default-spacing);
}

.footer__lang-wrapper {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.footer__footnote {
    display: none;
    order: 3;
    width: 100%;
    padding-top: 1rem;
    font-size: .7rem;
}

/* Slideshow */

.section__slideshow {
    padding: 0;
}

.slideshow__container {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

.slideshow__frame {
    position: relative;
    display: flex;
    width: 100vw;
    height: 100vh;
    max-height: 1024px;
    overflow: hidden;
}

.slideshow__slider {
    position: absolute;
    display: flex;
    flex-wrap: nowrap;
}

.slideshow__slide {
    /*position: absolute;*/
    width: 100vw;
    overflow: hidden;
    flex-shrink: 0;

}

.slideshow__slider--active {
    transition: transform 750ms var(--transition--default-timing-function);
    -webkit-transition: transform 750ms var(--transition--default-timing-function);
    -moz-transition: transform 750ms var(--transition--default-timing-function);
    -ms-transition: transform 750ms var(--transition--default-timing-function);
    -o-transition: transform 750ms var(--transition--default-timing-function);
}

.slideshow__slide--current {
    display: block;
    z-index: 2;

}

.slideshow__image {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
}

.slideshow__text-block {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    z-index: 4;
}

.slideshow__text-content {
    position: absolute;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
}

.slideshow__heading,
.slideshow__text {
    letter-spacing: 1px;
}


/* Our Story */
.section--our-story,
.section--our-story--details {
    padding-top: calc(var(--layout--default-vertical-spacing) * 2);
    padding-bottom: calc(var(--layout--default-vertical-spacing) * 3);
}

.our-story__heading {
    margin-bottom: var(--layout--default-spacing);
}

.section--our-story .flow-content * + *,
.section--our-story--details .flow-content * + * {
    --custom-spacing: .5rem;
    line-height: 1.7;
}

.section--our-story--details p {
    margin-top: 1rem;
    text-align: left;
    line-height: 2;
    letter-spacing: 1px;
    width: 100%;
}

.our-story--details__heading {
    line-height: 1.2;
    margin-bottom: var(--layout--default-vertical-spacing);
}

.container--our-story {
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
}

.our-story__image-frame {
    align-self: center;
    padding: .5rem;
    background-color: var(--color--white);
    box-shadow: var(--shadow--default-box-shadow);
    transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    margin-bottom: 2rem;
    animation: rotate-image 1s 1s;
    -webkit-animation: rotate-image 1s 1s;
    animation-fill-mode: backwards;
    animation-play-state: paused;

}

.our-story__image {
    width: 80vw;
}

.our-story--details__image {
    width: 55%;
    margin: 2rem auto 3rem;
    border: 1px solid var(--color--main--light);
    padding: .5rem;
}

.our-story__content {
    font-weight: 300;
}

.our-story__content p {
    text-align: left;
}

.our-story__button {
    margin-top: 1rem;
    display: inline-block;
}

/* Products */

.section--products,
.section--categories {
    padding-left: var(--layout--product-image-spacing);
    padding-right: var(--layout--product-image-spacing);
}

.section--products {
    padding-bottom: 0;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.section--products img,
.products__category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section--our-story + .section--products {
    margin-top: 0;
}

.section--categories {
    padding-top: 0;
    text-align: left;
    margin-top: 0;

}

.products__category {
    position: relative;
    width: calc(100vw - (var(--layout--product-image-spacing) * 2));
    height: calc(100vw - (var(--layout--product-image-spacing) * 2));
    overflow: hidden;
    margin-bottom: .5rem;
    cursor: pointer;
}

.heading--product {
    position: absolute;
    top: calc(var(--layout--default-side-spacing) / 2);
    left: calc(var(--layout--default-side-spacing) / 2);
    bottom: calc(var(--layout--default-side-spacing) / 2);
    right: calc(var(--layout--default-side-spacing) / 2);
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    color: var(--color--white);
    z-index: 5;
}

.heading--product--main {
    top: var(--layout--default-side-spacing);
    left: var(--layout--default-side-spacing);
    bottom: var(--layout--default-side-spacing);
    right: var(--layout--default-side-spacing);
    border: 2px solid var(--color--main--light);
    box-shadow: var(--shadow--default-box-shadow);
    padding: 0 var(--layout--product-image-spacing);
}

.products__category-image {
    /*position: absolute;*/
    width: 100%;
    height: 100%;
}

.favorites__small-images,
.products__small-images,
.products-grid__images {
    display: flex;
    flex-wrap: wrap;
}

.favorites__image-item,
.products__image-item,
.products-grid__image-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    width: calc(50vw - (var(--layout--product-image-spacing)) - (var(--layout--product-image-spacing) / 2));
    height: calc(50vw - (var(--layout--product-image-spacing)) - (var(--layout--product-image-spacing) / 2));
    margin-bottom: var(--layout--product-image-spacing);
}

.favorites__image {
    width: 75vw;
    height: 75vw;
    object-fit: cover;
}

.products__image-item:nth-child(odd),
.products-grid__image-item:nth-child(odd) {
    margin-right: calc(var(--layout--product-image-spacing) / 2)
}

.products__image-item:nth-child(even),
.products-grid__image-item:nth-child(even) {
    margin-left: calc(var(--layout--product-image-spacing) / 2)
}

.products__category > .overlay,
.products__image-item > .overlay,
.products__image-item > a > .heading--product,
.products-grid__image-item > .overlay,
.products-grid__image-item > a > .heading--product {
    transition: opacity var(--transition--default-duration) var(--transition--default-timing-function);
    -webkit-transition: opacity var(--transition--default-duration) var(--transition--default-timing-function);
    -moz-transition: opacity var(--transition--default-duration) var(--transition--default-timing-function);
    -ms-transition: opacity var(--transition--default-duration) var(--transition--default-timing-function);
    -o-transition: opacity var(--transition--default-duration) var(--transition--default-timing-function);
}

.products__category:hover > .overlay,
.products__image-item:hover > .overlay,
.products__image-item:hover > a > .heading--product,
.products-grid__image-item:hover > .overlay,
.products-grid__image-item:hover > a > .heading--product {
    opacity: 0;
}

.products__grid-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.products__favorite {
    position: absolute;
    top: .3em;
    left: .3em;
    width: 1.75em;
    height: 1.75em;
    display: grid;
    place-content: center;
    background-color: var(--color--white);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    box-shadow: var(--shadow--default-box-shadow);
    opacity: .5;
    z-index: 9;
    cursor: pointer;
    -webkit-transition: opacity var(--transition--default-duration) var(--transition--default-timing-function);
    -moz-transition: opacity var(--transition--default-duration) var(--transition--default-timing-function);
    -ms-transition: opacity var(--transition--default-duration) var(--transition--default-timing-function);
    -o-transition: opacity var(--transition--default-duration) var(--transition--default-timing-function);
    transition: opacity var(--transition--default-duration) var(--transition--default-timing-function);
}

.products__favorite:hover {
    opacity: 1;
}

.products__favorite > .favorite__image {
    fill: #6D3F21;
    stroke: #6D3F21;
    stroke-width: 2;
}

.products__favorite--selected {
    opacity: 1;
}

.products__favorite--selected > .favorite__image {
    fill: red;
    stroke: red;
}

.product-list__heading {
    width: max-content;
}

.breadcrumbs {
    width: 100%;
}

.breadcrumbs {
    margin-bottom: var(--layout--default-spacing);
}

.product-list__heading {
    line-height: 1.3;
}

/* Mobile Menu */

.mobile-menu {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: .5rem;
    padding: .5rem;
    z-index: 99;
}

.mobile-menu__button {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.mobile-menu__button.button--collapsible--active > .mobile-menu__down-icon {
    -webkit-transform: rotateZ(180deg);
    -moz-transform: rotateZ(180deg);
    -ms-transform: rotateZ(180deg);
    -o-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
}

.mobile-menu__heading {
    width: 80%;
    font-size: 1.1rem;
    text-align: left;

}

.mobile-menu__down-icon {
    width: 1rem;
}

.mobile-menu__list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: .5rem;
    transition: height 50ms ease-in;
    -webkit-transition: height 50ms ease-in;
    -moz-transition: height 50ms ease-in;
    -ms-transition: height 50ms ease-in;
    -o-transition: height 50ms ease-in;
    overflow: hidden;
}

.active {
    transition: height 100ms ease-in;
    -webkit-transition: height 100ms ease-in;
    -moz-transition: height 100ms ease-in;
    -ms-transition: height 100ms ease-in;
    -o-transition: height 100ms ease-in;
}

.mobile-menu__list:not(.active) {
    display: none;
}

/* product-detail */

.product-detail__content {
    font-weight: 300;
}

.product-detail__image-frame {
    width: calc(100vw - (var(--layout--product-image-spacing) * 2));
    height: calc(100vw - (var(--layout--product-image-spacing) * 2));
    overflow: hidden;
}

.product-detail__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-detail__price {
    margin-top: .5rem;
    justify-content: space-between;
    font-size: 1.2rem;
    font-weight: 700;
}

.products__favorite--detail {
    position: unset;
    margin-left: auto;
    margin-right: .5rem;
}

.allergen-icons {
    display: flex;
}

.allergen-text-list {
    list-style: disc inside;
    margin-top: 1rem;
}

.product-detail__warning-item {

}

.product-detail__warning-image {
    width: 2rem;
    height: 2rem;
    margin-right: .5rem;
}


/* Favorites */

.section--favorites {
    align-items: center;
    padding-top: var(--layout--default-vertical-spacing);
    padding-bottom: calc(var(--layout--default-vertical-spacing) * 2);
}

.heading--favorites {
    width: 100%;
    margin-bottom: var(--layout--default-vertical-spacing);
}

.favorites__image-item {
    width: calc(75vw - (var(--layout--product-image-spacing)) - (var(--layout--product-image-spacing) * 2));
    height: calc(75vw - (var(--layout--product-image-spacing)) - (var(--layout--product-image-spacing) * 2));
    background-color: var(--color--white);
    overflow: hidden;
}

.favorites__image-item:nth-child(odd),
.favorites__image-item:nth-child(even) {
    margin-left: 0;
    margin-right: 0;
}


/* Testimonials */

.section--testimonials {
    padding-top: var(--layout--default-vertical-spacing);
    padding-bottom: calc(var(--layout--default-vertical-spacing) * 2);
}

.testimonials__heading {
    margin-bottom: var(--layout--default-vertical-spacing);
}

.testimonials__comment {
    font-style: italic;
    line-height: 1.4;
    letter-spacing: 0.01;
    padding-left: var(--layout--default-side-spacing);
    padding-right: var(--layout--default-side-spacing);
}

.testimonials__comment::before {
    font-size: 1.2rem;
    content: "“ ";
}

.testimonials__comment::after {
    font-size: 1.2rem;
    content: " ”";
}

.testimonials__author {
    margin-top: .5rem;
    font-size: 0.8rem;
    color: var(--color--main--light);
    text-transform: uppercase;
}

.section--location {
    padding-top: calc(var(--layout--default-vertical-spacing) * 1);
    padding-bottom: calc(var(--layout--default-vertical-spacing) * 1);
}

.location__text {
    text-align: left;
    padding-left: .5rem;
}

.location__text > h4 + p {
    margin-top: 0;
}

.ozgul__logo {
    width: 60vw;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: var(--layout--default-spacing);
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
    -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
}

#map {
    border: 8px solid white;
    width: 92vw;
    height: 92vw;
    margin: 2rem auto;
}

.sidebar {
    display: none;
}

.newsletter-container {
    padding-top: var(--layout--default-vertical-spacing);
    padding-bottom: var(--layout--default-vertical-spacing);
}

.newsletter__image {
    display: none;
}

.newsletter__input {
    display: block;
    border: 1px solid var(--color--main--light);
    outline: none;
    padding-left: .3rem;
}

.form__label--error {
    background-color: #ff0000;
}

.newsletter__submit {
    display: block;
    margin: 1rem auto;
}

.debug-window {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 500px;
    background-color: black;
    color: white;
    z-index: 9999;
}

.text-block {
    max-width: 400px;
    margin: 0 auto;
}


/******************************************************************************************************
|-----------------------------------------------------------------------------------------------------|
                    SCREEN SPECIFIC RULES AND RULE CHANGES
|-----------------------------------------------------------------------------------------------------|
******************************************************************************************************/

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------ */
/*                     MOBILE SPECIFIC RULES                                      */
/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------ */

@media only screen and (max-width: 599px) {
    /* Reusable Classes */
    .sm--default-transition {
        transition: all var(--transition--default-duration) var(--transition--default-timing-function);
        -webkit-transition: all var(--transition--default-duration) var(--transition--default-timing-function);
        -moz-transition: all var(--transition--default-duration) var(--transition--default-timing-function);
        -ms-transition: all var(--transition--default-duration) var(--transition--default-timing-function);
        -o-transition: all var(--transition--default-duration) var(--transition--default-timing-function);
    }

    .sm--visually-hidden {
        display: none;
    }

    .sm--full-page-width {
        width: 100%;
    }

    .button--mobile-search {
        padding: .15rem;
    }
}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------ */
/*                      MEDIUM SIZED SCREEN SPECIFIC RULES                        */
/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------ */

@media only screen and (min-width: 600px) {
    /* Utility Classes */
    .md--half-page-width {
        width: 49.5%;
    }

    .md--visually-hidden {
        display: none;
    }

    /* End of Utility Classes */
    :root {
        font-size: 1.2rem;
    }

    .slideshow__text-block,
    .section--our-story,
    .section--location {
        padding-left: calc(var(--layout--default-side-spacing) * 2);
        padding-right: calc(var(--layout--default-side-spacing) * 2);
    }

    .slideshow__text {
        font-weight: 300;
    }

    #map {
        width: 60vw;
        height: 60vw;
    }
}

@media only screen and (max-width: 799px) {
    .product-detail__description {
        margin-top: 0.8rem;
        margin-left: .5rem;
    }

    .header__nav {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        padding: .5rem var(--layout--default-side-spacing);
        text-align: left;
        overflow-y: scroll;
        background-color: var(--color--grey--light);
        box-shadow: var(--shadow--default-box-shadow);
        z-index: 9999;
        transform: translateX(80%);
        -webkit-transform: translateX(80%);
        -moz-transform: translateX(80%);
        -ms-transform: translateX(80%);
        -o-transform: translateX(80%);
        visibility: hidden;
        opacity: 0;
        transition: all var(--transition--default-duration) var(--transition--default-timing-function);
        -webkit-transition: all var(--transition--default-duration) var(--transition--default-timing-function);
        -moz-transition: all var(--transition--default-duration) var(--transition--default-timing-function);
        -ms-transition: all var(--transition--default-duration) var(--transition--default-timing-function);
        -o-transition: all var(--transition--default-duration) var(--transition--default-timing-function);
    }

    .header__nav--open {
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        visibility: visible;
        opacity: 1;
    }

    .nav__menu {
        background-image: url("../images/muffin.svg");
        background-repeat: no-repeat;
        background-size: 70%;
        background-position: top right;
        flex-grow: 1;
    }

    .nav__menu > * + * {
        padding-top: 1rem;
        border-top: 1px solid var(--color--main--light);
    }

    .nav__menu-item {
        font-size: 1.2rem;
        font-weight: 700;
        padding-bottom: 1rem;
    }

    .nav__submenu-item {
        font-size: 1rem;
        font-weight: 400;
    }

    .product-detail__ingredients,
    .product-detail__warnings {
        margin-left: .5rem;
    }

}

@media only screen and (min-width: 600px) and (max-width: 799px) {

    .footer-nav__menu-item {
        font-size: .9rem;
    }

    .footer__social-icon {
        width: 1.6rem;
    }

    .our-story__image-frame {
        width: 60%;
        margin-bottom: 3rem;
    }

    .header__nav {
        width: 75vw;
    }

    .location__text {
        width: 60%;
        align-self: center;
    }
}

@media only screen and (min-width: 800px) {

    .product-detail__description {
        margin-top: 0.8rem;
    }

    /* for larger screens we line the content as columns */
    .flex {
        flex-direction: row;
        flex-wrap: wrap;

    }

    /* and spacing between flex children to margin-right */
    .flex--spaced-content > * + * {
        margin: 0 0 0 var(--custom-spacing, var(--layout--default-content-spacing));
        /* if --custom-spacing is not defined in the element which also has flex class,
    then the default spacing works as a fallback value. If we want to give
    a different spacing to that element, we just define --custom-spacing in its class selector.*/
    }

    .header {
        align-items: center;
    }

    .header__top-bar {
        display: flex;
        color: var(--color--white);
        padding: .5rem 1rem;
    }

    .header__top-bar a {
        color: var(--color--white);
    }

    .header__top-bar a:hover {
        color: var(--color--main--light);
    }

    .top-bar__social-links,
    .top-bar__contact-info {
        width: 50%;
        display: flex;
        align-items: center;

    }

    .top-bar__social-links > * + * {
        margin-left: 1rem;
    }

    .top-bar__contact-info {
        justify-content: flex-end;
        align-items: center;
        font-size: .8rem;
        font-weight: 300;
    }

    .top-bar__link {
        display: flex;
        align-items: center;
    }

    .top-bar__contact-info > * + * {
        margin-left: 2rem;
    }

    .header__social-icon {
        width: 1rem;
    }

    .header__contact-image {
        display: inline-block;
        margin-right: .5rem;
    }

    .header__logo {
        width: 8rem;
    }

    .header__nav {
        margin-left: auto;
        margin-right: auto;
        flex-grow: 1;
    }

    .nav__menu {
        position: relative;
        display: inline-flex;
        margin-left: auto;
        margin-right: auto;

    }

    .nav__menu > * {
        margin-right: calc(var(--layout--default-spacing) * .75);
        margin-left: calc(var(--layout--default-spacing) * .75);
    }

    .button--lang {
        display: block;
    }

    .button--lang-mobile {
        display: none;
    }

    .nav__menu--open {
        color: var(--color--main--light);
    }

    .nav__submenu {
        position: absolute;
        top: 170%;
        left: 50%;
        min-width: 30rem;
        width: 80vw;
        max-width: 40rem;
        padding: 1rem;
        z-index: 999;
        background-color: var(--color--white);
        box-shadow: var(--shadow--default-box-shadow);
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        display: grid;
        grid-template-columns: repeat( auto-fit, minmax(200px, 1fr));
        align-content: flex-start;
        column-gap: var(--layout--default-spacing);
        visibility: hidden;
        opacity: 0;
        transition: all var(--transition--default-duration) var(--transition--default-timing-function);
        -webkit-transition: all var(--transition--default-duration) var(--transition--default-timing-function);
        -moz-transition: all var(--transition--default-duration) var(--transition--default-timing-function);
        -ms-transition: all var(--transition--default-duration) var(--transition--default-timing-function);
        -o-transition: all var(--transition--default-duration) var(--transition--default-timing-function);

    }

    .nav__submenu--open {
        visibility: visible;
        opacity: 1;
    }

    .nav__submenu::before {
        content: "";
        position: absolute;
        top: .35rem;
        bottom: .35rem;
        left: .35rem;
        right: .35rem;
        border: 1px solid var(--color--main--light);

    }

    .nav__submenu-item {
        display: grid;
        place-content: center;
        font-size: .9rem;
        z-index: 2;
        margin: .2rem;
    }

    .button--open-menu,
    .button--close-menu,
    .button--phone,
    .button--mobile-search,
    .button--mobile-search--close {
        display: none;
    }

    .button--close-menu--search {
        display: block;
        padding: .11em .35em;
        line-height: 1;
        font-size: 1.5rem;
        color: var(--color--white);
    }

    .search-bar__input,
    .search-bar__input--active,
    .header__search-results,
    .header__search-bar {
        display: none;
    }

    .desktop-search-form {
        position: relative;
        display: inline-flex;
        justify-content: right;
        align-items: center;
        margin-left: auto;
        margin-right: .5rem;
        width: 7rem;
        text-align: right;
        z-index: 999;
    }

    .desktop-search-bar__input {
        align-self: stretch;
        padding: 0;
        width: 0;
    }

    .desktop-search-bar__input--active {
        width: 100%;
        padding-left: .3rem;
    }

    .desktop__search-results {
        position: absolute;
        display: flex;
        flex-direction: column;
        top: 2rem;
        right: 0;
        width: 25rem;
        padding: .5rem;
        background-color: var(--color--white);
        box-shadow: var(--shadow--default-box-shadow);
    }

    .desktop__search-result-item {
        display: flex;
        align-items: center;
        padding: .5rem;
        border-top: 1px solid var(--color--main--light--accent);
    }

    .desktop__search-result-item img {
        width: 75px;
        height: 75px;
        object-fit: cover;
        margin-right: .5rem;
    }

    .button--search {
        display: grid;
        place-content: center;
    }

    .footer {
        flex-direction: column;
    }

    .footer > * + * {
        margin-top: 1rem;
    }

    .footer-nav__menu {
        display: flex;
        flex-direction: row;
        margin: 0 auto;
    }

    .footer-nav__menu-item {
        margin: 0 .5rem;
    }

    .footer__nav > * + * {
        margin-right: 1rem;
    }

    .footer__social-links {
        justify-content: center;
        align-items: center;
        order: unset;
    }

    .footer__lang-wrapper {
        position: absolute;
        right: 1rem;
        width: unset;
        margin-left: auto;
    }

    .button--lang-footer {
        margin-top: 0;
    }

    .slideshow__slider--active {
        transition-duration: 1.5s;
    }

    .slideshow__heading {
        font-size: 2rem;
        letter-spacing: 2px;
    }

    .section--our-story {
        justify-content: center;
        align-items: center;
        text-align: left;
    }

    .our-story__image-frame {
        width: 38%;
    }

    .our-story__content {
        width: 50%;
        margin-left: 3rem;
    }

    .section--products {
        gap: var(--layout--product-image-spacing);
        justify-content: space-evenly;
    }

    .products__category,
    .products__small-images {
        width: calc(50vw - (var(--layout--product-image-spacing) * 2));
        height: calc(50vw - (var(--layout--product-image-spacing) * 2));
    }

    .products__image-item {
        width: calc(50% - (var(--layout--product-image-spacing)) + .2rem);
        height: calc(25vw - (var(--layout--product-image-spacing) * 2) + .25rem);
    }

    .section-container {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .mobile-menu {
        display: none;
    }

    .sidebar {
        display: block;
        width: 30%;
        padding: calc(var(--layout--default-spacing) / 2);
    }

    .sidebar__heading {
        font-size: 1.5rem;
        margin-top: calc(var(--layout--default-spacing) / 4);
        margin-bottom: var(--layout--default-spacing);
    }

    .product-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 68%;
        margin-left: .8rem;
    }

    .products-grid__image-item {
        width: calc(34vw - (var(--layout--product-image-spacing)) - (var(--layout--product-image-spacing) / 2));
        height: calc(34vw - (var(--layout--product-image-spacing)) - (var(--layout--product-image-spacing) / 2));
    }

    .product-detail__image-frame {
        width: calc(68vw - (var(--layout--product-image-spacing)) - (var(--layout--product-image-spacing) / 2));
        height: calc(68vw - (var(--layout--product-image-spacing)) - (var(--layout--product-image-spacing) / 2));
    }

    .section--favorites {
        justify-content: space-evenly;
    }

    .favorites__image-item:not(:first-of-type) {
        margin-left: calc(var(--layout--product-image-spacing) / 2);
    }

    .favorites__image-item:not(:last-of-type) {
        margin-right: calc(var(--layout--product-image-spacing) / 2);
    }

    .heading--favorites {
        margin-bottom: var(--layout--default-spacing);
    }

    .favorites__image-item {
        width: calc(33vw - (var(--layout--product-image-spacing)) - (var(--layout--product-image-spacing) * 2));
        height: calc(33vw - (var(--layout--product-image-spacing)) - (var(--layout--product-image-spacing) * 2));
    }

    .favorites__image {
        /*width: 40%;*/
        /*height: calc(40vw - (var(--layout--product-image-spacing) * 2));*/
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .section--location {
        align-items: center;
    }

    .heading__location {
        width: 100%;
    }

    .ozgul__logo,
    .location__text {
        width: 48%;
    }

    .section--newsletter {
        gap: var(--layout--default-spacing);
    }

    .newsletter-container {
        justify-content: space-evenly;
        align-items: center;
    }

    .newsletter__image {
        display: block;

    }

    .newsletter__image,
    .newsletter__details {
        width: 45%;
    }

    .our-story__heading {
        width: 100%;
        text-align: center;
        margin-bottom: var(--layout--default-spacing);
    }

    .testimonials__comment {
        padding-left: calc(var(--layout--default-side-spacing) * 2);
        padding-right: calc(var(--layout--default-side-spacing) * 2);
    }


}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------ */
/*                      LARGE SCREEN SPECIFIC RULES                               */
/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------ */

@media screen and (min-width: 900px) {
    .our-story__heading {
        margin-bottom: calc(var(--layout--default-spacing) * 2);
    }
}

@media only screen and (min-width: 1025px) {
    .our-story__heading {
        margin-bottom: calc(var(--layout--default-spacing) * 3);
    }

    .hidden-on-desktop {
        display: none;
    }

    .desktop-only {
        display: block;
    }

    .header__top-bar {
        padding: .2rem 1rem;
    }

    .desktop-search-form {
        width: 10rem;
    }


    .slideshow__slider--active {
        transition-duration: 2s;
    }

    .slideshow__heading {
        font-size: 3rem;
    }

    .slideshow__text {
        font-size: 1.2rem;
    }

    .slideshow__frame,
    .slideshow__slide,
    .slideshow__image {
        max-width: 1200px;
    }

    .slideshow__frame {
        align-items: center;
    }

    .our-story__image-frame {
        width: 40%;
    }

    .our-story__content {
        width: 45%;
        margin-left: 5rem;
    }

    .section--products {
        justify-content: center;
    }

    .products__category,
    .products__small-images {
        width: calc(50vw - (var(--layout--product-image-spacing) * 2));
        height: calc(50vw - (var(--layout--product-image-spacing) * 2));
    }

    .products__image-item {
        width: calc(25vw - (var(--layout--product-image-spacing) * 2));
        height: calc(25vw - (var(--layout--product-image-spacing) * 2) + .25rem);
    }

    .sidebar {
        display: block;
        width: 20%;
        padding: calc(var(--layout--default-spacing) / 2);
    }

    .product-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 78%;
    }

    .products-grid__image-item {
        width: calc(25.8vw - (var(--layout--product-image-spacing)) - (var(--layout--product-image-spacing) / 2));
        height: calc(25.8vw - (var(--layout--product-image-spacing)) - (var(--layout--product-image-spacing) / 2));
        margin-right: calc(var(--layout--product-image-spacing) / 2);
        margin-left: calc(var(--layout--product-image-spacing) / 2);
    }

    .product-detail__image-frame {
        width: calc(45.6vw - (var(--layout--product-image-spacing)) - (var(--layout--product-image-spacing) / 2));
        max-width: 532px;
        height: calc(45.6vw - (var(--layout--product-image-spacing)) - (var(--layout--product-image-spacing) / 2));
        max-height: 532px;
        margin-right: var(--layout--product-image-spacing);
    }

    .product-detail__content {
        width: calc(30vw - (var(--layout--product-image-spacing)) - (var(--layout--product-image-spacing) / 2));
        max-width: 340px;
        margin-left: 1.5rem;
    }

    .products__favorite--detail {
        margin-left: 1rem;
        margin-right: 0;
    }

    .product-detail__price {
        margin-top: 0;
        align-items: flex-start;

    }

    .share > li.desktop-only {
        display: inline-block;
    }

    .share > li.hidden-on-desktop {
        display: none;
    }
    .product-detail__content
    .section--favorites {
        justify-content: center;
    }

    .heading--favorites {
        margin-bottom: calc(var(--layout--default-spacing) * 1.5);
    }

    .favorites__image-item {
        width: calc(28vw - (var(--layout--product-image-spacing)) - (var(--layout--product-image-spacing) * 2));
        height: calc(28vw - (var(--layout--product-image-spacing)) - (var(--layout--product-image-spacing) * 2));
    }

    .section--location {
        align-items: center;
    }

    .ozgul__logo,
    .location__text,
    #map {
        width: 20vw;
    }

    #map {
        height: 20vw;
    }

    .section--newsletter {
        justify-content: center;
        align-items: center;
    }

    .newsletter__image {
        display: block;
    }
}

@media only screen and (min-width: 1200px) {
    .products__category,
    .products__small-images {
        width: calc(var(--layout--max-page-width) / 2 - 1rem);
        height: calc(var(--layout--max-page-width) / 2 - 1rem);
    }

    .products__image-item {
        width: calc(50% - (var(--layout--product-image-spacing)) + .2rem);
        height: calc(var(--layout--max-page-width) / 4 - .8rem);
    }

    .favorites__image-item {
        width: calc(var(--layout--max-page-width) / 3 - 1rem);
        height: calc(var(--layout--max-page-width) / 3 - .8rem);
    }

    .products-grid__image-item {
        max-width: 295px;
        max-height: 295px;
    }

    .section--location {
        justify-content: space-between;
    }

    .ozgul__logo {
        width: 30%;
        margin-left: 0;
    }

    .location__text {
        width: 35%;
    }

    #map {
        width: 300px;
        height: 300px;
    }


}

.share-icon-list {
    display: inline-block;
    margin-right: .2rem;
}