body {
    background: var(--body-bg);
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}  

/* Reset */
a {
    color: var(--main-color);
}

a:hover {
    text-decoration: none;
    color: var(--main-color2);
}

/* Overlay */
.overlay {
    display: flex;
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    background: rgba(255, 255, 255, .4);
    justify-content: center;
    align-items: center;
}

.overlay .spin {
    color: var(--main-color);
    width: 3rem;
    height: 3rem;
    font-size: 20px;
}


/* Opacity */
.op-black {
    background: rgba(0,0,0,.5);
    position: fixed;
    z-index: 4;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
}

.op-black.hide {
    visibility: hidden;
    opacity: 0;
}

.op-black.show {
    visibility: visible;
    opacity: 1;
}

/* Header (Desktop) */
header.desktop  {
    background: #fff;
}

header.desktop .h-contact {
    background: #fff;
    border-bottom: 1px solid #eeeeee;
}

.dropdown-languages-1 .dropdown-toggle {
    color: var(--header-top-color);
    transition: all var(--transition-time);
}

.dropdown-languages-1 .dropdown-toggle:hover{
    color: var(--header-top-color-hover);
}

.dropdown-currencies-1 .dropdown-toggle {
    color: var(--header-top-color);
    transition: all var(--transition-time);
}

.dropdown-currencies-1 .dropdown-toggle:hover{
    color: var(--header-top-color-hover);
}

header.desktop .h-contact .info {
    height: 40px;
    display: -webkit-flex;
    -webkit-align-items: center; 
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
}

header.desktop .h-contact .info .item {
    font-size: 13px;
    color: var(--header-top-color);
    transition: all var(--transition-time);
    margin-right: 20px;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: normal;
}

header.desktop .h-contact .info .item:hover{
    color: var(--header-top-color-hover);
}

header.desktop .h-contact .info .item i {
    margin-right: 6px;
    font-size: 13px;
}

header.desktop .h-contact .info .item.wp i {
    font-weight: normal;
    font-size: 20px;
}

header.desktop .h-contact .social-media {
    height: 40px;
    display: -webkit-flex;
    -webkit-align-items: center; 
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
}

header.desktop .h-contact .social-media a {
    margin-left: 15px;
    font-size: 14px;
    color: var(--header-top-color);
}

header.desktop .h-contact .social-media a:hover{
    color: var(--header-top-color-hover);
    transition: all var(--transition-time);
}

header.desktop .header-area {
    height: 120px;
    display: -webkit-flex;
    -webkit-align-items: center; 
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center
}

header.desktop .header-area.last {
    align-items: flex-end;
}

header.desktop .logo {
    align-items: center;
    -webkit-align-items: center;
    flex-direction: row;
    justify-content: flex-start;
}

header .icon-open i{
    font-size: 22px;
    margin-right: 15px;
}

header.desktop .logo a img {
    max-height: 80px;
}

header.desktop .search {
    width: 100%;
    border-bottom: 1px solid #000;
    border-radius: 0px;
    max-width: 470px;
    position: relative;
    transition: all var(--transition-time);
}

header.desktop .search form {
    width: 100%;
}

header.desktop .search form .input-box {
    width: 100%;
    padding-right: 45px;
    box-sizing: border-box;
}

header.desktop .search form input {
    float: left;
    color: #666;
    font-weight: 400;
    width: 100%;
    font-size: 13px;
    border-color: transparent !important;
    border-width: 0 !important;
    background: transparent !important;
    height: 45px;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
    padding-left: 20px;
}

.easy-autocomplete-container ul {
    border-top: 1px solid #ebebeb;
}

.easy-autocomplete-container ul .eac-category, .easy-autocomplete-container ul li {
    font-size: 13px;
    padding: 3px 10px;
    border-bottom: 1px solid #ebebeb;
}

header.desktop .search form input::placeholder {
    color: #666;
}

header.desktop .search:hover,
header.desktop .search:focus,
header.desktop .search:active{
    border-color: var(--main-color2);
}

header.desktop .search form .btn-send {
    position: absolute;
    border-width: 0;
    color: #000;
    right: 0px;
    border-radius: 0;
    font-size: 20px;
    top: 0px;
    transition: all var(--transition-time);
}

header.desktop .easy-autocomplete-container {
    top: 47px;
}

header.desktop .menu {
    background: var(--menu-bg-color);
    height: 70px;
    border: 1px solid #ebebeb;
    border-right: 0;
    border-left: 0;
}

header.desktop .mega-menu {
    padding: 0;
    position: relative;
}

header.desktop .mega-menu .navbar-nav {
    flex-direction: row;
    height: 70px;
}

header.desktop .mega-menu .nav-item {
    flex: 1;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

header.desktop .mega-menu .nav-link {
    padding: 0;
    display: flex;
    height: 100%;
    flex: 1;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--menu-color);
    line-height: normal;
    font-weight: 500;
    font-size: 13px;
    padding: 0 5px;
    white-space: unset !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all var(--transition-time);
}

header.desktop .mega-menu .nav-link::after {
    display: none;
}

header.desktop .mega-menu .nav-link:hover {
    color: var(--menu-color-hover);
}

header.desktop .mega-menu .nav-item:last-child .nav-link {
    border-right: 0;
}
  
header.desktop .mega-menu .dropdown {
    position: static;
}

header.desktop .mega-menu .dropdown-menu {
    border-radius: 0;
    background-color: #fff;
    width:100%;
    left:-1px;
    right:0;
    top:66px;
    position: absolute;
    -webkit-box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 5%);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.05);
    box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 5%);
    border: 1px solid #ebebeb;
    border-top: 0;
}

header.desktop .mega-menu .dropdown:hover .dropdown-menu, 
header.desktop .mega-menu .dropdown .dropdown-menu:hover {
    display:block!important;
}

header.desktop .h-banner{
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Mega Menu Container */
.mega-menu-container {
    padding: 20px;
}

.mega-menu-container .sub-cat{
    margin-bottom: 15px;
}

.mega-menu-container .sub-title {
    color: #000;
    font-weight: 500;
    font-size: 14px;
    display: block;
    margin-bottom: 7px;
    transition: all var(--transition-time);
}

.mega-menu-container .sub-title:hover{
    color: var(--main-color);
}

.mega-menu-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
 
.mega-menu-container ul li {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
}

.mega-menu-container ul li a {
    font-size: 13px;
    color: #222;
    font-weight: 400;
    line-height: 25px;
    transition: var(--transition-time);
}

.mega-menu-container ul li a.sub-title {
    color: #333;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 14px;
}

.mega-menu-container ul li a:hover {
    color: var(--main-color);
}




/* Mega Menu Side */

.mega-menu.side .mega-menu-container ul li{
    display: inline-block;
}

.mega-menu.side .mega-menu-container .comma{
    margin-right:4px;
}

.mega-menu.side .mega-menu-container ul li:last-child .comma{
    display:none;
}
/* Single Menu */
.single-menu-container{
    display: block;
}
.single-menu-container .single-menu{
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
    height: 70px;
    align-items: center;
}

.single-menu-container .single-menu li:first-child{
    margin-left: 0;
}

.single-menu-container .single-menu li{
    display: inline-block;
    position: relative;
    z-index: 100;
}

.single-menu-container .single-menu li .sub-single-item{
    font-weight: 400;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
    color: #000;
    transition: all 0.2s ease-in-out 0s;
    font-size: 15px;
    text-align: center;
}

.single-menu-container .single-menu li:hover>a:after {
    width: 100%;
}

.single-menu-container .single-sub-menu li a{
    border: 1px solid #ebebeb;
    animation: all ease .5s;
    -webkit-animation: all ease .5s;
    padding: 20px 15px;
    border-top: 0;
}

.single-menu-container .single-menu ul {
    visibility: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 170px;
    position: absolute;
    left: 0px;
    background: #fff;
    z-index: 99;
    transform: translate(0,20px);
    transition: all 0.2s ease-out;
    -webkit-box-shadow: 1px 1px 6px -4px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 1px 6px -4px rgba(0,0,0,0.75);
    box-shadow: 1px 1px 6px -4px rgba(0,0,0,0.75);
}


.single-menu-container .single-menu ul li {
    display: block;
    float: none;
    background: none;
    margin: 0;
    padding: 0;
}

.single-menu-container .single-menu ul li a {
    font-size: 14px;
    font-weight: 600;
    display: block;
    color: #333;
    background: #fff;
    transition: var(--transition-time);
}

.single-menu-container .single-menu ul li a:hover,.single-menu ul li:hover>a {
    color: var(--main-color);
}

.single-menu-container .single-menu li:hover>ul {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.single-menu-container .single-menu ul ul {
    left: 100%;
    top: 0px;
    visibility: hidden;
    opacity: 0;
    transform: translate(20px,20px);
    transition: all 0.2s ease-out;
}


.single-menu-container .single-menu li>ul ul:hover {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

/* Mobile Header */
.mobile-header-space {
    height: 60px;
    display: none; 
}

header.mobile {
    display: none;
    background: #fff;
    height: 60px;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

header.mobile .left {
    width: 30%;
    float: left;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    padding: 5px;
}

header.mobile .center {
    width: 40%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

header.mobile .right {
    width: 30%;
    float: left;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
}

header.mobile .logo img {
    max-height: 55px;
}

header.mobile .icon-group {
    position: relative;
}

header.mobile .icon-group {
    position: relative;
    color: #333;
    font-size: 21px;
}

header.mobile .icon-group .badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 18px;
    max-width: 25px;
    padding: 0;
    text-align: center;
    height: 18px;
    background: #d21c1c;
    font-size: 12px;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

header.mobile .mobile-search {
    padding: 0;
    background: #f3f3f3;
}

header.mobile .mobile-search form {
    width: 100%;
}

header.mobile .mobile-search form .input-box {
    width: 80%;
}

header.mobile .mobile-search form input {
    float: left;
    color: #444;
    width: 100%;
    font-size: 15px;
    border-color: transparent;
    background: transparent !important;
    height: 65px;
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none;
    outline: 0 !important
}

header.mobile .mobile-search form input::placeholder {
    color: #444;
}

header.mobile .mobile-search form input:focus,
header.mobile .mobile-search form input:hover {
    border-color: transparent !important;
}

header.mobile .mobile-search form .btn-send {
    float: right;
    width: 20%;
    height: 65px;
    border: 0;
    background: transparent !important;
    color: #333;
    font-size: 19px;
}

header.mobile .h-banner{
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Sidebar User */
.sidebar-user {
    background: #fff;
    width: 250px;
    position: fixed;
    top: 0;
    height: calc(100vh);
    transition: all .3s;
    z-index: 21;
    right: 0;
    margin-right: -250px;
}

.sidebar-user.active {
    margin-right: 0;
}

.sidebar-user .title {
    padding: 10px;
    background: var(--main-color);
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
}

.sidebar-user .title .btn-close {
    color: #fff;
}

.sidebar-user .login-menu a {
    display: block;
    padding: 10px;
    border-bottom: 1px solid #eaeaea;
    color: #333;
    font-size: 14px;
    font-weight: 500;
}

.sidebar-user .login-menu a i {
    width: 30px;
    margin-right: 10px;
    text-align: left;
}

.sidebar-user .scrollbar {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 100px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.sidebar-user .title-alt {
    padding: 10px;
    background: rgba(0, 0, 0, .15);
    font-size: 14px;
    font-weight: 500;
}

.sidebar-user .footer-links ul {
    margin: 0;
    padding: 0;
}

.sidebar-user .footer-links ul li {
    padding: 0;
    list-style: none;
}

.sidebar-user .footer-links ul li a {
    display: block;
    padding: 10px;
    border-bottom: 1px solid #eaeaea;
    color: #333;
    font-size: 14px;
}

.sidebar-user .footer-links ul li a.wp i {
    color: #21bd5c;
}

.sidebar-user .footer-links ul li a i {
    text-align: center;
    width: 40px;
    font-size: 16px;
}

/* Sidebar Menu */
.sidebar-menu {
    background: #fff;
    width: 250px;
    position: fixed;
    top: 0;
    height: calc(100vh);
    transition: all .3s;
    z-index: 9999;
    left: 0;
    margin-left: -250px;
}

.sidebar-menu.active {
    margin-left: 0;
}

.sidebar-menu .scrollbar {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 100px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.sidebar-menu .title {
    padding: 10px;
    background: #333;
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
}

.sidebar-menu .title .btn-close {
    color: #fff;
}

.sidebar-menu .title-alt {
    padding: 10px;
    background: rgba(0, 0, 0, .15);
    font-size: 14px;
    font-weight: 500;
}

.sidebar-menu .links a {
    display: block;
    display: block;
    padding: 10px;
    border-bottom: 1px solid #eaeaea;
    color: #333;
    font-size: 14px;
}

.sidebar-menu .links a i {
    float: right;
}

.sidebar-menu .categories {
    /*display: none;*/
}

.sidebar-menu .categories ul {
    margin: 0;
    padding: 0;
}

.sidebar-menu .categories ul li {
    padding: 0;
    list-style: none;
}

.sidebar-menu .categories ul li a {
    display: block;
    padding: 10px;
    border-bottom: 1px solid #eaeaea;
    color: #333;
    font-size: 15px;
    font-weight: 500;
}

.sidebar-menu .categories ul li a .name {
    width: 80%;
}

.sidebar-menu .categories ul li a .icon {
    color: #777;
    width: 20px;
    height: 20px;
    text-align: center;
    border-radius: 2px;
    font-size: 18px;
}

.sidebar-menu .categories ul .multi {
    display: none;
}

.sidebar-menu .categories ul .multi a {
    padding-left: 20px;
}

.sidebar-menu .categories ul .multi .multi a {
    padding-left: 40px;
}

.sidebar-menu .categories ul .multi .multi .multi a {
    padding-left: 60px;
}

/* Stores */
.stores {
    background: #fff;
    border-top: solid 1px #e6e6e6;
    padding: 10px 0;
}

.stores .cards {
    display: -webkit-flex;
    -webkit-align-items: center; 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row
}

.stores .card {
    border: none;
    box-shadow: none;
    margin: 0 !important;
    border-left: 1px solid #e6e6e6;
}

.stores .card:first-child {
    border-left: 0;
}

.stores .card .card-body {
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 10px;
}

.stores .card .card-body img {
    max-height: 80%;
    max-width: 60%!important;
    margin: 0 auto;
}

.stores .card .card-header {
    display: none;
}

.stores .text-white {
    font-weight: bold;
    font-size: 12px !important;
}

/* Footer */

footer {
    background: #000;
}

footer .bb {
    padding: 20px 0;
}

footer .logo-area {
    text-align: left;
    margin: 15px 0;
}

footer .logo-area .logo img {
    max-height: 100px;
    max-width: 230px;
}

footer .logo-description {
    margin-top: 15px;
}

footer .info {
    padding: 25px 0;
}

footer .title {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin-bottom: 15px;
}

footer .title-2 {
    color: #fff;
    font-size: 13px;
    
}

footer .title-3 {
    color: #fff;
    font-size: 17px;
    
}

footer .secure .description {
    color: #fff;
    margin: 5px 0;
}

footer .secure img {
    opacity: .5;
}

footer .info ul {
    padding: 0;
    margin: 0;
}

footer .info ul li {
    list-style: none;
    padding: 3px 0;
    color: #fff;
    font-size: 13px;
}

footer .info ul li a {
    display: block;
    color: #fff;
    font-size: 13px;
    position: relative;
    line-height: 25px;
    transition: all var(--transition-time);
}

footer .info ul li a:hover {
   text-decoration: underline;
}

footer .bar {
    padding: 10px 0;
    background: #000;
    border-top: 1px solid #666;
    color: #fff;
}

footer .bar a {
    color: #fff;
    text-align: center;
}

footer .bar a:hover {
    color: #fff;
}

footer .bar p {
    margin: 0;
    color: #fff;
}

/* Mobile Menu Tip 2 */

.sidebar-menu-type-2 {
    background: #fff;
    width: 100%;
    position: fixed;
    top: 0;
    height: calc(100vh);
    transition: all .3s;
    z-index: 9999;
    left: 0;
    margin-left: -100%;
}

.sidebar-menu-type-2.active {
    margin-left: 0;
}

.sidebar-menu-type-2 .scrollbar {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 100px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.sidebar-menu-type-2 .title {
    padding: 10px;
    background: #333;
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
}

.sidebar-menu-type-2 .title .btn-close {
    color: #fff;
}

.sidebar-menu-type-2 .title-alt {
    padding: 10px;
    background: rgba(0, 0, 0, .15);
    font-size: 14px;
    font-weight: 500;
}

.sidebar-menu-type-2 .links a {
    display: block;
    display: block;
    padding: 10px;
    border-bottom: 1px solid #eaeaea;
    color: #333;
    font-size: 14px;
}

.sidebar-menu-type-2 .links a i {
    float: right;
}

.sidebar-menu-type-2 .categories {
    /*display: none;*/
}

.sidebar-menu-type-2 .categories ul {
    margin: 0;
    padding: 10px;
}

.sidebar-menu-type-2 .categories ul li {
    padding: 0;
    list-style: none;
    border: 1px solid #e2e2e2;
    margin-bottom: 15px;
    position: relative;
}

.sidebar-menu-type-2 .categories ul li a img{
    height: 35px;
    margin-right: 10px;
}

.sidebar-menu-type-2 .categories ul li a {
    display: flex;
    padding: 10px;
    border-bottom: 0;
    color: #000;
    font-size: 14px;
    font-weight: 400;
    align-items: center;
}

.sidebar-menu-type-2 .categories ul li a .name {
    width: 80%;
}

.sidebar-menu-type-2 .categories ul li a .icon {
    color: #000;
    width: 20px;
    height: 20px;
    text-align: center;
    border-radius: 2px;
    font-size: 17px;
    position: absolute;
    right: 22px;
}

.sidebar-menu-type-2 .categories .multi li a .icon {
    right: 13px;
}

.sidebar-menu-type-2 .easy-autocomplete-container ul {
    border-top: 1px solid #ebebeb;
    top: 65px;
}

.sidebar-menu-type-2 .categories ul li a .icon .fa-angle-right:before {
    content: "\f078";
}

.sidebar-menu-type-2 .categories .multi .icon .fa-angle-right:before {
    content: "\f078";
}

.sidebar-menu-type-2 .categories ul .multi {
    display: none;
}

.sidebar-menu-type-2 .categories ul .multi li:first-child{
    display: none;
}

.sidebar-menu-type-2 .categories ul .multi a {
    padding-left: 20px;
}

.sidebar-menu-type-2 .categories .multi li {
    border: 0 !important;
    margin-bottom: 5px;
}

.sidebar-menu-type-2 .categories ul .multi a {
    padding: 0;
}

.sidebar-menu-type-2 .categories ul .multi .multi a {
    padding-left: 20px;
    font-size:12px;
}

.sidebar-menu-type-2 .mobile-search i{
    font-size: 25px;
    margin-right: 10px;
}

.sidebar-menu-type-2 .mobil-area-title {
    color: #000;
    margin: 15px 10px 10px 13px;
    display: block;
    font-weight: 500;
    font-size: 15px;
}

.sidebar-menu-type-2 .mobil-area-1 {
    display: flex;
    position: relative;
    text-align: center;
}

.sidebar-menu-type-2 .mobil-area-1 a {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 50%;
    justify-content: center;
    border: 1px solid #e2e2e2;
    margin: 0 10px;
    padding: 7px 1rem;
    color: #000;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
}

.sidebar-menu-type-2 .mobil-area-1 a img {
    margin-right: 10px;
    padding: 0;
    width: 41px;
    height: 41px;
}

.sidebar-menu-type-2 .logo-area a img {
    height: 70px;
    max-width: 250px;
}

.sidebar-menu-type-2 .logo-area {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e2e2e2;
    padding: 10px;
}

.mobile-menu-close {
    display: flex;
    justify-content: center;
    margin-right: 19px;
    font-size: 20px;
    align-items: center;
}

.mobile-menu-close i {
    border: 1px solid #e2e2e2;
    padding: 0.5rem;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    text-align: center;
    color: #e2e2e2;
    padding-top: 10px;
    padding-left: 9px;
}

.mobil-area-2 {
    margin: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.sidebar-menu-type-2 .short-link {
    width: 50%;
    padding: 15px 10px;
}

.sidebar-menu-type-2 .short-link.border-1{
    border-bottom: 1px solid #e2e2e2;
    border-right: 1px solid #e2e2e2;
}

.sidebar-menu-type-2 .short-link.border-2{
    border-bottom: 1px solid #e2e2e2;
}

.sidebar-menu-type-2 .short-link.border-3 {
    border-right: 1px solid #e2e2e2;
}

.sidebar-menu-type-2 .short-link a {
    color: #000;
    font-size: 13px;
    font-weight: 400;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.sidebar-menu-type-2 .short-link a i {
    margin-right: 10px;
    font-size: 20px;
}

.mobil-area-footer {
    text-align: center;
    color: #000;
}

.sidebar-menu-type-2 .scrollbar {
    width: 100%;
    height: 90%;
    box-sizing: border-box;
    padding-bottom: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}

.menu-sidebar-button{
    display: flex;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #ebebeb;
    align-items: center;
}

.nav-mobile {
  background: #446cb3;
  color: #fff;
  padding: 0;
  margin: 0;
  cursor: auto;
  font-size: 18px;
  list-style-type: none;
  box-shadow: 0 5px 5px -5px #333;
}
.nav-mobile:after {
  content: "";
  display: table;
  clear: both;
}
.nav-mobile svg {
  height: 45px;
  width: 65px;
  padding: 9px;
}
.nav-mobile svg path {
  fill: #fff;
}
.nav-mobile svg.icon-close {
  display: none;
  padding: 15px;
}
.nav-mobile li {
  width: 100%;
  height: 45px;
  line-height: 46px;
  text-align: center;
  float: left;
}
.nav-mobile li a {
  display: flex;
  color: #333;
  width: 100%;
  height: 100%;
  text-decoration: none;
  align-items: center;
}
.nav-mobile img{
    height: 35px;
    margin-right: 7px;
}
.nav-mobile .menu-button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  display: block;
}
.nav-mobile .menu-button:after {
  opacity: 0;
  top: 45px;
  content: "";
  width: 100vw;
  display: block;
  position: fixed;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  content: "";
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0, 0, 0.3, 1);
  transition-delay: 0.1s;
}
.nav-mobile .menu-sidebar.active{
  transform: translateX(0) !important;
  transition: all .4s;
}
.nav-mobile .menu-container {
  width: 65px;
  float: left;
  cursor: pointer;
  position: absolute;
}
.nav-mobile .menu-container .menu-sidebar {
  box-shadow: 5px 0 5px -5px #333;
  display: block;
  width: 65vw;
  bottom: 0;
  background: white;
  color: #333;
  position: fixed;
  transform: translateX(-405px);
  transition: all .4s;
  top: 0px;
  z-index: 1002;
  list-style-type: none;
  padding: 0;
  max-width: 400px;
  left: 0;
  overflow: auto;
}
.nav-mobile .menu-container .menu-sidebar .arrow {
  position: absolute;
  line-height: 50px;
  font-size: 32px;
  color: #555;
  top: 0;
  z-index: 0;
}
.nav-mobile .menu-container .menu-sidebar .arrow.left {
    position: relative;
    top: -2px;
    margin-right: 10px;
}
.nav-mobile .menu-container .menu-sidebar .arrow.right {
  right: 25px;
}
.nav-mobile .menu-container .menu-sidebar li {
  height: 55px;
  line-height: 55px;
  font-size: 16px;
  text-align: left;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-left: 20px;
}
.nav-mobile .menu-container .menu-sidebar li:hover {
  background: #eee;
}
.nav-mobile .menu-container .menu-sidebar li .menu-sub {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 0;
  overflow: hidden;
  background: white;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0, 0, 0.3, 1);
  border-left: 1px solid #ccc;
  list-style-type: none;
  padding: 0;
  margin: 0;
  z-index: 2;
  max-width: 400px;
}
.nav-mobile .menu-container .menu-sidebar li .menu-sub li {
  overflow: hidden;
}
.nav-mobile .menu-container .menu-sidebar li .menu-sub .menu-sub-title {
  padding-left: 0px;
}

.nav-mobile .menu-container .menu-sidebar li .menu-sub .menu-sub-title .submenu-label{
  padding: 10px 20px;
}

.nav-mobile .menu-container .menu-sidebar li .submenu-label {
  cursor: pointer;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.nav-mobile .menu-container .menu-sidebar li .submenu-toggle {
  display: none;
}
.nav-mobile .menu-container .menu-sidebar li .submenu-toggle.active ~ .menu-sub, .nav-mobile .menu-container .menu-sidebar li .submenu-toggle:checked ~ .menu-sub {
  width: 65vw;
  visibility: visible;
  z-index: 1;
  transition: width 0.35s cubic-bezier(0, 0, 0.3, 1);
  height: 100vw;
  overflow-y: scroll;
}

/* Custom */

.product-details-tab-product-details-tab-colorful{
    margin-bottom: 20px;
}

.product-body .customer-action{
    column-count: 4;
}

.product-body .customer-action .action i{
    width: 30px;
    height: 30px;
    display: inline-flex;
    border: 1px solid #ebebeb;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.product-body .customer-action .action{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    margin-bottom: 10px;
}

.product-profile-info li {
    margin: 8px 0;
    font-weight: 600;
}

.product-profile-info li .value{
    font-weight: 400;
}

.variant-box ul li .name{
    font-weight: 600;
}

.product-body .hr-line{
    width: 100%;
    height: 1px;
    background: #e1e1e1;
    margin: 15px 0;
}

.variant-box {
    border: 0;
    background: transparent;
    border-radius: 5px;
    padding: 0;
    font-size: 14px;
}

.product-buttons .btn-wp {
    font-size: 14px;
    background: #33aa29;
    border-color: #33aa29;
    color: #fff;
    font-weight: 500;
    margin: 10px 10px 10px 0;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0;
    border-radius: 0;
}

.product-profile-1 .carousel .carousel-indicators li {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 3px;
    border: 1px solid #eaeaea;
    margin-bottom: 5px;
    max-width: 100px;
}

.product-body .p-g-mod-base-content{
    border: 0 !important;
}

.product-profile-1 h1.title {
    font-size: 19px;
    font-weight: 600;
    color: #333;
    padding-bottom: 0px;
    border-bottom: 0;
}

.product-profile-1 .carousel .carousel-inner {
    border: 0;
}

.card-product .card-product-inner .price-group {
    display: flex;
    font-weight: 400;
    height: 50px;
    justify-content: flex-start;
    align-items: center;
    color: #333;
}

.card-product .card-product-inner .title {
    display: block;
    display: -webkit-box;
    max-width: 100%;
    margin: 5px 0;
    font-size: 13px;
    line-height: 18px;
    height: 36px;
    font-weight: 400;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    letter-spacing: .5px;
}

.card-product .card-product-inner .image-wrapper {
    display: flex;
    width: 100%;
    position: relative;
    align-items: center;
    justify-content: center;
}

.card-product{
    border: 0 !important;
}

.card-product .card-product-inner{
    padding: 0 !important;
}

footer .footer-contact,
footer .footer-contact *{
    color:#fff !important;
}

.product-profile-1 .carousel .carousel-indicators {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    height: auto;
    margin: 0;
    z-index: 0;
    flex-direction: row;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    max-height: 500px;
    overflow: scroll;
}

.info-bar-1 {
    border-top: 1px solid #ebebeb;
    padding: 20px 0;
    margin-top: 10px;
}

.info-bar-1 .icons {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    color: #000;
    padding: 10px 0;
}

.info-bar-1 .icons .icon-group {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 20px;
}

.info-bar-1 .icons .icon-group:last-child {
    border-right: 0;
}

.info-bar-1 .icons .icon-group i {
    font-size: 26px;
    margin-right: 25px;
    color: #000;
}

.info-bar-1 .icons .icon-group .inf .name {
    font-size: 13px;
    font-weight: 500;
    display: block;
    color: #000;
}

.info-bar-1 .icons .icon-group .inf .description {
    font-size: 12px;
    font-weight: 400;
    color: #000;
}

.login-body .p-g-mod-t-4{
    padding: 30px;
}

.login-body .p-g-mod-t-4 .nav-tabs {
    border: 0 !important;
    background: transparent !important;
    border-radius: 4px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.login-body .p-g-mod-t-4 .nav-tabs .nav-item {
    flex: 1;
    text-align: center;
    border-radius: 3px;
    border: 1px solid #e9e9e9 !important;
    background: #e9e9e9;
    color: #777;
    font-weight: 600;
    transition: all var(--transition-time);
    font-size: 16px;
}

.login-body .p-g-mod-t-4 .btn-without-login {
    color: #fff;
    background: var(--main-color) !important;
    border: none;
    margin-bottom: 20px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    height: 40px;
}

.login-body .p-g-mod-t-4 .btn-without-login i{
    line-height: 0;
}

.login-body .p-g-mod-t-4 .nav-tabs .nav-item.show .nav-link,
.login-body .p-g-mod-t-4 .nav-tabs .nav-link.active {
    border: 1px solid #c5c5c5 !important;
    background: #fff !important;
    color: #000 !important;
}

.login-body .p-g-mod-t-4 .btn-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
    display: flex;
    flex: 1;
    width: 100%;
    justify-content: center;
    font-size: 14px;
    height: 45px;
    align-items: center;
    font-weight: 500;
}

.login-body .p-g-mod-t-4 .btn-fb-login {
    background: #4c69ba!important;
    background-image: linear-gradient(#4c69ba,#3b55a0)!important;
    text-shadow: 0 -1px 0 #354c8c!important;
    color: #fff!important;
    border: 1px solid #4c69ba!important;
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 14px;
}

.login-body .p-g-mod-t-4 .btn-fb-login i {
    padding-right: 10px!important;
    border-right: 0 !important;
}

.login-body .p-g-mod-t-4 .btn-google-login {
    background: #db4437!important;
    background-image: linear-gradient(#db4437,#cc3e32)!important;
    text-shadow: 0 -1px 0 #db4437!important;
    color: #fff!important;
    border: 1px solid #db4437!important;
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 14px;
}

.login-body .p-g-mod-t-4 .btn-google-login i{
    padding-right: 10px!important;
    border-right: 0 !important;
}

.p-g-mod-t-12 .p-g-mod-body .social-share {
    border-top: 1px solid rgba(0,0,0,.1);
    font-size: 12px;
    margin-top: 10px;
}

.p-g-mod-t-15 .p-g-mod-body.p-g-mod-body-p-0 ul li a,
.p-g-mod-t-16 .p-g-mod-body.p-g-mod-body-p-0 ul li a,
.p-g-mod-t-58 .p-g-mod-body.p-g-mod-body-p-0 ul li a {
    padding: .75rem 10px;
}

.card-blog .buttons .btn-read-more {
    background: #fff;
    color: #000;
    border: 1px solid #000;
    font-size: 13px;
    border-radius: 3px;
    padding: 5px 15px;
}

.card-blog .buttons .btn-read-more i {
    font-size: 9px;
    margin-left: 5px;
}

.category-filter-order-desktop{
    display: inline-block;
    width: 170px;
    line-height: normal;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 35px;
    font-size: 13px;
    color: #4a4a4a !important;
    font-weight: 400;
    padding-left: 14px;
    border: 1px solid #e7e3e3 !important;
    border-radius: 3px;
    background: url(images/select-arrow.svg) no-repeat;
    background-position: right 10px center;
    background-color: #fff;
    outline: none;
}

.category-filter-order-desktop:focus{
    border-color: #e7e3e3 !important;
}

.categories-body .product-view-select a div {
    width: 9px;
    height: 13px;
    background: #e2e6eb;
    border-radius: 1px;
    margin:0 2px;
}

.categories-body .product-view-select a.active div {
    background: var(--main-color);
}

.categories-body .product-view-select a {
    background: #fff;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #e7e3e3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    margin-left: 10px;
    transition: var(--transition-time);
    padding:0 10px;
}

.category-filter-order .list-wrap {
    background: #eeeeee;
    border-radius: 5px;
    padding: 10px 20px;
}

.category-filter-order .list-wrap .list {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    font-size: 12px;
    font-weight: 500;
    justify-content: space-between;
}

.categories-body .pattern-group .p-g-mod-t-20 > .p-g-mod-header {
    border-bottom: 0;
    padding-left:0 !important;
}

.category-filter-order .list-wrap .list li {
    flex: inherit;
}

.category-filter-order-mobile{
    display: none;
}

.pattern-group .p-g-mod-showcase .p-g-mod-header{
    border-bottom: 0;
}

.card-product .card-product-inner .price-group .prices .sale-price {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    line-height: normal;
}

.card-product-content{
    text-align: center;
    color: #555;
}

.card-product .card-product-inner .product-label img {
    max-height: 35px;
}

.category-filter-order .list-wrap .list li .lag-checkbox{
    transition: all var(--transition-time);
}

.category-filter-order .list-wrap .list li.active .lag-checkbox,
.category-filter-order .list-wrap .list li:hover .lag-checkbox {
    background: var(--main-color);
    color: #fff;
}

.pattern-group .p-g-mod-t-26 .p-g-mod-body .buttons .btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
    width: 100%;
    margin: 0 !important;
    border-radius: 0;
}

.categories-body .p-g-mod-t-cat-filter{
    border: 1px solid #ebebeb;
    margin-bottom: 10px;
}

.product-details-tab-product-details-tab-colorful .p-g-tab-wrapper .p-g-t-nav {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    margin-bottom: 0px;
}

.product-details-tab-product-details-tab-colorful .p-g-tab-wrapper .p-g-t-nav .nav {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    height: 50px;
    background: #fafafa;
}

.pattern-group .p-g-tab-wrapper .p-g-t-nav .nav .nav-link{
    transition: var(--transition-time);
    border-bottom:2px solid transparent;
}

.pattern-group .p-g-tab-wrapper .p-g-t-nav .nav .nav-link.active{
    border-bottom:2px solid var(--main-color2);
    color: var(--main-color2);
}

.pattern-group .p-g-tab-wrapper .p-g-t-nav .nav .nav-link:hover{
    color: var(--main-color2);
}
.product-details-tab-product-details-tab-colorful .tab-content{
    border: 1px solid #ebebeb;
    border-top: 0;
}

.product-profile-1 .carousel .carousel-indicators li.active {
    border-color: var(--main-color);
}

.product-badges .p-badge {
    height: 60px;
    border-radius: 0;
}

.p-g-mod-base-content{
    border: 1px solid #ebebeb;
}

.p-g-mod-t-10 .p-g-mod-body a,
.p-g-mod-t-2 .p-g-mod-body a{
    transition: all var(--transition-time);
}

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

.contact-info .contact-item{
    margin: 5px 0;
    display: flex;
    align-content: center;
    cursor: pointer;
    color: #fff;
}

.contact-info .contact-item i{
    margin-right: 10px;
    font-size: 17px;
    transition: all var(--transition-time);
}

.contact-info .contact-item a{
    color: #fff;
}

footer .bar .cards {
    min-height: auto;
    background: inherit;
}

footer .bar .right-image {
    text-align: right !important;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.p-g-mod-t-45 .carousel-type-1 .carousel-indicators li {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.product-profile-info .sale-price-discount,
.hizli-sepet .sale-price-discount{
    display: inline-flex;
    align-items: center;
    border: 1px solid #ebebeb;
    padding: 10px;
    margin-top: 10px;
    font-size: 16px;
}

.product-profile-info .sale-price-discount .sale-price,
.hizli-sepet .sale-price{
    font-size: 20px;
    font-weight: 600;
}

.card-product .sale-price-basket {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ebebeb;
    padding: 5px 0;
    margin: 3px 0;
    flex-direction: column;
}

.card-product .sale-price-basket .sale-price{
    font-weight: 500;
    font-size: 15px;
}

.native-modal.show .hizli-sepet .related-products {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: inherit;
}

.native-modal.show .hizli-sepet .fast-product-cart-box::-webkit-scrollbar {
      -webkit-appearance: none;
      width: 7px;
    }
    
.native-modal.show .hizli-sepet .fast-product-cart-box::-webkit-scrollbar-thumb {
      border-radius: 4px;
      background-color: rgb(181 181 181 / 50%);
      -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

.hizli-sepet {
    max-width: 960px !important;
}

.native-modal.show .hizli-sepet .modal-content {
    border: 0;
    border-radius: 0;
    position:relative;
}

.native-modal.show .hizli-sepet .modal-content .prices{
    display: flex;
    align-items: center;
}

.native-modal.show .hizli-sepet .modal-content .fast-product-title{
    font-size: 19px;
    color: #151515;
    margin-bottom: 10px;
    font-weight: 600;
    line-height: 25px;
}

.native-modal.show .hizli-sepet .modal-content .product-reviews .stars .star {
    color: #dbdbdb;
    font-size: 12px;
    margin-right: 1px;
}

.native-modal.show .hizli-sepet .modal-content .product-reviews .stars{
    margin: 15px 0;
}

.native-modal.show .hizli-sepet .modal-content .iliskili-urunler{
    color: #858585;
    font-weight: 600;
}

.native-modal.show .hizli-sepet .modal-content .iliskili-urunler .value{
    color: #000;
}

.native-modal.show .hizli-sepet .modal-content .product-price-group .prices .list-price {
    font-size: 19px;
    font-weight: 500;
    color: #999;
    text-decoration: line-through;
    margin-right: 10px;
}

.native-modal.show .hizli-sepet .modal-content .short-desc{
    color: #454545;
    font-size: 14px;
    margin-bottom: 15px;
}

.native-modal.show .hizli-sepet .carousel-indicators li{
    width: 10px;
    height: 10px;
    background-color: #898989;
    border-radius: 50%;
    border: 4px solid transparent;
}

.native-modal.show .hizli-sepet .carousel-indicators li.active {
    opacity: 1;
    background-color: #000 !important;
    border: 4px solid #c3c3c3;
}

.native-modal.show .hizli-sepet .product-favourite2{
    position: absolute;
    top: 15px;
    left: 25px;
    z-index: 999;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    padding-top: 3px;
    -webkit-box-shadow: 0px -2px 18px -3px rgb(0 0 0 / 58%);
    box-shadow: 0px -2px 18px -3px rgb(0 0 0 / 58%);
}

.native-modal.show .hizli-sepet .product-buttons {
    display: inline-flex;
    flex-wrap: nowrap;
}

.native-modal .native-modal-close{
    z-index:9;
    outline:0;
}

.native-modal.show .hizli-sepet .fast-product-cart-box{
    height: 100%;
    display: flex;
    flex-direction: column;
    max-height: 600px;
    overflow-y: auto;
}

.native-modal.show .hizli-sepet .modal-body{
    padding:0 !important;
}


/* Ürün Detay - Birim */

.product-body .product-profile-1 .product-unit {
    display: flex;
    justify-content: center;
    font-weight: 500;
    align-items: center;
    border-radius: 5px;
    border: solid 1px #d9d9d9;
    width: 95px;
    padding: 5px 0;
    margin-right: 10px !important;
    height: 46px;
    margin: 10px 0;
}

.product-body .product-profile-1 .product-unit  input[type=checkbox],
.product-body .product-profile-1 .product-unit  input[type=radio] {
    box-sizing: border-box;
    padding: 0;
    margin-right: 5px;
}

.product-body .product-profile-1 .product-unit input[type='radio']:checked:after {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    top: -2px;
    left: -1px;
    position: relative;
    background-color: #96be67;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 3px solid #ebebeb;
}

/* Ürün Kartı - Adet Seçimi */

.card-product .card-product-inner .quantity {
    margin: 5px 0;
    width: 100%;
    text-align: center;
    display: flex;
    flex-basis: auto;
    justify-content: center;
}

.card-product .card-product-inner .quantity .btn {
    display: flex;
    width: 35px;
    height: 35px;
    color: #555;
    font-size: 10px;
    border: 1px solid #ebebeb;
    border-radius: 0;
    align-items: center;
    justify-content: center;
}

.card-product .card-product-inner .quantity .btn:first-child {
    border-radius: 0;
}

.card-product .card-product-inner .quantity .btn:hover {
    color: #333;
    background: #f2f2f2;
    border-color: #f5f5f5;
}

.card-product .card-product-inner .quantity input {
    min-width: 35px;
    max-width: 50px;
    height: 35px;
    border-radius: 0;
    border-color: #dbdbdb !important;
    background: #fff;
    color: #555;
    text-align: center;
    font-weight: 400;
    font-size: 15px;
    border-right: 0;
    border-left: 0;
}

.subtitle-img img {
    max-height: 25px;
    margin-bottom: 3px;
}

header.desktop .mega-menu .nav-link{
    flex:none;
    margin-top:5px;
    height: auto;
}

.single-menu-container .single-menu li .subtitle-img{
    font-weight: 500;
    text-decoration: none;
    padding: 0;
    display: block;
    color: #fff;
    transition: all 0.2s ease-in-out 0s;
    font-size: 16px;
}

.single-menu-container .single-menu li{
    text-align: center;
}

.single-menu-container .single-menu li .sub-single-item{
    padding: 0 15px;
}

/* 404 Sayfası */

.e404-body{
    background: repeating-linear-gradient(45deg,transparent, transparent 10px,
        #f8f8f8 10px, #f8f8f8 20px),linear-gradient(to bottom,#fff, #fff
     );
}

.e404-btn{
    background: #ffffff;
    border-radius: 45px;
    color: #212121;
    padding: 20px 50px;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 600;
    -moz-box-shadow: inset 0 -1px 1px #333, 0 5px 0 #222, 0 6px 8px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: inset 0 -1px 1px #333, 0 5px 0 #222, 0 6px 8px rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 -1px 1px #333, 0 5px 0 #222, 0 6px 8px rgba(0, 0, 0, 0.35);
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    text-decoration: none;
}

.e404-btn:hover{
    color:var(--main-color);
    -moz-box-shadow: inset 0 -1px 1px var(--main-color), 0 5px 0 var(--main-color), 0 6px 8px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: inset 0 -1px 1px var(--main-color), 0 5px 0 var(--main-color), 0 6px 8px rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 -1px 1px var(--main-color), 0 5px 0 var(--main-color), 0 6px 8px rgba(0, 0, 0, 0.35);
}

/* 404 Sayfası - Tip 1 */

.e404-content .e404-logo img{
    max-height: 100px;
    border: none !important;
}

.e404-page-type-1 {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px 0;
}

.e404-page-type-1 .e404-pic {
    height: 200px;
    background: #fff;
    border: 1px solid #e2e2e2;
    padding: 10px 20px;
    border-radius: 10px;
}

.e404-page-type-1 .e404-title{
    color: #3b3a39;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 2rem;
    margin: 30px 0px 0px 0px;
}

.e404-description{
    color: #808080;
    font-size: 1rem;
    margin: 5px;
    text-align: center;
    font-weight: 300;
}
    
/* İki Bölümlü 404 Sayfası - Tip 2*/

.e404-page-type-2 {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 0;
}

.e404-page-type-2 .e404-content{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: 100px;
    padding: 0 10%;
    border-top: 0;
    border-left: 0;
}

.e404-page-type-2 .e404-pic{
    height: 400px;
    background: #fff;
    border: 1px solid #e2e2e2;
    padding: 10px 20px;
    border-radius: 10px;
}

.e404-page-type-2 .e404-title{
    color: #3b3a39;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 2rem;
    margin: 30px 0px 0px 0px;
}

/* Mobil Uygulama İkonları  */

footer .mobile-app-title{
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    display: block;
    color: #fff;
}

footer .mobile-app img{
    max-height: 40px;
}

/* Müşteri Etkileşim Butonları */

.product-customer-actions{
    padding: 10px 0;
    background: #f5f5f5;
}

.product-customer-actions .action .button i {
    font-size: 15px;
    margin-right: 10px;
}

.product-customer-actions .action:first-child {
    border-left: 0;
}
.product-customer-actions .action {
    border-right: 0;
}

/* Havale İndirimi */

.product-transfer-discount{
    background: #f2f2f2;
    padding: 10px;
    width: 100%;
    border-radius: 5px;
    border-left: 5px solid var(--main-color);
    font-size:14px;
    color:#7a7a7a;
}

/* E-Bülten */

.newsletter-content .newsletter-title{
    color: #fff;
    font-weight: 400;
    font-size: 13px;
    margin-bottom: 10px;
}
    
.newsletter-input{
    height: 40px;
    background: #fff !important;
    display: block;
    color: #a3a2a2;
    position: relative;
    line-height: 23px;
    font-size: 13px;
    font-weight: 400;
    border-radius: 0;
    box-shadow: none;
    border: 0;
    border-bottom: 1px solid #ebecee;
}

.newsletter-form .btn-submit{
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 13px;
    font-weight: 500;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
}

.newsletter-form{
    position: relative;
    width: 100%;
}

/* SMS Bülteni */

.sms-newsletter-content .newsletter-title{
    color: #fff;
    font-weight: 400;
    font-size: 13px;
    margin-bottom: 10px;
}
    
.sms-newsletter-input{
    height: 40px;
    background: #fff !important;
    display: block;
    color: #a3a2a2;
    position: relative;
    line-height: 23px;
    font-size: 13px;
    font-weight: 400;
    border-radius: 0;
    box-shadow: none;
    border: 0;
    border-bottom: 1px solid #ebecee;
}

.sms-newsletter-form .btn-submit{
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 13px;
    font-weight: 500;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
}

.sms-newsletter-form{
    position: relative;
    width: 100%;
}

/* Footer Social Media*/

footer .social-media .social-media-title{
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

footer .social-media a{
    color: #000;
    font-size: 20px;
    margin-right: 20px;
    color: #fff;
}

footer .social-media a:last-child{
    margin-right:0;
}

.card-product .card-product-inner .price-group .prices .list-price{
    text-decoration: line-through;
}

/* Buttons */

.card-blog,
.card-brand,
.card-category,
.card-product {
    border: 1px solid #e0e0e0;
    border-radius: 5px;
}

.card-product .card-product-inner .free-cargo-badge {
    position: absolute;
    left: 10px;
    background: #009688;
}

.card-product .card-product-inner .buttons .btn-cart,
.modal-content .buttons .btn-cart{
    background: var(--add-cart-list-bg);
    border-color: var(--add-cart-list-bg);
    color: var(--add-cart-list) !important;
    transition: var(--transition-time);
}

.card-product .card-product-inner .buttons .btn-cart i,
.modal-content .buttons .btn-cart i{
    margin-right: 7px;
}

.card-product .card-product-inner .buttons .btn-cart:hover,
.modal-content .buttons .btn-cart:hover{
    background: var(--add-cart-list-bg-hover);
    border-color: var(--add-cart-list-bg-hover);
    color: var(--add-cart-list-hover) !important;
}

.card-product .down-to-top .btn-cart{
    background: var(--add-cart-list-bg);
    border-color: var(--add-cart-list-bg);
    color: var(--add-cart-list) !important;
    transition: var(--transition-time);
    font-size: 13px;
}

.card-product .down-to-top .btn-cart:hover{
    background: var(--add-cart-list-bg-hover);
    border-color: var(--add-cart-list-bg-hover);
    color: var(--add-cart-list-hover) !important;
}

.product-buttons .btn-cart{
    background: var(--add-cart-detail-bg);
    border-color: var(--add-cart-detail-bg);
    color: var(--add-cart-detail);
    transition: all var(--transition-time);
    border-radius: 0;
    flex: 1;
}

.product-buttons .btn-cart:hover{
    background: var(--add-cart-detail-bg-hover);
    border-color: var(--add-cart-detail-bg-hover);
    color: var(--add-cart-detail-hover);
}

.product-buttons .btn-fast-buy {
    background: var(--buy-now-bg);
    border-color: var(--buy-now-bg);
    color: var(--buy-now);
    transition: all var(--transition-time);
    border-radius: 0;
    flex: 1;
}

.product-buttons .btn-fast-buy:hover{
    background: var(--buy-now-bg-hover);
    border-color: var(--buy-now-bg-hover);
    color: var(--buy-now-hover);
}


.payment-final-buttons-1 .btn-complete{
    background: var(--complete-payment-bg);
    border-color: var(--complete-payment-bg);
    color: var(--complete-payment);
    transition: all var(--transition-time);
}

.payment-final-buttons-1 .btn-complete:hover{
    background: var(--complete-payment-bg-hover);
    border-color: var(--complete-payment-bg-hover);
    color: var(--complete-payment-hover);
}

.product-favourite-kart{
    display: inline-block;
    position: absolute;
    right: 0;
    z-index: 2;
}

.product-favourite-kart a{
    font-size: 20px;
}
/* Header  */

header.desktop .header-bar .bar-link .icon{
    position:relative;
}

header.desktop .header-bar .bar-link .icon,
header.desktop .header-bar .bar-link .name{
    transition: all var(--transition-time);
}

header.desktop .header-bar .bar-link:hover .icon,
header.desktop .header-bar .bar-link:hover .name{
    color: var(--main-color2);
}

header.desktop .header-bar .bar-user .link a .name{
    color: #222 !important;    
}

header.desktop .header-bar .bar-user .link a:hover .name{
    color: var(--main-color2) !important;    
}

header.desktop .header-bar .bar-link{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #222 !important;
    position: relative;
    line-height: normal;
    font-weight: 400;
    flex: 1;
    transition: all var(--transition-time);
}

header.desktop .header-bar .bar-link a{
    color: #222;
}

header.desktop .header-bar .bar-user .link{
    display: flex;
    flex-direction: column;
}

header.desktop .header-bar .bar-link i{
    margin-right: 7px;
    font-size: 23px;
}

header.desktop .header-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

header.desktop .header-bar .bar-cart .icon .count {
    position: absolute;
    right: -10px;
    top: -10px;
    min-width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #db2534;
    color: #fff;
    font-size: 11px;
    border-radius: 50%;
}


/* Category Page */
.product-view-select{
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 100%;
    align-items: center;
}


/* Card Product */
.card-product .it-over {
    position: absolute;
    bottom: 10%;
    left: 0;
    right: 0;
    width: 100%;
    background: rgb(255 255 255 / 90%);
    color: #000;
    border: 1px solid #000;
    text-align: center;
    height: 50px;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.card-product .carousel-control-next i, 
.card-product .carousel-control-prev i{
    padding: 5px;
    background: #fff;
    font-size: 18px;
    color:#000;
}
.card-product .buttons-wrapper.right-to-left {
    overflow: hidden;
    opacity: 0;
    position: absolute;
    transition: all 0.4s;
    background: transparent;
    z-index: 9;
    margin: 0 auto;
}

.card-product .right-to-left .button-group{
    background: transparent;
}

.card-product .right-to-left .cart-group{
    display: flex;
    flex-direction: row;
}

.card-product .right-to-left .cart-group a{
    padding: 0;
    background: var(--main-color2);
    margin: 0 10px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
}

.card-product .right-to-left .cart-group a i{
    font-size: 17px;
    transition: all var(--transition-time);
}

.card-product .right-to-left .cart-group a:hover{
    background: var(--main-color);
}

.card-product:hover .right-to-left{
    opacity:1;
    transition: all var(--transition-time);
}

.card-product .buttons-wrapper.down-to-top{
    position: absolute;
    overflow: hidden;
    width: 100%;
    left: 50%;
    transform: translate3d(-50%,0%,0);
    z-index: -1;
}
.card-product .down-to-top .button-group{
    background: transparent;
    padding: 7px;
}
.card-product .btn-cart{
    display: flex;
    justify-content: center;
    align-items: center;
}
.card-product:hover .down-to-top{
    position: absolute;
    overflow: hidden;
    width: 100%;
    left: 50%;
    transform: translate3d(-50%,-100%,0);
    transition:all .4s;
    z-index: 999;
}

.card-product:hover .down-to-top .button-group{
    opacity: 1;
    visibility: visible;
    transform: translate3d(0,0,0);
    transition:all .4s;
    margin: 0 ;
    padding:3px 0;
}

/* Product Detail */
.product-carousel-mobile{
    display: none;
}
.video-play{
    position: relative;
}
.video-play i{
    position: absolute;
    bottom: 0;
    top: 0;
    width: 30px;
    height: 30px;
    border: 1px solid #000;
    border-radius: 100%;
    line-height: 28px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    text-indent:1px;
}


/* Responsive */
@media (max-width: 991px) {
    
    .product-body .customer-action {
        column-count: 2;
    }
    
    .product-profile-1 .carousel .carousel-indicators li {
        max-width: 70px;
    }
    
    .info-bar-1 .icons {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        color: #000;
        padding: 10px 0;
        flex-direction: column;
    }
    
    .login-body .p-g-mod-t-4 {
        padding: 7px;
    }
    
    .category-filter-order-desktop{
        display: none;
    }
    
    .product-details-tab-product-details-tab-colorful .p-g-tab-wrapper .p-g-t-nav .nav{
        height: auto;
    }
    
    .product-profile-1 .product-quantity{
        margin-right: 10px;
    }
    
    .product-badges .p-badge {
        height: 55px;
        flex: auto;
    }
    
    .product-buttons .btn-fast-buy {
        flex: 1;
    }
    
    .product-buttons .btn-cart{
        flex:1;
        margin-left:0;
    }
    
    .product-buttons .btn-wp {
        width: 100%;
    }
    
    .card-product .right-to-left{
        display: none !important;
    }
    
    .product-view-select{
        display: none;
    }
    
    .pattern-group .p-g-mod-t-26 .p-g-mod-body .buttons .btn-secondary {
        width: auto;
        margin: 5px;
        border-radius: 3px;
    }
    
    .categories-body .p-g-mod-t-cat-filter {
        margin: 10px;
    }
    
    footer .bar .right-image {
        justify-content: center;
    }
    
    footer .bb .pr-5{
        padding-right: 10px !important;
    }
    
    footer .mobile-app{
        margin-bottom: 20px;
    }
    
    .product-carousel-desktop.normal{
        display: none;
    }
    .product-carousel-mobile{
        display: block;
    }
    
    .mobile-header-space { 
        display: block;
    }

    header.desktop {
        display: none;
    }

    header.mobile {
        display: block;
    }
    
    .stores .cards {
        display: block;
        text-align: center;
    }

    .stores .card {
        display: inline-block;
        border-right: none;
        margin: 0;
        max-width: 45%;
        height: 50px;
        border: 0
    }
    footer .bar p {
        text-align: center !important;
    }
    
    footer .bar .right-image {
        margin: 10px 0;
        text-align: center !important;
    }

    footer .logo-area {
        display: none;
    }
    
    footer .bb {
        border-top: 0;
        border-bottom: 0;
    }

    footer .info {
        padding-top: 0;
    }

    footer .info .title {
        text-align: center !important;
        color: #fff;
        border: 1px solid #fff;
        padding: 8px;
        position: relative;
    }

    footer .info .title::after {
        content: "+";
        right: 10px;
        top: 3px;
        bottom: 0;
        position: absolute;
        font-size: 20px;
        margin-bottom: 10px;
    }

    footer .info .fs {
        display: none;
        text-align: center !important;
        border: 1px solid #fff;
        margin-bottom: 15px;
        color: #fff !important;
        padding: 10px;
    }

    footer .info ul {
        margin: 0;
    }

    footer .info ul li {
        color: #fff !important;
    }

    footer .info ul li a {
        color: #fff;
    }

    footer .info ul li a:before {
        display: none;
    }

    footer .social-media {
        justify-content: center;
        margin: 10px 0;
    }

    footer .secure {
        text-align: center !important; 
        margin: 10px 0;
    }

}

/* Header Shopping Cart */

header.desktop .header-cart-hover .nav-link::after {
    display: none;
}

  
header.desktop .header-cart-hover {
    position: relative;
    display: flex;
    flex: 1;
}

header.desktop .header-cart-hover .dropdown-menu {
    border: 0;
    border-radius: 0;
    background-color: #fff;
    width: 300px;
    left: inherit;
    right: 0;
    top: 28px;
    position: absolute;
    border: 2px solid #ececec;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.05);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.05);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.05);
    margin-top:0 !important;
    padding-top:0 !important;
    padding-bottom: 0;
}

header.desktop .header-cart-hover .dropdown-menu .top-header{
    background: #f7f7f7;
    display: flex;
    justify-content: space-evenly;
    padding: 5px 0;
}

header.desktop .header-cart-hover .dropdown-menu .top-header .title{
    font-size: 14px;
    padding: 5px 0;
    font-weight: 500;
}   

header.desktop .header-cart-hover:hover .dropdown-menu, 
header.desktop .header-cart-hover .dropdown-menu:hover {
    display:block!important;
}
 
header.desktop .header-cart-hover .dropdown-menu ul.user-links {
    margin: 0;
    padding: 0;
}

header.desktop .header-cart-hover .dropdown-menu ul.user-links li {
    margin: 0;
    padding: 0;
    list-style: none;
    padding-left: 10px;
}

header.desktop .header-cart-hover .dropdown-menu ul.user-links li:hover{
    background: #f7f7f7;
    
}

header.desktop .header-cart-hover .dropdown-menu ul.user-links li a {
    display: block;
    font-size: 13px;
    color: #000;
    border-bottom: 1px solid #ebebeb;
    padding: 5px 0;
}

header.desktop .header-cart-hover .dropdown-menu ul.user-links li:last-child a{
    border-bottom: 0px;
}

header.desktop .header-cart-hover .dropdown-menu ul.user-links li a i {
    margin-right: 5px;
}

header.desktop .header-cart-hover .dropdown-menu ul.auth-links {
    margin: 0;
    padding: 0;
}

header.desktop .header-cart-hover .dropdown-menu ul.auth-links li {
    margin: 0;
    padding: 0;
    list-style: none;
}

header.desktop .header-cart-hover .dropdown-menu ul.auth-links li a {
    display: block;
    text-align: center;
    padding: 10px 5px;
    color: #000;
    font-size: 13px;
    font-weight: 500;
}


header.desktop .header-cart-hover .dropdown-menu ul.auth-links li a i {
    margin-right: 10px;
}

header.desktop .header-cart-hover .btn-remove{
    background: #dedede;
    border: none;
    color: #000;
    font-size: 12px;
    width: 25px;
    height: 25px;
    border-radius: 20px;
    display: flex;
    font-weight: 500;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
}


.header-cart-summary-1 {
        
}

.header-cart-summary-1 .table th {
    font-size: 12px !important;
    font-weight: 500;
        
}
        
.header-cart-summary-1 .buttons {
    display: flex;
    flex-direction: column;
    margin-right: 12px;
}

.header-cart-summary-1 .buttons .btn {
    font-size: 12px !important;
    padding: 5px 3px !important;
    margin: 5px;
    background: var(--add-cart-list-bg);
    color: var(--add-cart-list);
    transition: all var(--transition-time);
}

.header-cart-summary-1 .buttons .btn:hover {
    background: var(--add-cart-list-bg-hover);
    color: var(--add-cart-list-hover);
}

.header-cart-summary-1 .buttons .btn-color-2 {
    background: var(--buy-now-bg);
    color: var(--buy-now);
    transition: all var(--transition-time);
}

.header-cart-summary-1 .buttons .btn-color-2:hover{
    background: var(--buy-now-bg-hover);
    color: var(--buy-now-hover);
}

.header-cart-summary-1 .buttons .btn-color-2 i{
    font-size: 8px;
    padding-left: 3px;
}


.ajax-shopping-cart {
    padding: 15px;
    font-size: 12px;
    max-height: 300px;
    overflow-y: auto;
}

.ajax-cart-empty{
    font-size: 13px !important;
    text-align: center;
    padding: 20px 0;
}

.ajax-shopping-cart .product {
    display: flex;
    margin-bottom: 10px;
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 10px;
    padding-top: 10px;
}

.ajax-shopping-cart .product:last-child{
    display: flex;
    margin-bottom: 10px;
    border-bottom: 0;
    padding-bottom: 0;
    padding-top: 0;
}

.ajax-shopping-cart .product .image {
    flex: 2;
}

.ajax-shopping-cart .product .price {
    flex: 2;
    font-size: 13px;
    text-align: right;
}

.ajax-shopping-cart .product .info {
    flex: 3;
    text-align:right;
}

.ajax-shopping-cart .product .info .name {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 5px;
    color: #000;
}

.sidebar-menu-type-2 .logo-area a img {
	max-height: 40px
}

.sidebar-menu-type-2 .mobil-area-title {
	font-size: 16px
}

.sidebar-menu-type-2 .categories ul li a {
	font-size: 15px;
	font-weight: 500
}

.sidebar-menu-type-2 .categories ul .multi a {
    padding: 6px 0;
    font-size: 14px;
    font-weight: 400
}

.sidebar-menu-type-2 .categories ul .multi .multi a {
	font-size: 14px
}

.mobile-menu-close i {
    border: 1px solid #b8b8b8;
    color: #b8b8b8;
}

.sidebar-menu-type-2 .categories ul .multi li:first-child {
	display: block
}

@media (max-width: 991px){
	.product-profile-1 .carousel .carousel-indicators li {
    	max-width: 50px;
	}
}

@media (max-width: 991px){
    .product-profile-1 h1.title {
        margin-top: 10px;
    }
}

@media (min-width: 768px) {
    .product-profile-1 .carousel .carousel-indicators{
        overflow: unset !important;
        overflow-y: auto !important;
    }
}

@media (max-width: 767px) {
    .product-profile-1 .carousel .carousel-indicators{
        overflow: unset !important;
        max-height: unset !important;
    }

    .product-profile-1 .carousel .carousel-indicators li {
        max-width: 50px;
    }
}


.card-product .card-product-inner .c-p-i-link {
	width: 100%
}

.p-g-mod.p-g-mod-t-39 {
    margin-bottom: 10px;
    margin-top: -10px;
    border: 0 !important;
}

.p-g-mod.p-g-mod-t-39 .p-g-mod-header {
    height: 35px !important;
    padding: 10px !important;
    color: #333;
}

.p-g-mod.p-g-mod-t-39 .p-g-mod-header .p-g-m-h-info .p-g-m-h-i-title {
    font-size: 14px !important;
}

.p-g-mod.p-g-mod-t-39 .p-g-mod-body:not(.p-g-mod-body-p-0) {
    padding: 0 !important;
}

.p-g-mod.p-g-mod-t-39 .p-g-mod-body input {
    padding: 0.275rem 0.7rem !important;
    height: 35px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 3px;
}

.p-g-mod.p-g-mod-t-39 .p-g-mod-body .btn-secondary {
    font-size: 13px;
    font-weight: 500;
    background: #818181;
    border-color: #818181;
}

.product-carousel-desktop.normal .carousel-item a img {
    width: 100%;
}

@media(max-width: 991px){
    .ppc-ctype-2 .row:first-of-type,
    .ppc-ctype-3 .row:first-of-type {
        flex-direction: column-reverse;
    }
}

.category-short-description {
    font-size: 15px;
} 

@media(max-width: 991px){
    .category-short-description {
        font-size: 13px;
    } 
}

/* >>>>>>>>>>  SARTORIA KATMANI - BASLANGIC  <<<<<<<<<<
   Bu satirin ALTINDAKI her sey Sartoria katmanidir.
   Yukarisi temanin kendi CSS'i - DOKUNMAYIN.
   Guncellemede: bu satirdan SON satirina kadar olan bolumu
   secip silin, yenisini ayni yere yapistirin.
   >>>>>>>>>>                                    <<<<<<<<<< */

/* ==========================================================================
   SARTORIA STORE — ürün kartı katmanı
   --------------------------------------------------------------------------
   Panelin CSS Editörü'ne yapıştırılmak üzere. Tema dosyalarına DOKUNMAZ,
   aktif temanın stillerinden sonra yüklenir; boşaltıldığında site eski
   hâline döner.

   Renk ve ölçüler tahmin değil: NetWork'ün yayınlanan CSS'inden ölçülen
   değerler referans alındı (metin #333, yüzey #fafafa, çizgi #eaeaea,
   ikincil #848484, harf aralığı 0.02–0.05em).
   Kod, görsel veya marka ögesi kopyalanmadı.
   ========================================================================== */

/* DM Sans — @import YERINE gomulu @font-face.
   Sebep: @import yalnizca stil dosyasinin EN BASINDA gecerlidir. Bu katman
   temanin 3416 satirlik CSS'inin SONUNA eklendigi icin @import yok sayilirdi.
   @font-face ise dosyanin herhangi bir yerinde calisir.
   latin-ext alt kumesi dahil — Turkce g s i harfleri icin gerekli. */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Hp2ywxg089UriCZ2IHSeH.woff2) format('woff2'); 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: 'DM Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Hp2ywxg089UriCZOIHQ.woff2) format('woff2'); 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: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Hp2ywxg089UriCZ2IHSeH.woff2) format('woff2'); 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: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Hp2ywxg089UriCZOIHQ.woff2) format('woff2'); 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: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Hp2ywxg089UriCZ2IHSeH.woff2) format('woff2'); 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: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Hp2ywxg089UriCZOIHQ.woff2) format('woff2'); 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; }

:root {
	--sk-ink:      #333333;   /* ana metin */
	--sk-ink-2:    #848484;   /* ikincil metin, ürün adı */
	--sk-ink-3:    #c1c1c1;   /* üstü çizili fiyat */
	--sk-line:     #eaeaea;   /* saç teli çizgi */
	--sk-tile:     #fafafa;   /* ürün görseli zemini */
	--sk-tile-2:   #f4f4f4;   /* hover */

	/* Yumuşatılmış rozet renkleri — temanın #f6000d kırmızısı ve #009688
	   turkuazı yerine. İkisi de beyaz yazıyla 5.3:1 kontrast verir,
	   yani sakin ama okunaklı. */
	--sk-indirim:  #8f5f58;   /* soluk kiremit */
	--sk-kargo:    #5f7060;   /* soluk adaçayı */

	--sk-font:     'DM Sans', -apple-system, 'Segoe UI', sans-serif;

	/* Header'in iki satiri (12. ve 11. bolumde belirlendi):
	     ust satir  = logo + arama + ikonlar   -> 80px
	     menu satiri = NEW SEASON, GIYIM ...   -> 44px
	   Arama paneli UST SATIRIN hemen altindan basliyor ve menu satirini
	   kapatiyor; bu yuzden olcu tek yerde tanimli. */
	--sk-ust-satir: 80px;
}

/* --------------------------------------------------------------------------
   1. Satır başına 3 ürün
   Ana sayfadaki sabit ızgara col-lg-3 (4'lü). Kategori sayfaları zaten
   col-lg-4 (3'lü), vitrin slider'ları ise col-12 — ikisi de bu seçicinin
   dışında kalır, dokunulmaz.
   .col-lg-3.col-list-p-v-1 = (0,2,0), Bootstrap'in .col-lg-3'ünü (0,1,0) yener.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
	.col-lg-3.col-list-p-v-1 {
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
}

/* --------------------------------------------------------------------------
   2. Kart kabuğu — gölge, çerçeve, yuvarlaklık temizliği
   -------------------------------------------------------------------------- */
.card-product,
.card-product .card-product-inner {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   3. Görsel karosu
   Ürün fotoğrafları beyaz fonlu stüdyo çekimi olduğu için multiply ile
   karoya karışıyor; aksi hâlde görselin beyaz kutusu karonun üstünde durur.
   -------------------------------------------------------------------------- */
.card-product .image-wrapper {
	position: relative;
	background: var(--sk-tile);
	border-radius: 0;
	overflow: hidden;
	transition: background 260ms ease-out;
}
.card-product:hover .image-wrapper { background: var(--sk-tile-2); }

/* Yakinlastirma YOK. Onceki surumde hover'da scale(1.035) vardi; istek
   uzerine kaldirildi. Boyut degismeyince gorsel degistirme de daha kararli
   calisiyor: tarayici her karede yeniden olcek hesaplamiyor. */
.card-product .image img {
	mix-blend-mode: multiply;
	/* Acikca sifirlaniyor: baska bir kural gecis veya donusum sizdirmasin.
	   Gorsel boyutu sabit kalinca kaydirma da kararli calisiyor. */
	transform: none;
	transition: none;
}

/* --------------------------------------------------------------------------
   4. Rozetler
   KARGO BEDAVA tamamen kaldırıldı, indirim rozeti fiyat satırına döndü.

   ÖNCEKİ SÜRÜMDEKİ HATA: kargoyu kaldıran kural yorum işaretinin İÇİNDE
   kalmıştı, o yüzden hiç uygulanmadı ve yazı sitede görünmeye devam etti.
   Burada gerçek kural olarak yazılıyor.

   ÖZGÜLLÜK NOTU — temanın kendi kuralları şu derinlikte:
     .card-product .card-product-inner .price-group .discount   (0,4,0)
     .card-product .card-product-inner .free-cargo-badge        (0,3,0)
   Daha sığ yazılırsa kural hiç uygulanmaz.
   -------------------------------------------------------------------------- */

/* KARGO BEDAVA yazısı kalkıyor. Sitede 35 kartın 35'inde basılıyordu. */
.card-product .card-product-inner .free-cargo-badge {
	display: none;
}

/* NetWork'ün indirim rozeti güçlü kırmızı. Yukarıdaki --sk-indirim (soluk
   kiremit) rozet GÖRSELİN üstünde dururken doğruydu; artık fiyat satırında
   küçük bir çip olduğu için NetWork tonuna dönüyoruz.
   Daha sakin isterseniz aşağıdaki rengi #8f5f58 yapmanız yeterli. */
:root {
	--sk-indirim: #c0362a;
}

/* İNDİRİM ROZETİ — görselin üstünden fiyat satırına taşındı.
   Sitenin kendi HTML sırası zaten NetWork düzeninde:
     .price-group > .discount + .prices > .list-price + .sale-price
   Yani "%30 | üstü çizili | güncel fiyat" dizilimi DOM'da hazır duruyor.
   Önceki katman .discount'u position:absolute ile görsele taşıdığı için bu
   düzen bozulmuştu; absolute burada geri alınıyor. */
.card-product .card-product-inner .price-group .discount {
	position: static;
	top: auto;
	left: auto;
	z-index: auto;
	flex: 0 0 auto;
	width: auto;
	height: auto;
	margin: 0;
	padding: 3px 5px;
	border-radius: 2px;
	background: var(--sk-indirim);
	color: #fff;
	font-family: var(--sk-font);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.1;
	text-align: center;
	box-shadow: none;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. Favori kalbi — sağ üst, sade
   -------------------------------------------------------------------------- */
.card-product .product-favourite-kart {
	top: 10px;
	right: 10px;
	z-index: 4;
}
.card-product .product-favourite-kart a {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--sk-ink);
}
.card-product .product-favourite-kart a { font-size: 15px; }
.card-product .product-favourite-kart i { font-size: 15px; font-weight: 300; }

/* --------------------------------------------------------------------------
   6. Hover butonları — TAMAMEN KALDIRILDI
   Görselin altında beliren üç buton (büyüteç = hızlı bakış, dürbün = ürüne
   git, sepet = sepete ekle) artık gösterilmiyor. Kartın tamamı zaten ürün
   sayfasına giden bir bağlantı; butonlar hem görseli kapatıyor hem de
   kararı bölüyordu.

   ÖZGÜLLÜK NOTU — temanın kuralı (0,3,0) derinliğinde:
     .card-product .buttons-wrapper.right-to-left
   Buradaki (0,4,0) onu net biçimde yener.
   -------------------------------------------------------------------------- */
.card-product .card-product-inner .image-wrapper .buttons-wrapper {
	display: none;
}


/* --------------------------------------------------------------------------
   7. Hover'da görsel değiştirme — ARTIK JS YAPIYOR
   Platform her karta yalnızca İKİ görsel basıyor ve img etiketine satır içi
   onmouseover / onmouseout yazıyor; fare girince ikinciye, çıkınca birinciye
   dönüyordu. Yani üründe altı fotoğraf olsa da kartta yalnızca ikisi
   görülebiliyordu.

   Yeni davranış (bkz. scripts.js): karta ilk gelindiğinde ürün sayfasındaki
   Product şemasından o ürünün TÜM görselleri okunuyor ve fareyi kart
   üzerinde yatay gezdirdikçe görsel değişiyor.

   KARARLILIK NOTU — önceki sürümde görsel değişirken kısa bir opaklık
   geçişi vardı (opacity 0.55). Fare hızlı hareket ettiğinde bu geçiş
   sürekli yeniden başlıyor ve takılma gibi görünüyordu. Kaldırıldı:
   değişim artık anlık. Görseller önceden yüklenip çözüldüğü için
   ani geçiş göze batmıyor.

   Görsele hiçbir transition veya transform verilmiyor; tarayıcı her
   karede yeniden ölçek/opaklık hesaplamak zorunda kalmıyor.
   -------------------------------------------------------------------------- */

/* Kaç görsel olduğunu ve hangisinde olduğunuzu gösteren küçük çizgiler.
   NetWork'te de var; kullanıcı kaydırabileceğini böyle anlıyor. */
.sk-noktalar {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 4px;
	z-index: 5;
	opacity: 0;
	transition: opacity 200ms ease-out;
	pointer-events: none;
}
.card-product:hover .sk-noktalar { opacity: 1; }
.sk-noktalar span {
	width: 16px;
	height: 2px;
	background: rgba(51, 51, 51, 0.22);
	transition: background 160ms ease-out;
}
.sk-noktalar span.aktif { background: var(--sk-ink); }
@media (max-width: 600px) {
	/* Dokunmatik ekranda yatay gezinme yok; çizgileri de göstermiyoruz. */
	.sk-noktalar { display: none; }
}


/* --------------------------------------------------------------------------
   8. Metin bölgesi — başlık ile fiyat arasındaki boşluk kapatıldı
   ÖLÇÜLEN DURUM: başlık kutusu 36px yüksekliğe SABİTLENMİŞTİ (iki satır
   yer ayırıyor) ama başlıkların 35'te 33'ü tek satır, yani 17px. Aradaki
   19px boşuna duruyordu. Alt boşluk 5px daha ekliyordu.

   ÖZGÜLLÜK NOTU — ÖNEMLİ: platformun kuralı
     .card-product .card-product-inner .title   (0,3,0)
   Önceki sürümde buraya .card-product .title (0,2,0) yazılmıştı ve
   platformun height/margin değerlerini YENEMİYORDU. Bu yüzden verilen
   margin-top hiç uygulanmadı. Artık aynı derinlikte yazılıyor.

   Uzun başlıklar iki satıra taşımaya devam ediyor (satır kırpma korundu);
   o iki kartta fiyat, komşularından bir satır aşağıda kalır. Hizanın
   kusursuz olması daha önemliyse -webkit-line-clamp değerini 1 yapın,
   uzun adlar üç nokta ile kesilir.
   -------------------------------------------------------------------------- */
.card-product .card-product-inner .title {
	height: auto;          /* 36px idi */
	min-height: 0;
	margin: 10px 0 0;      /* 5px 0 idi — alttaki boşluk kalktı */
	font-family: var(--sk-font);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0.01em;
	color: var(--sk-ink-2);
	text-transform: none;
}
.card-product .card-product-inner .title { transition: color 200ms ease-out; }
.card-product:hover .card-product-inner .title { color: var(--sk-ink); }

/* Başlık ile fiyat arasındaki boş div. Yüksekliği zaten 0 ama
   ileride içerik basılırsa araya girmesin diye kapatıldı. */
.card-product .card-product-inner .card-product-content {
	display: none;
}


/* --------------------------------------------------------------------------
   9. Fiyat — NetWork düzeni
   Tek satır: [%30]  7.999,00 TL (üstü çizili)  5.599,00 TL (koyu, kalın)
   İndirim yoksa .discount ve .list-price HTML'de hiç basılmıyor, o yüzden
   boş yer ayrılmıyor; satır kendiliğinden tek fiyata düşüyor.

   ÖZGÜLLÜK NOTU — temanın fiyat kuralları (0,5,0) derinliğinde:
     .card-product .card-product-inner .price-group .prices .list-price
     .card-product .card-product-inner .price-group .prices .sale-price
   Daha sığ yazılırsa liste fiyatı #555 kalır, satış fiyatı 16px kalır.
   -------------------------------------------------------------------------- */

/* Rozet ve fiyatlar aynı hizada — NetWork'te rozet fiyatların solunda.
   ÖLÇÜLEN DURUM: platform bu satıra height:50px veriyor ve içeriği dikey
   ortalıyordu; fiyat metninin üstünde ~16px boşluk kalıyordu. Yükseklik
   serbest bırakıldı, satır içeriği kadar yer kaplıyor. */
.card-product .card-product-inner .price-group {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
	height: auto;          /* 50px idi */
	min-height: 0;
	margin-top: 4px;       /* 6px idi */
	font-family: var(--sk-font);
}

.card-product .card-product-inner .price-group .prices {
	display: flex;
	align-items: baseline;
	gap: 7px;
	flex-wrap: wrap;
}

/* Eski fiyat: küçük, silik, üstü çizili. */
.card-product .card-product-inner .price-group .prices .list-price {
	order: 1;
	font-size: 12px;
	font-weight: 400;
	color: var(--sk-ink-3);
	text-decoration: line-through;
}

/* Güncel fiyat: bir punto büyük ve koyu — vurgu burada.
   NetWork indirimli fiyatı kırmızı yapmıyor, koyu bırakıyor; vurguyu
   soldaki rozet taşıyor. */
.card-product .card-product-inner .price-group .prices .sale-price {
	order: 2;
	font-size: 15px;
	font-weight: 600;
	color: var(--sk-ink);
	letter-spacing: 0.01em;
	line-height: normal;
}

/* --------------------------------------------------------------------------
   11. Menü çubuğu — NetWork ölçüleri
   Ölçülen değerler: yükseklik 43px, öğe aralığı 35+35, yazı 14px /
   letter-spacing .7px / BÜYÜK HARF, hover'da altta 2px koyu çizgi (.25s),
   ve bir öğenin üstündeyken diğerlerinin %50'ye solması.

   ÖZGÜLLÜK NOTU — temanın kuralları (0,3,1) derinliğinde:
     header.desktop .mega-menu .navbar-nav { height: 70px }
     header.desktop .mega-menu .nav-item   { flex: 1 }        <- 151px'i yapan
   Buradaki seçiciler etiket adı eklenerek (0,3,2) yapıldı; eleman sütunu
   fazla olduğu için tema kurallarını net biçimde yener.
   -------------------------------------------------------------------------- */
header.desktop .mega-menu ul.navbar-nav {
	height: 44px;              /* 70px idi */
	justify-content: center;   /* öğeler ortada toplansın */
	align-items: stretch;
}

/* flex:1 kaldırılıyor -> öğeler 151px'lik sabit dilimler yerine
   içerik genişliğinde duruyor, aradaki boşluğu margin belirliyor. */
header.desktop .mega-menu li.nav-item {
	flex: 0 0 auto;
	margin: 0 22px;
	transition: opacity 250ms ease-out;
}

header.desktop .mega-menu a.nav-link {
	position: relative;
	display: flex;
	align-items: center;
	height: 44px;
	margin-top: 0;
	padding: 0;
	font-family: var(--sk-font);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--sk-ink);
}

/* Alt çizgi — NetWork'teki gibi opaklıkla beliriyor, kaymıyor. */
header.desktop .mega-menu a.nav-link::after {
	content: "";
	/* KRITIK: baglantinin sinifi "nav-link dropdown-toggle". Bootstrap'in
	   acilir menu okunu gizlemek icin tema ::after'a display:none yaziyor.
	   Ayni sozde ogeyi kullandigimiz icin display ACIKCA geri verilmeli;
	   yoksa cizgi opacity:1 olsa bile hic boyanmaz. */
	display: block;
	/* Bootstrap'in ok isareti border ile cizilir; sifirlanmazsa 2px yerine
	   3px kalinliginda bir cizgi olusuyor. */
	border: 0;
	box-sizing: border-box;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--sk-ink);
	opacity: 0;
	transition: opacity 250ms ease-out;
}
header.desktop .mega-menu li.nav-item:hover a.nav-link::after {
	opacity: 1;
}

/* Temanın hover rengi --menu-color-hover (#737373) idi; NetWork yazıyı
   koyu bırakıp vurguyu çizgiye veriyor. */
header.desktop .mega-menu li.nav-item:hover a.nav-link {
	color: var(--sk-ink);
}

/* Bir öğenin üstündeyken diğerleri soluyor — NetWork bunu JS ile eklediği
   bir sınıfla yapıyor; burada saf CSS ile aynı sonuç alınıyor. */
header.desktop .mega-menu ul.navbar-nav:hover li.nav-item:not(:hover) {
	opacity: 0.5;
}

/* Menü çubuğunun KABI da 70px'e sabitlenmiş. Yalnızca listeyi kısaltmak
   yetmiyor; altta 26px boş şerit kalıyor. section.menu = (0,2,2), temanın
   .menu kuralını (0,2,1) yener. */
header.desktop section.menu {
	height: 44px;
}

/* --------------------------------------------------------------------------
   12. Header yüksekliği — logo satırı inceltiliyor
   ÖLÇÜLEN DURUM: header 164px = logo satırı 120px + menü çubuğu 44px.
   Menü çubuğunu 11. bölümde 70px'ten 44px'e indirmiştik; kalan yükseklik
   logo satırından geliyor ve 120px'i temanın şu kuralı veriyor:
     header.desktop .header-area { height: 120px }   (0,2,1)
   Logo da 80px'e sabitlenmiş:
     header.desktop .logo a img { max-height: 80px } (0,2,3)
   Aynı derinlikte yazıyoruz; katman sonra yüklendiği için eşit özgüllükte
   bizim kural kazanır.
   YENİ TOPLAM: 80 + 44 = 124px (164px'ten %24 daha ince).
   -------------------------------------------------------------------------- */
header.desktop .header-area {
	height: 80px;              /* 120px idi */
}

header.desktop .logo a img {
	max-height: 54px;          /* 80px idi — genişlik 249px'ten 168px'e iner */
}


/* --------------------------------------------------------------------------
   13. Sağ menü — klasik ikon dizilimi
   Yazılar kalkıyor, yalnızca ikonlar kalıyor. Sıra da NetWork'teki gibi
   kişi > kalp > sepet olarak değişiyor.
   .header-bar zaten flex olduğu için "order" ile HTML'e dokunmadan
   sıralama değiştirilebiliyor. Çocuklar şunlar:
     a.bar-link.bar-favorite | div.bar-link.bar-user | div.header-cart-hover
   -------------------------------------------------------------------------- */
header.desktop .header-bar {
	gap: 18px;
}

/* Favorilerim / Giriş Yap / Üye Ol / Sepetim yazıları kalkıyor. */
header.desktop .header-bar .bar-link .name {
	display: none;
}

/* Temada her öge "flex: 1 1 0%" ile eşit paya yayılıyordu. Yazılar varken
   doğruydu; yazılar gidince 23px'lik ikonlar 82px'lik boş kutuların
   ortasında kalıyor ve aralarında gereksiz açıklık oluşuyordu.
   İçerik genişliğine çekiyoruz, aralığı yukarıdaki gap belirliyor. */
header.desktop .header-bar .bar-link,
header.desktop .header-bar .header-cart-hover {
	flex: 0 0 auto;
}
header.desktop .header-bar .bar-link .icon {
	width: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Yeni sıra: kişi, kalp, sepet. */
header.desktop .header-bar .bar-user        { order: 1; }
header.desktop .header-bar .bar-favorite    { order: 2; }
header.desktop .header-bar .header-cart-hover { order: 3; }

header.desktop .header-bar .bar-link .icon i {
	font-size: 20px;           /* 23px idi — yazı gidince ikon öne çıkıyor */
	font-weight: 300;
	color: var(--sk-ink);
	transition: opacity 200ms ease-out;
}
header.desktop .header-bar .bar-link:hover .icon i {
	opacity: 0.6;
}

/* DİKKAT: "Giriş Yap / Üye Ol" bağlantıları .bar-user > .link içinde duruyor.
   Yazıları gizlerken bu kabı da gizlersek kişi ikonu tıklanamaz hâle gelir —
   çünkü .bar-user bir <div>, tek tıklanabilir öge içindeki <a>'lar.
   Bu yüzden .link gizlenmiyor, ikonun altına açılan küçük bir panele
   dönüştürülüyor. İşlev korunuyor, görünüm sadeleşiyor. */
header.desktop .header-bar .bar-user {
	position: relative;
	cursor: pointer;
}
header.desktop .header-bar .bar-user .link {
	position: absolute;
	top: 100%;
	right: -10px;
	display: block;
	min-width: 132px;
	padding: 5px 0;
	background: #fff;
	border: 1px solid var(--sk-line);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.07);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 220ms ease-out, transform 220ms ease-out, visibility 220ms;
	z-index: 40;
}
header.desktop .header-bar .bar-user:hover .link {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
/* Panelin İÇİNDEKİ yazılar görünmeli. Üstteki .name gizleme kuralı (0,3,1);
   bu (0,4,1) olduğu için onu yener. */
header.desktop .header-bar .bar-user .link .name {
	display: block;
}
header.desktop .header-bar .bar-user .link a {
	display: block;
	padding: 8px 14px;
	font-family: var(--sk-font);
	font-size: 13px;
	color: var(--sk-ink);
	white-space: nowrap;
	transition: background 180ms ease-out;
}
header.desktop .header-bar .bar-user .link a:hover {
	background: var(--sk-tile);
}

/* Sepet sayacı — temanın kırmızısı (219,37,52) yerine sakin koyu daire. */
header.desktop .header-bar .bar-cart .icon .count {
	background: var(--sk-ink);
	color: #fff;
	font-family: var(--sk-font);
	font-size: 9px;
	font-weight: 500;
	width: 15px;
	height: 15px;
	line-height: 15px;
}


/* --------------------------------------------------------------------------
   14. Dropdown menüler — navbara yapışık, üstten aşağı kayan animasyon
   İKİ SORUN VARDI:
   1) Temanın kuralı top:66px veriyordu. Menü çubuğunu 44px'e indirdiğimiz
      için menü ile açılan panel arasında 22px boşluk kalıyordu. top:100%
      ile panel her zaman çubuğun tam altına oturuyor — konum referansı
      .mega-menu.side (position:relative, 44px).
   2) Tema açılışı display:none -> display:block ile yapıyor. display
      ÖZELLİĞİ ANİMASYONA GİRMEZ; o yüzden hiçbir geçiş görünmüyordu.
      Çözüm: panel her zaman display:block kalıyor, gizleme işini
      opacity + visibility + transform yapıyor. position:absolute olduğu
      için sürekli block olması sayfa akışını etkilemiyor.
      Hiçbir atada overflow:hidden yok, yani kayan panel kırpılmıyor.

   ÖZGÜLLÜK NOTU — tema (0,3,2) derinliğinde yazıyor:
     header.desktop .mega-menu .dropdown:hover .dropdown-menu
   -------------------------------------------------------------------------- */
header.desktop .mega-menu .dropdown .dropdown-menu {
	display: block;
	top: 100%;                 /* 66px idi — artık çubuğa yapışık */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-12px);
	transition: opacity 260ms ease-out,
	            transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
	            visibility 260ms;
	pointer-events: none;
	border-top: 1px solid var(--sk-line);
}

header.desktop .mega-menu .dropdown:hover .dropdown-menu,
header.desktop .mega-menu .dropdown .dropdown-menu:hover {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

/* Alt kategori bağlantıları — hover'da hafif sağa kayıyor. */
header.desktop .mega-menu .dropdown-menu .sub-cat a.sub-title {
	font-family: var(--sk-font);
	font-size: 13px;
	color: var(--sk-ink-2);
	transition: color 180ms ease-out, padding-left 180ms ease-out;
}
header.desktop .mega-menu .dropdown-menu .sub-cat a.sub-title:hover {
	color: var(--sk-ink);
	padding-left: 4px;
}


/* --------------------------------------------------------------------------
   15. Arama paneli
   Arama kutusuna basınca tam genişlikte tek bir panel açılıyor ve arama
   boyunca AÇIK KALIYOR:
     kutu boşken        -> Öne çıkan ürünler + Kategoriler
     yazmaya başlayınca -> Arama sonuçları (aynı panelde, görselli karolar)
     kutu boşalınca     -> baştaki görünüme döner

   İçerik SABİT LİSTE DEĞİL. Kategoriler navbardaki gerçek menüden,
   öne çıkan ürünler sayfadaki gerçek ürün kartlarından, arama sonuçları
   platformun kendi arama servisinden geliyor (bkz. scripts.js).
   Yönetim panelinden ürün veya kategori eklediğinizde burada da
   kendiliğinden görünür, CSS'e dokunmak gerekmez.

   Panel header.desktop'un içine ekleniyor, o yüzden header'a position
   veriliyor. Kayma animasyonu 14. bölümdekiyle aynı dille yazıldı ki
   dropdown ile aynı karakterde açılsın.
   -------------------------------------------------------------------------- */
header.desktop {
	position: relative;
	z-index: 50;
}

/* Karartma perdesi */
.sk-ap-fon {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.38);
	opacity: 0;
	visibility: hidden;
	transition: opacity 240ms ease-out, visibility 240ms;
	z-index: 45;
}
.sk-ap-fon.acik {
	opacity: 1;
	visibility: visible;
}

/* Panel */
.sk-ap {
	position: absolute;
	top: var(--sk-ust-satir);
	left: 0;
	right: 0;
	background: #fff;
	border-top: 1px solid var(--sk-line);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.09);
	font-family: var(--sk-font);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-14px);
	transition: opacity 280ms ease-out,
	            transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
	            visibility 280ms;
	z-index: 55;
	/* Panel artik header'in TAMAMININ altindan degil, UST SATIRIN altindan
	   basliyor (top: 100% -> 80px). Boylece menu satirini kapatiyor ve
	   panel acikken NEW SEASON / GIYIM / WEDDING gibi ogeler gorunmuyor.
	   Kazanilan 44px de urun karolarina gidiyor.
	   Icerik uzunsa panel kendi icinde kayiyor, sayfa itilmiyor. */
	max-height: calc(100vh - var(--sk-ust-satir));
	overflow-y: auto;
	overscroll-behavior: contain;
}
.sk-ap.acik {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sk-ap-ic {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	padding: 24px 20px 30px;
}

.sk-ap-kapat {
	position: absolute;
	top: 18px;
	right: 16px;
	padding: 0 2px;
	background: none;
	border: 0;
	font-size: 24px;
	line-height: 1;
	color: var(--sk-ink-3);
	cursor: pointer;
	transition: color 180ms ease-out;
	z-index: 2;
}
.sk-ap-kapat:hover {
	color: var(--sk-ink);
}

/* Bölümler duruma göre gizleniyor (yazarken kategoriler kapanıyor,
   sonuçlar açılıyor). Ayırıcı çizgi yalnızca GÖRÜNEN iki bölüm arasına
   konuyor; yoksa gizli bir bölümün ardından boşta kalan çizgi görünüyor. */
.sk-ap [hidden] {
	display: none;
}
.sk-ap-bolum:not([hidden]) + .sk-ap-bolum:not([hidden]) {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--sk-line);
}

/* Arama durumu: "Aranıyor…" / "sonuç bulunamadı" */
.sk-ap-durum {
	padding: 4px 0 2px;
	font-size: 13px;
	color: var(--sk-ink-2);
}

/* "… için tüm sonuçları gör" — arama sayfasına götürür */
.sk-ap-tum {
	display: inline-block;
	margin-top: 16px;
	padding-bottom: 2px;
	border-bottom: 1px solid var(--sk-line);
	font-size: 13px;
	color: var(--sk-ink);
	text-decoration: none;
	transition: border-color 180ms ease-out;
}
.sk-ap-tum:hover {
	color: var(--sk-ink);
	border-bottom-color: var(--sk-ink);
}
.sk-ap-baslik {
	margin-bottom: 14px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sk-ink-2);
}

/* --- Öne çıkan ürünler — görselli karolar ---
   Ürünler sayfadaki gerçek kartlardan okunuyor (bkz. scripts.js).
   Görsel oranı 4:5, sitedeki ürün fotoğraflarının oranıyla aynı
   (2000x2500), böylece kırpma olmuyor. */
.sk-ap-serit {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 18px;
}
.sk-ap-urun {
	display: block;
	text-decoration: none;
	color: inherit;
}
.sk-ap-urun-gorsel {
	display: block;
	position: relative;
	overflow: hidden;
	background: var(--sk-tile);
	aspect-ratio: 4 / 5;
	margin-bottom: 8px;
}
/* aspect-ratio desteklemeyen eski tarayıcılar için yedek yükseklik */
@supports not (aspect-ratio: 4 / 5) {
	.sk-ap-urun-gorsel { height: 210px; }
}
.sk-ap-urun-gorsel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	mix-blend-mode: multiply;
	/* Yakinlastirma yok — kart gorsellerinde oldugu gibi burada da
	   istenmedi. Karo uzerine gelindiginde yalnizca urun adi koyulasiyor. */
}
/* İki satırda kesiliyor — karoların yükseklikleri eşit kalsın. */
.sk-ap-urun-ad {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 12px;
	line-height: 1.45;
	color: var(--sk-ink-2);
	transition: color 180ms ease-out;
}
.sk-ap-urun:hover .sk-ap-urun-ad {
	color: var(--sk-ink);
}
.sk-ap-urun-fiyat {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sk-ink);
}

/* Kategori izgarasi kaldirildi — panelde artik yalnizca urunler var. */


/* Kademeli giriş — ürün karoları sırayla beliriyor. "Hafif animasyon" bu.
   Panel kapanırken gecikmeler devreye girmiyor, hepsi birlikte sönüyor. */
.sk-ap .sk-ap-urun {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 300ms ease-out, transform 300ms ease-out;
}
.sk-ap.acik .sk-ap-urun {
	opacity: 1;
	transform: translateY(0);
}
.sk-ap.acik .sk-ap-urun:nth-child(1) { transition-delay: 40ms; }
.sk-ap.acik .sk-ap-urun:nth-child(2) { transition-delay: 75ms; }
.sk-ap.acik .sk-ap-urun:nth-child(3) { transition-delay: 110ms; }
.sk-ap.acik .sk-ap-urun:nth-child(4) { transition-delay: 145ms; }
.sk-ap.acik .sk-ap-urun:nth-child(5) { transition-delay: 180ms; }
.sk-ap.acik .sk-ap-urun:nth-child(6) { transition-delay: 215ms; }

/* --------------------------------------------------------------------------
   Panel açıkken menü satırı görünmüyor.
   Panel zaten opak beyaz ve menü satırının üstüne biniyor; ama geçiş
   animasyonu sırasında yazılar altından sızmasın diye menü satırını ayrıca
   söndürüyoruz. Yükseklik korunuyor (opacity/visibility), o yüzden header
   daralmıyor ve sayfa zıplamıyor.
   visibility:hidden aynı zamanda fareyi de kesiyor: panel açıkken bir menü
   öğesinin açılır kutusu panelin üstüne çıkamıyor.
   Özgüllük: bizim yükseklik kuralı header.desktop section.menu (0,2,2);
   buradaki (0,3,2) olduğu için onu net yener.
   -------------------------------------------------------------------------- */
header.desktop section.menu {
	transition: opacity 220ms ease-out, visibility 220ms;
}
header.desktop.sk-panel-acik section.menu {
	opacity: 0;
	visibility: hidden;
}

/* Arama kutusu panelin üstünde kalsın ki tıklanabilir olsun. */
header.desktop .header-area.center .search {
	position: relative;
	z-index: 56;
}

/* Panel açıkken kutunun altındaki çizgi koyulaşıyor — odak belli olsun. */
header.desktop .header-area.center .search.sk-odak .input-box {
	border-bottom-color: var(--sk-ink);
}

@media (max-width: 1199px) {
	.sk-ap-serit {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}


/* --------------------------------------------------------------------------
   16. Platformun küçük öneri kutusu — DEVRE DIŞI
   Yazarken sonuçlar artık büyük panelin İÇİNDE listeleniyor (bkz. 15.
   bölüm ve scripts.js). Platformun kendi küçük açılır listesi de aynı anda
   çıkarsa iki liste üst üste biner.

   Kutu EasyAutocomplete 1.3.5 ile geliyor ve eklenti listeyi SATIR İÇİ
   display ile açıp kapatıyor. Satır içi stil normal kuralla ezilemediği
   için burada !important zorunlu — katmandaki iki !important'tan biri.

   NOT: seçici yalnızca header.desktop altında. Mobil başlıktaki arama
   (data-smart-mobile-product-search) kendi öneri kutusunu kullanmaya
   devam ediyor, ona dokunulmuyor.

   Eklentinin sarmalayıcısı yine de düzeltiliyor: başlatılırken
     if (adjustWidth === true) { t.parent().css('width', t.outerWidth()) }
   satırı formun o anki genişliğini SATIR İÇİ yazıyor ve bir daha
   güncellemiyor. Bu yüzden arama kutusu daralıyordu; %100'e sabitliyoruz.
   -------------------------------------------------------------------------- */
header.desktop .header-area.center .search .easy-autocomplete {
	width: 100% !important;    /* eklentinin satır içi genişliğini iptal eder */
	position: static;
}

header.desktop .header-area.center .search .easy-autocomplete-container {
	display: none !important;  /* küçük liste kapatıldı */
}

/* >>>>>>>>>>  SARTORIA KATMANI - SON  <<<<<<<<<< */

/* =============================================================
   SARTORIA STORE — ÜRÜN DETAY SAYFASI, SOFT & PROFESYONEL GÖRÜNÜM
   =============================================================
   Kapsam: yalnızca ürün detay sayfası ("body.product-body").
   Kategori, anasayfa, sepet gibi diğer sayfalara sızmaz.

   KURAL: hiçbir HTML öğesi silinmiyor / kaldırılmıyor. Sepete Ekle,
   Hemen Al, WhatsApp, Favorilerime Ekle, Tavsiye Et, Karşılaştır,
   Fiyat Alarmı, Telefonla Sipariş, Ürün Önerileri — hepsi olduğu
   gibi duruyor, işlevleri aynı. Yalnızca GÖRSEL ağırlıkları ve
   (bir kısmında) ekrandaki SIRALARI değişiyor (silme değil,
   flex "order" ile yeniden dizme).

   Mira teması kendi kurallarını yüksek derinlikte (uzun sınıf
   zincirleriyle) yazıyor. Bu yüzden aşağıdaki her kural en az
   Mira'nınki kadar derin / spesifik yazıldı — daha sığ yazılırsa
   hiçbir etkisi olmuyor, önceki turda da bu yüzden dikkat edildi.
   ============================================================= */


/* Başlık için serif yazı tipi — sartoria.com.tr ile marka bütünlüğü.
   Tanıtım sitesi Cormorant Garamond kullanıyor; mağazada da başlıkta
   aynı yazı tipini kullanınca iki site aynı markanın parçası gibi
   okunuyor. Gövde metni Roboto kalıyor (okunurluk için bilinçli). */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&display=swap");


/* -------------------------------------------------------------
   0.1) SAYFA DÜZENİ — görsel sütunu büyütüldü
   --------------------------------------------------------------
   Tema: sol (galeri) col-lg-5 = %41,7 · sağ (bilgi) col-lg-7 = %58,3
   Lüks giyimde görsel baskın olmalı; oranı ters çeviriyoruz.
   Yalnızca lg ve üstünde — tablet/mobilde zaten alt alta diziliyor,
   oraya dokunmuyoruz.
   ------------------------------------------------------------- */
@media (min-width: 992px) {
	body.product-body .product-profile-1 .row > .col-lg-5 {
		flex: 0 0 58.333% !important;
		max-width: 58.333% !important;
	}
	body.product-body .product-profile-1 .row > .col-lg-7 {
		flex: 0 0 41.667% !important;
		max-width: 41.667% !important;
		padding-left: 38px;
	}
}


/* -------------------------------------------------------------
   0.2) GALERİ — küçük görseller solda, dikey
   --------------------------------------------------------------
   Tema yapısı:  .carousel.ppc-ctype-1
                    ├─ .carousel-outer   (büyük görsel)
                    └─ ol.carousel-indicators  (küçük görseller, yatay)
   Küçükler ana görselin ALTINDA yatay bir şerit hâlindeydi; 15 görselli
   üründe alt alta taşıyordu. Sola dikey sütuna alınca sayfa toparlanıyor.
   ------------------------------------------------------------- */
@media (min-width: 992px) {
	body.product-body .carousel.ppc-ctype-1 {
		display: flex !important;
		flex-direction: row !important;
		gap: 14px;
		align-items: flex-start;
	}
	body.product-body .carousel.ppc-ctype-1 > .carousel-outer {
		order: 2;
		flex: 1 1 auto;
		min-width: 0;
		/* Yakınlaştırmada görselin kutu dışına taşmaması için. */
		overflow: hidden;
		background: #fafafa;
	}

	/* GÖRSEL YAKINLAŞTIRMA
	   Kumaş dokusu ve el işçiliği satan bir markada ürünü yakından
	   görebilmek satın alma kararının merkezinde. Üzerine gelince
	   görsel yavaşça büyüyor; fare hangi köşedeyse oraya doğru
	   kayıyor (transform-origin JS ile güncelleniyor).
	   Dokunmatik cihazlarda hover olmadığı için devreye girmiyor. */
	body.product-body .carousel-item img {
		transition: transform 600ms cubic-bezier(0.33, 1, 0.68, 1);
		will-change: transform;
	}
	body.product-body .carousel-outer:hover .carousel-item.active img {
		transform: scale(1.75);
	}
	/* KÜÇÜK GÖRSEL ŞERİDİ — 2 sütunlu ızgara, kaydırma YOK.
	   -------------------------------------------------------------
	   Önce tek sütun + dikey kaydırma denendi; 15 görselli üründe hem
	   çirkin durdu hem de bir hata ortaya çıktı: tema
	   ".carousel-indicators" öğesine "flex-wrap: wrap" veriyor.
	   flex-direction:column + wrap + sınırlı yükseklik birleşince
	   öğeler YAN SÜTUNLARA taşıyor, 74px'lik dar alanda üst üste
	   biniyordu (ölçüm: 15. öğenin altı 420px'te, yani 5. sütunda).

	   Çözüm: flex yerine GRID. 2 sütun, satır sayısı görsel adedine
	   göre kendiliğinden. 15 görsel = 8 satır ≈ 700px; ana görselin
	   yüksekliği 698px ölçüldü — ikisi neredeyse birebir hizalanıyor.
	   Az görselli üründe de doğal duruyor, boş yer kalmıyor. */
	body.product-body .carousel.ppc-ctype-1 > ol.carousel-indicators {
		order: 1;
		position: static !important;
		flex: 0 0 auto;
		/* align-self: stretch KULLANILMIYOR — kapsayıcının yüksekliğine
		   zorlanınca içerik sığmayıp yine kaydırma çıkıyordu (ölçüm:
		   şerit 500px, içerik 745px). Yükseklik içeriğe bırakıldı. */
		align-self: flex-start;
		display: grid !important;
		grid-template-columns: repeat(2, 60px);
		grid-auto-rows: min-content;
		gap: 6px;
		overflow: visible !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none;
	}
	body.product-body .carousel.ppc-ctype-1 > ol.carousel-indicators > li {
		width: 60px !important;
		height: auto !important;
		margin: 0 !important;
		border: 1px solid #ededed !important;
		border-radius: 2px;
		opacity: 0.72;
		text-indent: 0 !important;
		cursor: pointer;
		transition: opacity 200ms ease, border-color 200ms ease;
	}
	body.product-body .carousel.ppc-ctype-1 > ol.carousel-indicators > li:hover {
		opacity: 1;
	}
	body.product-body .carousel.ppc-ctype-1 > ol.carousel-indicators > li.active {
		opacity: 1;
		border-color: #a8a8a8 !important;
	}
	body.product-body .carousel.ppc-ctype-1 > ol.carousel-indicators > li img {
		display: block;
		width: 100%;
		height: auto;
	}
}


/* -------------------------------------------------------------
   0) GENEL — hafif yumuşatma (yuvarlatılmış köşe, yumuşak geçiş)
   Tema geneli köşeler keskin (border-radius: 0). Tamamen
   yuvarlatmak site kimliğini bozar; 4px gibi ÇOK HAFİF bir
   yuvarlama "soft" hissi veriyor ama sivri/keskin karakteri
   koruyor.
   ------------------------------------------------------------- */
body.product-body .btn.btn-cart.btn-color-1,
body.product-body .btn.btn-fast-buy.btn-color-2,
body.product-body a.btn.btn-wp,
body.product-body .variant-box .variant,
body.product-body .product-badges .p-badge,
body.product-body .customer-action .action .button {
	border-radius: 4px !important;
	transition: background-color 160ms ease, border-color 160ms ease,
		color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}


/* -------------------------------------------------------------
   0.5) MARKA ETİKETİ — başlığın üstünde "SARTORIA BESPOKE"
   --------------------------------------------------------------
   Network'te ürün adının üstünde küçük, gri, harf aralıklı bir marka
   satırı var ("NETWORK"). Bizde böyle bir öğe yok; ayrıca "Marka"
   bilgisi her üründe DOM'a basılmıyor (ölçüm: takım elbisede var,
   ayakkabıda yok). Mağazadaki tüm ürünler zaten tek marka olduğu için
   sabit metin CSS ile başlığın önüne ekleniyor — böylece ürün verisine
   bağlı kalmadan her sayfada çıkıyor.

   Not: ::before ile basılan metin ekran okuyucular tarafından
   okunabilir ama arama motoru içeriği sayılmaz; SEO değeri olan bir
   metin değil, yalnızca görsel bir imza.
   ------------------------------------------------------------- */
body.product-body .product-profile-1 h1.title::before {
	content: "SARTORIA BESPOKE";
	display: block;
	margin-bottom: 7px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	color: #a8a8a8;
}
/* Başlık — serif. sartoria.com.tr'nin başlık yazı tipiyle aynı
   (Cormorant Garamond). Serif harfler aynı piksel boyutunda daha
   küçük göründüğü için punto yükseltildi. */
body.product-body .product-profile-1 h1.title {
	font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
	font-size: 33px;
	font-weight: 500;
	color: #1c1c1c;
	line-height: 1.2;
	letter-spacing: -0.005em;
	margin-bottom: 16px;
}


/* -------------------------------------------------------------
   1) ÜST META BİLGİLER (Ürün Kodu / Barkod / Marka / Kategori / Stok)
   --------------------------------------------------------------
   Şu an sayfanın en üstünde, başlıktan hemen sonra, fiyattan bile
   önce tek tek satır satır duruyorlar — göz başlığa/fiyata değil
   önce bu teknik bilgilere gidiyor. Silmiyoruz: <ul> flex yapılıp
   "order" ile fiyatın ALTINA, tek satırlık soluk bir özet hâline
   getiriliyor.

   Sıra: 1) başlık  2) yıldız satırı  3) fiyat  4) taksit satırı
         10-14) Ürün Kodu…Stok (soluk, tek satır, en altta)
   ------------------------------------------------------------- */
/* SIRALAMA — sıra numarasına DEĞİL, JS'in eklediği sınıflara göre.
   Bu liste her üründe aynı sırada değil (takımda fiyat 8., ayakkabıda
   6. sırada; ayakkabıda Barkod/Marka satırı hiç yok). nth-child ile
   yazıldığında ayakkabıda fiyat gri meta satırına düşüyordu.
   .ss-* sınıfları sartoriastore-urun-detay-EKLE.js tarafından
   içeriğe bakılarak veriliyor. */
body.product-body ul.product-profile-info {
	display: flex !important;
	flex-direction: column !important;
}
body.product-body ul.product-profile-info > li.ss-aciklama {
	order: 1;
}
body.product-body ul.product-profile-info > li.ss-yildiz {
	order: 2;
}
body.product-body ul.product-profile-info > li.ss-fiyat {
	order: 3;
}
body.product-body div.product-rate,
body.product-body ul.product-profile-info > .ss-taksit {
	order: 4;
}

/* Kısa açıklama — koyu ve kalın geliyordu, başlıkla yarışıyordu. */
body.product-body ul.product-profile-info > li.ss-aciklama,
body.product-body .product-short-desc {
	font-size: 13.5px !important;
	font-weight: 400 !important;
	line-height: 1.65;
	color: #8a8a8a !important;
}
body.product-body .product-short-desc strong,
body.product-body .product-short-desc b {
	font-weight: 500 !important;
	color: #7a7a7a !important;
}

/* Ürün Kodu / Barkod / Marka / Kategori / Stok — hangisi varsa,
   tek satırlık soluk özet olarak en alta. */
body.product-body ul.product-profile-info > li.ss-meta {
	order: 10;
	display: inline;
	font-size: 12px;
	font-weight: 400;
	color: #9a9a9a;
	letter-spacing: 0.01em;
	margin: 0 14px 0 0;
	padding-top: 10px;
}
/* Grubun ilk satırı üstte ayraç çizgisi ve boşluk taşısın. */
body.product-body ul.product-profile-info > li.ss-meta:first-of-type {
	padding-top: 18px;
	margin-top: 6px;
	border-top: 1px solid #ededed;
}
body.product-body ul.product-profile-info > li.ss-meta strong,
body.product-body ul.product-profile-info > li.ss-meta .value {
	font-weight: 500;
	color: #7a7a7a;
}

/* YILDIZ SATIRI — hiç yorum yokken tamamen gizlenir.
   Ölçüm: 5 yıldızın hiçbirinde dolu/aktif sınıfı yok, yorum sayacı boş.
   Boş 5 yıldız göstermek "kimse almamış" izlenimi veriyordu.
   .ss-yorum-yok sınıfını JS ekliyor (dolu yıldız var mı diye bakarak);
   yorum geldiği anda sınıf eklenmiyor ve yıldızlar kendiliğinden
   görünür oluyor — elle müdahale gerekmiyor. */
body.product-body .product-reviews.ss-yorum-yok,
body.product-body li.ss-yildiz.ss-yorum-yok {
	display: none !important;
}
body.product-body .stars .star i {
	font-size: 12px;
}


/* -------------------------------------------------------------
   2) FİYAT BLOĞU
   --------------------------------------------------------------
   "KARGO BEDAVA" rozeti şu an fiyatın hemen yanına, aynı satıra
   yapışık — ikisi birbirinin ağırlığını yiyor. Rozeti ayrı, küçük,
   soluk bir etikete çeviriyoruz; fiyatın kendisi nefes alsın diye
   büyütüyoruz.
   ------------------------------------------------------------- */
body.product-body .product-price-group {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 6px;
}
/* Fiyat: temanin varsayilani 25px. Once 30px'e cikarilmisti ama fazla
   bagirdigi icin geri alindi — Network'te de fiyat basligi ezmiyor,
   sakin duruyor. 22px, kalinligi da hafifletildi. */
body.product-body .product-price-group .sale-price.sale-variant-price {
	font-size: 22px !important;
	font-weight: 500;
	color: #1c1c1c;
	letter-spacing: -0.01em;
}
/* "KARGO BEDAVA" rozeti gizlendi (istek üzerine). Öğe DOM'da duruyor,
   yalnızca görünmüyor — geri getirmek için bu bloğu silmek yeterli.
   Aynı bilgi zaten altbilgideki "Hızlı Teslimat" şeridinde de var. */
body.product-body .product-price-group .free-cargo-badge {
	display: none !important;
}
body.product-body div.product-rate {
	color: #8a8a8a;
	font-size: 13px;
	margin-top: 2px;
}


/* -------------------------------------------------------------
   3) BEDEN / NUMARA SEÇİMİ — Network düzeni
   --------------------------------------------------------------
   GERÇEK YAPI (canlıdan okundu):
     .variant-box > ul > li.variant
        ├─ .name > span          -> "Beden:" etiketi
        ├─ select.form-control   -> display:none (yedek, gizli)
        └─ .options > a          -> ASIL tıklanan kutular, seçili olanda .active

   DİKKAT: kutular ".variant" DEĞİL, ".options a". ".variant" dıştaki
   <li> — oraya yazılan kural kutulara hiç ulaşmıyor.

   Mevcut hâli: 37px genişlik, 5px 10px iç boşluk, koyu ve ince çerçeve —
   sıkışık duruyor. Network'te kutular geniş, ferah, açık gri çerçeveli
   ve seçili olan koyu çerçeveyle işaretli.

   NOT: Mağazada RENK varyantı olan ürün yok (30 ürün tarandı: yalnızca
   Beden / beden / Numara). Bu yüzden Network'teki yuvarlak renk
   daireleri için basılacak veri yok. Yine de ileride renk varyantı
   eklenirse diye kurallar varyant adına bağlı değil, genel yazıldı.
   ------------------------------------------------------------- */
body.product-body .variant-box ul li.variant {
	margin: 0 0 20px !important;
	list-style: none;
}
body.product-body .variant-box ul li.variant .name {
	margin-bottom: 10px;
}
body.product-body .variant-box ul li.variant .name span {
	font-size: 13px;
	font-weight: 400;
	color: #767676;
	letter-spacing: 0.01em;
}
body.product-body .variant-box ul li.variant .options {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px;
}
body.product-body .variant-box ul li.variant .options a {
	/* Sabit, olculu genislik. Onceki hâlde kutular satiri esit bolup
	   genisliyordu (flex:1) — 3 bedenli urunde 170px'e kadar sisiyor,
	   "52" gibi iki karakterlik bir deger icin fazla genis duruyordu.
	   Artik icerige gore duruyor, alt sinir 68px. */
	flex: 0 0 auto;
	min-width: 68px;
	width: auto !important;
	height: auto !important;
	padding: 14px 12px !important;
	margin: 0 !important;
	text-align: center;
	font-size: 14px;
	line-height: 1.2;
	/* Yazi rengi grilestirildi (once #1c1c1c). Kutunun kendisi zaten
	   cok acik cerceveli; koyu yazi icinde fazla one cikiyordu. */
	color: #7a7a7a;
	background: #fff;
	/* Cizgi inceltildi: 0.8px + daha acik gri. Tarayici 1px'in altini
	   yuvarlayabiliyor ama retina/olcekli ekranlarda gercekten daha
	   ince ciziliyor; duz ekranda da rengin acikligi ayni etkiyi veriyor. */
	border: 0.8px solid #e8e8e8 !important;
	/* Kose yuvarlakligi 4px -> 2px. Neredeyse duz ama tam keskin degil;
	   temanin genel keskin karakterine daha yakin. */
	border-radius: 2px !important;
	transition: border-color 160ms ease, background-color 160ms ease,
		color 160ms ease;
}
body.product-body .variant-box ul li.variant .options a:hover {
	border-color: #c9c9c9 !important;
}
/* Seçili beden — cerceve KOYU DEGIL, yumusak gri.
   Once #1c1c1c (neredeyse siyah) idi, sert duruyordu. #a8a8a8 hem
   secili oldugu anlasilacak kadar belirgin hem de kutuyu one
   firlatmiyor. Kalinlik degismiyor (0.8px) — kalinlastirmak secili
   kutuyu 1px "sisirip" satir hizasini bozardi. */
body.product-body .variant-box ul li.variant .options a.active {
	border-color: #a8a8a8 !important;
	border-width: 0.8px !important;
	background: #fff !important;
	/* Secili beden de gri, ama secilmemislerden (#7a7a7a) bir tik koyu —
	   yoksa hangisinin secili oldugu yalnizca cerceveden anlasilirdi. */
	color: #4a4a4a !important;
	font-weight: 500;
}
/* Tükenmiş / seçilemeyen beden (platform "passive" sınıfı basıyorsa) */
body.product-body .variant-box ul li.variant .options a.passive,
body.product-body .variant-box ul li.variant .options a.disabled {
	color: #c4c4c4 !important;
	border-color: #efefef !important;
	background: #fafafa !important;
	text-decoration: line-through;
}

@media (max-width: 480px) {
	body.product-body .variant-box ul li.variant .options a {
		min-width: 60px;
		padding: 12px 10px !important;
	}
}


/* -------------------------------------------------------------
   4) AKSİYON BUTONLARI — Network'teki gibi: TEK baskın buton +
      yanında küçük kare ikon düğmeleri, aynı satırda.
   --------------------------------------------------------------
   Üç buton da DOM'da duruyor, hiçbiri silinmiyor / kaldırılmıyor.
   Sepete Ekle genişliğin büyük kısmını kaplayan baskın buton;
   Hemen Al ve WhatsApp, Network'teki kalp ikonu gibi küçük KARE
   ikon düğmelerine dönüşüyor — metin (Hemen Al / WHATSAPP İLE...)
   DOM'da kalıyor, yalnızca görsel olarak sıfır boyuta küçültülüp
   yerine ikon büyütülüyor (font-size sıfırlama, klasik "ikon
   düğmesi" tekniği — erişilebilirlik için metin hâlâ orada,
   ekran okuyucu görür).
   ------------------------------------------------------------- */
/* Miktar secici + 3 buton TEK SATIRDA, ayni yukseklikte, sola hizali.
   Onceki denemede miktar kendi satirinda tam genislikteydi; tema onu
   ortaliyordu ve ortada tek basina asili duruyordu — dagink gorunuyordu.
   Hepsi tek satira alininca hiza sorunu bitiyor. */
/* İKİ SATIRLI DÜZEN
   Görsel sütunu %58'e çıkarılınca sağ sütun daraldı ve beş öğe tek
   satıra sığmaz oldu: ölçümde "Sepete Ekle" 163px'e düşmüştü, yanındaki
   "Hemen Al" ise 117px — ana eylem ikincil olandan neredeyse ayırt
   edilemiyordu. Şimdi:
     1. satır: [− 1 +]  [Sepete Ekle ......................]  [♡]
     2. satır: [Hemen Al ..............]  [WhatsApp .........]
   Sepete Ekle'ye min-width verilerek 2. satır öğelerinin yukarı
   tırmanması engelleniyor. */
body.product-body .product-buttons {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
	gap: 8px;
}
body.product-body .product-buttons .btn.btn-cart.btn-color-1 {
	order: 2;
	flex: 1 1 auto;
	/* min-width, 2. satır öğelerinin bu satıra sızmasını engelliyor. */
	min-width: 200px;
	padding: 15px 20px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
/* "Sepete Ekle" ikonu (coreicon-cart-2) CANLI SİTEDE DE bos/tanimsiz —
   platformun kendi CSS'inde bu simge icin hicbir font/glyph
   tanimlanmamis (kontrol edildi). Kucuk butonlarda fark edilmiyordu,
   ama buton buyuyunce bos kutucuk goze batmaya basladi. Silmiyoruz
   (DOM'da kalsin), yalnizca gorseldeki bos kutuyu gizliyoruz; ikon
   ileride tanimlanirsa bu satiri kaldirmak yeterli olur. */
body.product-body .product-buttons .btn.btn-cart.btn-color-1 i {
	display: none;
}

/* HEMEN AL — metinli ikincil buton.
   Bir onceki turda kare ikon dugmesine cevrilmisti; ancak yalniz "₺"
   simgesi ne yaptigini anlatmiyordu. Metin geri acildi, buton icerige
   gore genisliyor. Gorsel agirlik yine ikincil: beyaz zemin, ince gri
   cerceve — Sepete Ekle'nin dolu siyahiyla yarismiyor. */
body.product-body .product-buttons .btn.btn-fast-buy.btn-color-2 {
	/* 2. satırın solu — yarım genişlik. */
	order: 6;
	flex: 1 1 calc(50% - 4px);
	width: auto !important;
	padding: 0 18px !important;
	gap: 7px;
	font-size: 14px !important;
	font-weight: 500 !important;
	white-space: nowrap;
	background: #fff !important;
	color: #4a4a4a !important;
	border: 1px solid #e8e8e8 !important;
}
body.product-body .product-buttons .btn.btn-fast-buy.btn-color-2:hover {
	border-color: #a8a8a8 !important;
	color: #1c1c1c !important;
}
body.product-body .product-buttons .btn.btn-fast-buy.btn-color-2 i {
	font-size: 14px !important;
	margin: 0 !important;
}

/* WHATSAPP — 2. satırın sağı, yarım genişlik, metinli.
   Önceki turda 52px'lik ikon düğmesiydi (tek satıra sığsın diye);
   iki satırlı düzende yer açıldığı için metni geri açıldı. Yeşil
   zemin korunuyor ama punto ve kalınlık ölçülü — ana eylemle
   yarışmıyor. */
body.product-body .product-buttons a.btn.btn-wp {
	order: 7;
	flex: 1 1 calc(50% - 4px);
	width: auto !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 0 14px !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	letter-spacing: 0.01em;
	white-space: nowrap;
	overflow: hidden;
}
body.product-body .product-buttons a.btn.btn-wp i {
	font-size: 15px !important;
	margin: 0 !important;
}

/* HIZALAMA — dort ogenin de yuksekligi TEK bir degere sabitleniyor.
   Olcum (onizleme): miktar 65px, butonlar 45px ve miktar 10px yukaridan
   basliyordu; "align-items: stretch" tek basina yetmedi cunku hem miktar
   kutusunun hem butonlarin kendi yukseklikleri vardi. Sabit yukseklik +
   flex ortalama ile satir tam hizaya geliyor. */
body.product-body .product-buttons > .product-quantity,
body.product-body .product-buttons .btn.btn-cart.btn-color-1,
body.product-body .product-buttons .btn.btn-fast-buy.btn-color-2,
body.product-body .product-buttons a.btn.btn-wp {
	height: 52px !important;
	min-height: 52px !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
/* MIKTAR SECICI — tek parca, ince cerceveli, beyaz.
   Onceki hali: arti/eksi dugmelerinin zemini rgb(191,191,191) (dolu,
   koyu gri), ortadaki input beyaz — uc parcali, agir ve eski duruyordu.
   Yeni hali beden kutulariyla ayni dili konusuyor: #e8e8e8 cerceve,
   2px kose, beyaz zemin, gri ikonlar. */
body.product-body .product-buttons > .product-quantity {
	order: 1;
	flex: 0 0 auto;
	background: #fff !important;
	border: 1px solid #e8e8e8 !important;
	border-radius: 2px !important;
	overflow: hidden;
}
body.product-body .product-buttons > .product-quantity .btn,
body.product-body .product-buttons > .product-quantity .form-control {
	height: 100% !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
/* Arti / eksi — dolu zemin yerine sade ikon dugmesi. */
body.product-body .product-buttons > .product-quantity .btn {
	color: #9a9a9a !important;
	transition: color 160ms ease, background-color 160ms ease;
}
body.product-body .product-buttons > .product-quantity .btn:hover {
	color: #1c1c1c !important;
	background: #f6f6f6 !important;
}
body.product-body .product-buttons > .product-quantity .btn i {
	font-size: 12px !important;
}
/* Adet degeri — ortada, ince ayraclarla, beden kutulariyla ayni gri ton. */
body.product-body .product-buttons > .product-quantity .form-control {
	color: #4a4a4a !important;
	font-size: 14px !important;
	border-left: 1px solid #f0f0f0 !important;
	border-right: 1px solid #f0f0f0 !important;
	text-align: center;
}

@media (max-width: 560px) {
	/* Dar ekranda tek satır sıkışıyor: miktar seçici üst satıra,
	   butonlar altına geçsin. */
	body.product-body .product-buttons {
		flex-wrap: wrap !important;
	}
	body.product-body .product-buttons > .product-quantity {
		flex: 0 0 auto;
	}
	body.product-body .product-buttons .btn.btn-cart.btn-color-1 {
		flex: 1 1 100%;
		order: 5;
	}
	body.product-body .product-buttons .btn.btn-fast-buy.btn-color-2,
	body.product-body .product-buttons a.btn.btn-wp {
		flex-basis: 46px;
		width: 46px;
	}
}


/* -------------------------------------------------------------
   5) YARDIMCI LİNKLER (Favorilerime Ekle, Tavsiye Et, Yorum Yaz,
      Karşılaştır, Fiyat Alarmı, Telefonla Sipariş, Ürün Önerileri)
   --------------------------------------------------------------
   Şu an 2 satır x birkaç sütunluk kalabalık bir ızgara, ana
   aksiyonla yarışıyor. Tek satıra, küçük ve soluk hâle getirip
   arkaya alıyoruz — hepsi görünür ve tıklanabilir kalıyor.
   ------------------------------------------------------------- */
/* Izgara: 7 aksiyon esit sutunlarda hizalaniyor. Onceki "flex-wrap"
   halinde ogeler kendi metin uzunluklarina gore diziliyordu, bu yuzden
   iki satir birbirini tutmuyor, dagink duruyordu. */
body.product-body .customer-action.mb-4 {
	display: grid !important;
	/* "auto-fit + minmax" bilincli tercih: sabit sutun sayisi yerine
	   KAPSAYICININ genisligine gore kendi ayarliyor.
	   Olcum: kapsayici 512px, en uzun oge ("Favorilerime Ekle" + ikon)
	   117px yer istiyor. 4 sabit sutun 119px birakiyordu — 2px pay,
	   baska bir dilde/urunde tasar. 150px alt sinirla kapsayici 512px
	   iken 3 sutun (~162px) olusuyor, dar ekranda kendiliginden 2'ye,
	   cok darda 1'e dusuyor. Medya sorgusuna gerek kalmiyor: sorun
	   pencere genisligi degil, kapsayici genisligiydi. */
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
	gap: 10px 12px;
	margin-top: 4px !important;
	padding-top: 16px;
	border-top: 1px solid #ededed;
}
body.product-body .customer-action .action {
	margin: 0 !important;
	min-width: 0;
}

/* ÖNEMLİ — ":not(.d-none)"
   "Favorilerime Ekle" ve "Favorilerimden Çıkar" ayni kutuda duran IKI
   ayri baglanti; platform hangisinin gorunecegini Bootstrap'in
   d-block / d-none siniflariyla degistiriyor. Onceki kuralim
   "display: inline-flex !important" diyerek d-none'i EZIYORDU ve ikisi
   birden gorunuyordu (olcumle dogrulandi: .remove-favorite d-none
   olmasina ragmen computed display = flex).
   ":not(.d-none)" ile artik yalnizca gorunmesi gereken baglantiya
   dokunuyoruz; favori ekleme/cikarma gecisi bozulmadan calisiyor. */
body.product-body .customer-action .action .button:not(.d-none) {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	padding: 4px 0 !important;
	font-size: 12.5px !important;
	color: #8a8a8a !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
body.product-body .customer-action .action .button.d-none {
	display: none !important;
}
/* Ikonlarin etrafindaki kutu kaldirildi. Tema bu ikonlara
   "1px solid #ebebeb" cerceve + 30px yukseklik veriyordu (olcumle
   dogrulandi) — her ikon kucuk bir kutu icinde duruyor, satir
   kalabalik gorunuyordu. Artik yalnizca simge. */
body.product-body .customer-action .action .button i {
	font-size: 13px !important;
	color: #b0b0b0 !important;
	width: 15px;
	height: auto !important;
	line-height: 1 !important;
	text-align: center;
	flex: 0 0 15px;
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	border-radius: 0 !important;
}
body.product-body .customer-action .action .button:hover {
	color: #1c1c1c !important;
}
body.product-body .customer-action .action .button:hover i {
	color: #1c1c1c !important;
}
/* Karsilastir sayaci bos oldugunda yanindaki bosluk kalmasin. */
body.product-body .customer-action .action .button span:empty {
	display: none;
}

/* Not: burada medya sorgusu YOK — yukaridaki auto-fit zaten kapsayici
   daraldikca sutun sayisini kendi dusuruyor. Medya sorgusu eklemek
   iki mekanizmayi carpistirirdi. */


/* -------------------------------------------------------------
   6) GÜVEN ROZETLERİ (Hızlı Gönderi / Güvenli Alışveriş / İade)
   --------------------------------------------------------------
   Kutulu/çerçeveli hâli kaldırıp (silme değil, kutuyu şeffaflaştırma)
   ince, çizgisiz bir satıra çeviriyoruz — altbilgideki aynı
   mesajların üstünde ikinci kez ağır bir kutu gibi durmasın.
   ------------------------------------------------------------- */
body.product-body .product-badges {
	display: flex !important;
	flex-wrap: wrap;
	gap: 18px;
	margin: 18px 0 0;
}
body.product-body .product-badges .p-badge {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 6px;
	color: #8a8a8a;
	font-size: 12px;
}
body.product-body .product-badges .p-badge i {
	font-size: 14px;
	color: #b0b0b0;
}


/* -------------------------------------------------------------
   6.5) FAVORİ — Sepete Ekle'nin yanında kalp düğmesi
   --------------------------------------------------------------
   JS, ".action.favourite" bloğunu (silmeden) .product-buttons içine
   taşıyor; Network'te de kalp tam orada. Alttaki link kümesinden bir
   öğe eksiliyor, en çok kullanılan eylem ise ana satıra çıkıyor.
   ------------------------------------------------------------- */
body.product-body .product-buttons > .action.favourite {
	order: 3;
	flex: 0 0 52px;
	width: 52px;
	height: 52px !important;
	margin: 0 !important;
	border: 1px solid #e8e8e8;
	border-radius: 2px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	transition: border-color 160ms ease;
}
body.product-body .product-buttons > .action.favourite:hover {
	border-color: #a8a8a8;
}
body.product-body .product-buttons > .action.favourite .button:not(.d-none) {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0 !important;
	font-size: 0 !important;
}
body.product-body .product-buttons > .action.favourite .button i {
	font-size: 17px !important;
	color: #9a9a9a !important;
	border: 0 !important;
	width: auto !important;
	flex: none !important;
}
body.product-body .product-buttons > .action.favourite .button:hover i,
body.product-body .product-buttons > .action.favourite .remove-favorite i {
	color: #1c1c1c !important;
}


/* -------------------------------------------------------------
   6.6) NEFES PAYI — bölümler arası boşluk
   --------------------------------------------------------------
   Lüks algısının en ucuz ve en etkili yolu: sıkışıklığı azaltmak.
   ------------------------------------------------------------- */
body.product-body .variant-box.mb-2 {
	margin-top: 22px !important;
	margin-bottom: 22px !important;
}
body.product-body .product-badges {
	margin-top: 26px !important;
	padding-top: 20px;
	border-top: 1px solid #f2f2f2;
}
body.product-body .product-profile-1 {
	padding-bottom: 20px;
}
body.product-body .pattern-group-p-product .pattern-group-body {
	padding-top: 18px;
}


/* -------------------------------------------------------------
   7) ÜRÜN AÇIKLAMASI — YATAY SEKME YERİNE AÇILIR SATIRLAR
   --------------------------------------------------------------
   Tema yatay bir sekme çubuğu basıyor (Ürün Açıklaması / Garanti ve
   Teslimat / Taksit Seçenekleri / Yorumlar). JS bunları akordeona
   çeviriyor: her panelin ÖNÜNE tıklanabilir bir başlık ekleniyor,
   yatay çubuk gizleniyor.

   ÖNEMLİ: Bootstrap'in kendi sekme mekanizmasıyla KAVGA ETMİYORUZ —
   başlığa tıklayınca özgün nav bağlantısı tetikleniyor. Böylece
   "Taksit Seçenekleri" ve "Yorumlar" sekmelerinin AJAX ile sonradan
   yüklenmesi (loadPatternGroupCol) bozulmadan çalışıyor.
   ------------------------------------------------------------- */
body.product-body .p-g-tab-wrapper.ss-akordeon .p-g-t-nav {
	display: none !important;
}
/* Temanın sekme alanına verdiği kutu/çerçeve/zemin sıfırlanıyor —
   akordeon serbest dursun, kutu içinde kutu görünmesin. */
body.product-body .p-g-tab-wrapper.ss-akordeon,
body.product-body .p-g-tab-wrapper.ss-akordeon .tab-content {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

body.product-body .ss-akordeon-baslik {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 22px 2px;
	background: transparent;
	border: 0;
	border-top: 1px solid #ededed;
	/* Büyük harf + geniş harf aralığı: başlıktaki "SARTORIA BESPOKE"
	   etiketiyle aynı dil. Lüks perakendede bölüm başlığı dili budur. */
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #8a8a8a;
	cursor: pointer;
	text-align: left;
	transition: color 220ms ease;
}
/* Son satırdan sonra da çizgi olsun ki grup kapanmış görünsün. */
body.product-body .ss-akordeon-baslik:last-of-type {
	border-bottom: 1px solid #ededed;
}
body.product-body .ss-akordeon-baslik:hover,
body.product-body .ss-akordeon-baslik[aria-expanded="true"] {
	color: #1c1c1c;
}

/* İnce + / − işareti — iki 1px çizgiden. Açılınca dikey çizgi
   yatağa dönerek "−" oluyor. Köşeli ok yerine bu tercih edildi:
   ok "başka sayfaya gider" çağrışımı yapıyor, +/− ise "burada
   açılır" demek. */
body.product-body .ss-akordeon-baslik::before,
body.product-body .ss-akordeon-baslik::after {
	content: "";
	position: absolute;
	right: 4px;
	width: 11px;
	height: 1px;
	background: #b0b0b0;
	transition: transform 300ms cubic-bezier(0.33, 1, 0.68, 1),
		background-color 220ms ease;
}
body.product-body .ss-akordeon-baslik::after {
	transform: rotate(90deg);
}
body.product-body .ss-akordeon-baslik[aria-expanded="true"]::after {
	transform: rotate(180deg);
}
body.product-body .ss-akordeon-baslik:hover::before,
body.product-body .ss-akordeon-baslik:hover::after,
body.product-body .ss-akordeon-baslik[aria-expanded="true"]::before,
body.product-body .ss-akordeon-baslik[aria-expanded="true"]::after {
	background: #1c1c1c;
}
/* AÇILMA ANİMASYONU
   --------------------------------------------------------------
   Bootstrap, aktif olmayan paneli "display: none" ile gizliyor.
   display:none'dan yüksekliğe geçiş animate EDİLEMEZ — bu yüzden
   panelleri her zaman görünür tutup (display: grid) yüksekliği
   grid satırıyla açıp kapatıyoruz.

   Neden "grid-template-rows: 0fr -> 1fr":
   max-height ile yapılan klasik yöntemde içeriğin gerçek yüksekliği
   bilinmediği için tahmini bir max-height verilir; kısa içerikte
   animasyon "boşluğa" doğru devam edip gecikmeli görünür, uzun
   içerikte ise kırpılır. 0fr/1fr içeriğin GERÇEK yüksekliğine göre
   çalışır, JS ile ölçüm gerektirmez.

   Bootstrap'in .active sınıfı hâlâ tek doğruluk kaynağı; biz yalnızca
   o sınıfa bakıp açıyoruz. Sekme mekanizması ve AJAX yüklemesi
   bozulmuyor. */
/* Paneller HER ZAMAN "display: block" — Bootstrap'in display:none'i
   eziliyor, çünkü display:none'dan yüksekliğe geçiş animate edilemez.
   Açık/kapalı durumu artık max-height ile yönetiliyor; değeri JS
   içeriğin GERÇEK yüksekliğinden (scrollHeight) ölçüp veriyor.

   Neden grid (0fr/1fr) değil: denendi ve bu şablonda güvenilir
   çalışmadı — Bootstrap panellerde "show" ve "active" sınıflarını
   ayrı ayrı bırakıyor, 1fr bazı panellerde çözülmeyip yükseklik
   448px'te takılı kalıyordu (ölçümle görüldü). Ölçülen yükseklik
   yöntemi bu şablonda deterministik. */
body.product-body .p-g-tab-wrapper.ss-akordeon .tab-content > .tab-pane {
	display: block !important;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 400ms cubic-bezier(0.33, 1, 0.68, 1),
		opacity 260ms ease;
}
body.product-body .p-g-tab-wrapper.ss-akordeon .tab-content > .tab-pane.ss-acik {
	opacity: 1;
}
body.product-body .p-g-tab-wrapper.ss-akordeon .tab-content > .tab-pane > .p-g-b-c-wrapper {
	padding: 6px 4px 28px;
}

/* Hareket azaltma tercihi olan ziyaretçilerde animasyon kapanır. */
@media (prefers-reduced-motion: reduce) {
	body.product-body .p-g-tab-wrapper.ss-akordeon .tab-content > .tab-pane,
	body.product-body .ss-akordeon-baslik::after {
		transition: none !important;
	}
}


/* -------------------------------------------------------------
   7.1) SEKME İÇERİĞİ TİPOGRAFİSİ
   --------------------------------------------------------------
   Kumaş / Kumaş Markası / Sezon gibi teknik satırların tablo
   görünümü main JS tarafında (.ss-detay-tablo) sağlanıyor;
   burada yalnızca genel tipografi/boşluk inceltiliyor.
   ------------------------------------------------------------- */
body.product-body .p-g-t-nav .nav .nav-link {
	color: #8a8a8a;
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.02em;
}
body.product-body .p-g-t-nav .nav .nav-link.active {
	color: #1c1c1c;
}
body.product-body .raw-content {
	color: #444;
	line-height: 1.75;
	font-size: 14.5px;
}

/* JS tarafından üretilen "Kumaş / Kumaş Markası / Sezon…" tablosu */
body.product-body .ss-detay-tablo {
	margin: 20px 0;
	border: 1px solid #ececec;
	border-radius: 6px;
	overflow: hidden;
}
body.product-body .ss-detay-satir {
	display: flex;
	padding: 11px 16px;
	font-size: 13.5px;
}
body.product-body .ss-detay-satir:not(:last-child) {
	border-bottom: 1px solid #ececec;
}
body.product-body .ss-detay-satir:nth-child(odd) {
	background: #fafafa;
}
body.product-body .ss-detay-k {
	flex: 0 0 170px;
	color: #8a8a8a;
	font-weight: 500;
}
body.product-body .ss-detay-v {
	color: #1c1c1c;
}

@media (max-width: 767px) {
	body.product-body .ss-detay-satir {
		flex-direction: column;
		gap: 2px;
	}
	body.product-body .ss-detay-k {
		flex-basis: auto;
		font-size: 12px;
	}
}