@font-face {
    font-family: bold;
    src: url("../font/gothamblack.otf") format("opentype");
}

@font-face {
    font-family: light;
    src: url("../font/Gotham-Light.otf") format("opentype");
}


@font-face {
    font-family: medium;
    src: url("../font/GothamMedium.otf") format("opentype");
}

/* ---- Hungarian ő and ű --------------------------------------------------
   All three Gotham cuts are missing U+0150/0151 (Ő/ő) and U+0170/0171 (Ű/ű),
   while ó and é are present. Verified by reading the cmap table of each .otf
   and confirmed in the browser: "ő" measured exactly the width of Times New
   Roman, so it was falling through to the default SERIF — a Times ő sitting
   inside a geometric sans word. "Zsírégető", "Tömegnövelő" and "Szűrők" all
   showed it.

   The font-family declarations across this stylesheet are bare names with no
   fallback list ("font-family: light"), so there is no single place to add
   one. A second @font-face for the same family, restricted by unicode-range,
   is the mechanism for exactly this: the browser uses it only for the four
   code points below and keeps Gotham for everything else.

   local() rather than a downloaded file: nothing new has to be shipped or
   licensed, and every one of these system faces carries the double acute.
   Arial closes the list because it is present essentially everywhere.

   No font-weight is declared on these rules. The base faces above do not
   declare one either, and a 700 fallback against a 400 base is never selected
   — that is what left "bold" still rendering a Times ő after the first
   attempt. The weight is matched by NAMING a weighted face instead, which the
   browser was confirmed to resolve ("Segoe UI Black", "Arial Bold" and the
   rest all load). Without that the ő came out at regular weight beside black
   Gotham neighbours, thin and obviously grafted on — visible in the mobile
   menu on "Zsírégető" and "Tömegnövelő".

   Each list runs Windows name, macOS name, then Arial as the last resort.

   local() alone was still visibly wrong: a visitor with no matching system
   face (Linux, a stripped browser profile, a locked-down corporate image)
   fell through past every local() and re-hit the same Times-ő failure this
   whole block exists to prevent. Each rule now ends in a self-hosted,
   4-glyph Inter subset (~1 KB, so the download cost is negligible) — local()
   is tried first for a zero-latency native match, the file guarantees the
   glyph renders correctly even when no local() name resolves. */
@font-face {
    font-family: bold;          /* base: Gotham Black */
    src: local("Segoe UI Black"), local("Helvetica Neue Bold"), local("Arial Black"),
         url("../font/bold_hu.woff2") format("woff2");
    unicode-range: U+0150-0151, U+0170-0171;
}
@font-face {
    font-family: medium;        /* base: Gotham Medium */
    src: local("Segoe UI Semibold"), local("Helvetica Neue Medium"), local("Arial Bold"),
         url("../font/medium_hu.woff2") format("woff2");
    unicode-range: U+0150-0151, U+0170-0171;
}
@font-face {
    font-family: light;         /* base: Gotham Light */
    src: local("Segoe UI Light"), local("Helvetica Neue Light"), local("Segoe UI"),
         local("Arial"), url("../font/light_hu.woff2") format("woff2");
    unicode-range: U+0150-0151, U+0170-0171;
}


body{
    margin:0;
    padding:0;
    overflow-x:clip;
}

#telo_social{
    display:none;
}

/* menu style*/

#menu{
    width: 100%;
    height: 60px;
    background: white;
    position: fixed;
    z-index:10;
    top: -60px;
    left: 0;
    transition-timing-function: ease-out;
    transition: 0.7s;
    display: flex;
    align-items: center;
    
}

#menu_logo{
    height:40px;
    margin-left:50px;
    transition: 0.7s;
}

#start_menu{
    right: 35px;
    top: -40px;
    position: fixed;
    color:white;
    display: inline-flex;
    transition-timing-function: ease-out;
    transition: 0.7s;
}

#start_menu a{
    text-decoration: none;
    color: white;
    font-family: light;
    font-size: 0.8em;
    margin-top: 0.1em;
    margin-left: 15px;
    margin-right: 15px;
}

#start_menu a:hover{
    text-decoration: underline;
}

#navbar{
    color: black;
    margin-right: 30px;
    display: none;
}

#active-filters{
    margin-left: 2%;
    font-family: medium;
}

.active-filter{
    padding: 5px 10px;
    background: #17191d;
    color: white;
    font-family: medium;
    font-size: 0.7rem;
    margin-right: 10px;
    border-radius: 20px;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 5px;
}

#selected-filters{
    margin-bottom: 20px;
    display: block;

}

#navbar a{
    text-decoration: none;
    color: black;
    font-family: light;
    font-size: 0.8em;
    margin-top: 0.1em;
    margin-left: 15px;
    margin-right: 15px;    
}

#navbar a:hover{
    text-decoration:underline;
}

#lang{
    font-family: light;
    font-size: 0.8em;
    margin-right: 10px;
    margin-left: 10px;
    text-decoration:none;
    color:black;
}

.searchicon{
    font-size: 1em;
    text-decoration:none;
    color:black;    
    margin-left:10px;
}

/*button css*/

.white_btn{
    font-family: bold;
    background:white;
    padding:10px 28px;
    font-size:12px;
    letter-spacing:1px;
    color:black;
    text-decoration:none;
    cursor:pointer;
    transition: opacity 0.7s, margin-top 0.7s;
    position:absolute;
    margin-top:20px;
    opacity:0;
    transition-timing-function: ease-out;
}

.red_btn{
    font-family: bold;
    background: rgb(213,0,25);
    background: linear-gradient(40deg, rgba(213,0,25,1) 0%, rgba(253,101,0,1) 100%); 
    padding:10px 28px;
    font-size:12px;
    letter-spacing:1px;
    color:black;
    text-decoration:none;
    cursor:pointer;
    transition:  0.7s;
    transition-delay: 1.2s;
    display: inline-block;
    margin-top: 40px;
    opacity: 0;
    transition-timing-function: ease-out;
}




#login{
    font-family: light;
    background: black;
    padding: 7px 28px;
    font-size: 0.7em;
    letter-spacing: 1px;
    color: white;
    text-decoration: none;
    cursor: pointer;
}

#login_ctr{
    right: 50px;
    position: fixed;
    width:auto;
    height:auto;
}

.white_btn:hover{
    background:black;
    color:white;
}


#hero_btn{
    transition-delay:1.7s;
}



/*landing div style*/
#landing_hero{
    width:100%;
    height:100vh;
    background-image:url('../img/hero_bg.jpg');
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
    display: flex;
    align-items: center;
}

#landing_content{
    width:25%;
    height:auto;
    margin-left:5%;
}

#landing_contenth1{
    font-family: bold;
    color:white;
    font-size:4.2em;
    display:inline-block;
    margin-bottom:0;
    position: relative;
    left: -200%;
    transition-timing-function: ease-out;
    transition: 0.7s;
    transition-delay:0.7s;
    opacity:0;
    text-transform:uppercase;
}

#landing_contentp{
    font-family: light;
    color: white;
    font-size: 0.8em;
    line-height: 1.2em;
    margin-bottom: 50px;
    position: relative;
    left: -200%;
    transition-timing-function: ease-out;
    transition: 0.7s;
    transition-delay:1s;
    opacity:0;
}

#filtersign{
    font-family: 'bold';
}

#filter_open{
    display:none;
}

.filter_hr{
    display:none;
}

.offer_label{
    color: black;
    padding: 5px 15px;
    background: #a3e635;
    font-family: bold;
    margin-left: 10px;
    margin-bottom: 5px;
    display: inline-block;
    font-size: 13px;
}


/*second container style*/
#second_ctr{
    width: 100%;
    height: auto;
    background: black;
    display: table;
}

#second_left{
    width: 50%;
    height: 350px;
    float:left;
    background-image: url(../img/second_hero.jpg);
    background-size: 120%;
    background-position: right;
    transition-timing-function: ease-out;
    transition:1.4s;
    opacity:0;
}

#second_right{
    width: 50%;
    height: 350px;
    display: flex;
    align-items: center;
    float:right;
}

#seconr_right_ctr{
    height:250px;
}

#second_right h3{
    width:100%;
    color:#f04208;
    font-family: bold;
    text-transform:uppercase;
    opacity:0;
    transition:0.7s;
    padding-top: 40px;
    margin-top: 20px;
    margin-bottom:0;
    transition-timing-function: ease-out;
}

#second_right h1{
    width:100%;
    color:white;
    font-family: bold;
    text-transform:uppercase;
    opacity:0;
    transition:0.7s;
    transition-delay:0.4s;
    padding-top: 40px;
    transition-timing-function: ease-out;
    margin-top: 10px;
}

#second_right p{
    width:70%;
    color: #9c9d9d;
    font-size: 0.8em;
    line-height: 1.2em;
    font-family: light;
    padding-top: 40px;
    opacity: 0;
    transition:0.7s;
    transition-delay:0.8s;
    transition-timing-function: ease-out;
}





/*third container style*/
#third_ctr{
    width:100%;
    height:500px;
    background:white;
}


/*fourth container style*/
/* Premium Newsletter Section Styling */
.newsletter-premium-section {
    width: 100%;
    min-height: 480px;
    background-image: url('../img/newslette.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 60px 0;
    box-sizing: border-box;
}

.newsletter-overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(23, 25, 29, 0.88) 0%, rgba(4, 9, 6, 0.96) 100%);
    z-index: 1;
}

.newsletter-premium-container {
    width: 90%;
    max-width: 1140px;
    position: relative;
    z-index: 2;
}

.newsletter-content-card {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 50px;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(163, 230, 53, 0.12);
    border-radius: 24px;
    padding: 50px 60px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Decorative Ambient Glows */
.decorative-glow-1 {
    position: absolute;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(23, 25, 29, 0.6) 0%, transparent 70%);
    top: -160px;
    left: -160px;
    pointer-events: none;
    z-index: -1;
    animation: newsletterGlowPulse 8s infinite alternate ease-in-out;
}

.decorative-glow-2 {
    position: absolute;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(163, 230, 53, 0.18) 0%, transparent 70%);
    bottom: -160px;
    right: -160px;
    pointer-events: none;
    z-index: -1;
    animation: newsletterGlowPulse 12s infinite alternate-reverse ease-in-out;
}

@keyframes newsletterGlowPulse {
    0% { transform: scale(1); opacity: 0.4; }
    100% { transform: scale(1.15); opacity: 0.8; }
}

/* Header Text Styling */
.newsletter-header-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.newsletter-subtitle {
    font-family: 'bold', sans-serif;
    font-size: 11px;
    color: #a3e635;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 0 10px rgba(163, 230, 53, 0.3);
}

.animate-pulse-slow {
    animation: newsletterPulse 2.5s infinite ease-in-out;
}

@keyframes newsletterPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}

.newsletter-title {
    font-family: 'bold', sans-serif;
    font-size: 32px;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 1.2;
}

.newsletter-divider {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #a3e635 0%, rgba(163, 230, 53, 0.1) 100%);
    margin-bottom: 20px;
    border-radius: 2px;
}

.newsletter-description {
    font-family: 'light', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7) !important;
    margin-bottom: 0;
    text-align: left;
}

/* Newsletter Input Form Block Styling */
.newsletter-form-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.premium-form {
    width: 100%;
    display: block;
}

.input-group-premium {
    position: relative;
    margin-bottom: 18px;
    width: 100%;
}

.premium-input {
    width: 100% !important;
    padding: 16px 16px 16px 48px !important;
    background: rgba(4, 9, 6, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-family: 'medium', sans-serif !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin: 0 !important;
}

.premium-input:focus {
    border-color: #a3e635 !important;
    background: rgba(23, 25, 29, 0.3) !important;
    box-shadow: 0 0 15px rgba(163, 230, 53, 0.15) !important;
}

.input-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.35);
    font-size: 15px;
    transition: color 0.3s ease;
    pointer-events: none;
    z-index: 2;
}

.premium-input:focus + .input-icon,
.premium-input:not(:placeholder-shown) + .input-icon {
    color: #a3e635;
}

/* Button Premium styling */
.premium-submit-btn {
    width: 100% !important;
    padding: 16px 24px !important;
    background: linear-gradient(90deg, #a3e635, #a3e635) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #17191d !important;
    font-family: 'bold', sans-serif !important;
    font-size: 13px !important;
    letter-spacing: 2px !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 15px rgba(163, 230, 53, 0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    margin-top: 5px !important;
}

.premium-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(163, 230, 53, 0.4) !important;
    color: #17191d !important;
}

.premium-submit-btn:active {
    transform: translateY(0);
}

.premium-submit-btn .btn-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-submit-btn:hover .btn-icon {
    transform: translateX(4px);
}

/* Status Notifications styling */
.newsletter-alert {
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'medium', sans-serif;
    font-size: 13px;
    animation: newsletterSlideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.newsletter-alert.success {
    background: rgba(255, 138, 30, 0.1);
    border: 1px solid rgba(255, 138, 30, 0.25);
    color: #a3e635;
}

.newsletter-alert.error {
    background: rgba(241, 67, 8, 0.1);
    border: 1px solid rgba(241, 67, 8, 0.25);
    color: #f14308;
}

@keyframes newsletterSlideDown {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}


/*third controller*/

#third_1_4{
    width:25%;
    height:360px;
    /*background:black;*/
    display:inline-block;
    margin-left:5%;
    padding-top:40px;
    position: absolute;
}

#third_1_4 h1 {
    width: 100%;
    color: black;
    font-family: bold;
    text-transform: uppercase;
    opacity: 0;
    transition: 0.7s;
    transition-delay: 0.4s;
    padding-top: 40px;
    transition-timing-function: ease-out;
    margin-bottom: 0;
}

.only_sign{
        margin-top: -10px;
    display: block;
    font-family: bold;
    font-size: 0.7rem;
    color: #d01616;
}

.sales_stamp{
    position: absolute;
    top: 0;
    right: 20px;
    
}

.st_big{
    width: 40px !important; 
}

#third_1_4 p {
    color: #9c9d9d;
    font-size: 0.8em;
    line-height: 1.3em;
    font-family: light;
    text-align: justify;
    padding-top: 40px;
    display: inline-block;
    opacity: 0;
    transition: 0.7s;
    transition-delay: 0.8s;
    transition-timing-function: ease-out;
}

#third_btn{
    position:absolute;
    bottom:-20px;
    
}

#third_3_4{
    width:65%;
    height:500px;
    /*background:gray;*/
    display:inline-block;
    float: right;
    overflow: auto;
    white-space: nowrap;
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll; 
      scroll-behavior: smooth;
}

#third_3_4::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}

.third_tile_ctr{
    width: 270px;
    height: 436px;
    /*background: red;*/
    margin: 30px;
    text-align:center;
    display: inline-block;
}

.third_tile{
    width:100%;
    height:370px;
    background:black;
    background-size: cover;
    background-position: center;
    opacity:0;
    margin-top: -80px;
    transition-delay: 0.8s;
    transition: 0.7s;
    transition-timing-function: ease-out;
}

.third_hoover{
    width:100%;
    height:370px;
    background: rgb(255,255,255);
    background: linear-gradient(121deg, rgba(255,255,255,0) 0%, rgba(254,103,0,0.3772102591036415) 60%, rgba(213,0,25,0.8141850490196079) 100%);
    position: relative;
    opacity:0;
    transition:0.2s;
}

.third_btn{
    color: white;
    position: absolute;
    display: block;
    width: 170px;
    border: 1px solid white;
    padding: 5px;
    font-size: 12px;
    margin-left: 49px;
    margin-top: 310px;
    font-family: bold;
    cursor:pointer;
    transition:0.2s;
}

.third_btn:hover{
    background:white;
    color:black;
}

.blur{
    width: 75%;
    height: 20px;
    background: #00000030;
    margin: auto;
    margin-top: 200px;
    filter: blur(9px);
    border-radius: 100px / 20px;
     -moz-border-radius: 100px / 20px;
    -webkit-border-radius: 100px / 20px;
    transition-delay: 0.8s;
    transition: 0.7s;
    transition-timing-function: ease-out;
    opacity:0;
}

#scroll_left{
    width: 100px;
    height: 500px;
    position: absolute;
    float: left;
    z-index: 100;
}

#scroll_right{
    width: 100px;
    height: 500px;
    position: absolute;
    float: right;
    z-index: 1000;
    background: red;
    display: inline-block;
    margin-left: -265px;
}

/* slider itt kezdődik*/

#sliderWrapper {
    white-space: nowrap !important;
    height: 100%;
    position: relative;
    overflow-x: hidden;
}

/*img {
    position: relative;
    width:100px;
}*/
#next {
    height: 100%;
    position: absolute;
    right: 0;

    z-index: 1;
    width:70px;
}
#prev {
    height: 100%;
    position: absolute;
    left: 0;

    z-index: 1;
    width:70px;
}
#imageSlider {
    width: 100%;
    height: 150px;
    position: relative;
    overflow: hidden;
    height: 500px;
}
::-webkit-scrollbar {
    display: none;
}


/*fith ctr*/
#fith_ctr{
    width: 100%;
    height: auto;
    background: black;
    background-image: url(../img/capriolo_bg_five.jpg);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    padding-top: 50px;
    padding-bottom: 50px;
    background-attachment: fixed;
}

#fith_left{
    width: 90%;
    margin-left: 5%;
    height: auto;
}

#fith_left h1{
    width: 100%;
    color: white;
    font-family: bold;
    text-transform: uppercase;
    opacity: 0;
    transition: 0.7s;
    padding-top: 50px;
    transition-timing-function: ease-out;
    margin-top: 10px;
}

.fith_tile_ctr{
    transition-delay: 0.8s;
    width: 250px;
    margin-right: 50px;
    margin-top: 50px;
    display: inline-grid;
    padding-top: 50px;
    opacity: 0;
    transition: 1.2s;
    transition-timing-function: ease-out;
}

.fith_tile_ctr h2{
    color:#f04208;
    font-family: bold;
    text-transform:uppercase;
}

.fith_tile_ctr p{
    color: #9c9d9d;
    font-family: light;
    line-height: 18px;
    font-size: 14px;
    text-align: justify;
}

.fith_img{
    width:75px;
}

#newsletter_form {
    padding-top: 0px;
    transition: 0.7s;
    transition-delay: 1.2s;
    opacity: 1;
    display: inline-flex;
    width: 120%;
}

.form_btn{
    font-family: bold;
    background: rgb(0 0 0);
    padding: 10px 28px;
    font-size: 12px;
    letter-spacing: 1px;
    color: white;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
}

.form_btn:hover{
    background: white;
    color:rgb(0 0 0);
}

.legacy_email_input{
    padding: 10px;
    border: 0;
    background: white;
    width: 50%;
    margin-right: 40px;
}

#footer_one{
    background-image: url(../img/footer_bg.jpg);
    width: 100%;
    height: auto;
    padding-top: 50px;
    padding-bottom: 50px;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

#footer_form{
    width:45%;
    margin-left:5%;
}

#contact_form label{
    color:black;
    font-family: light;
    font-size:12px;
}

#footer_form h1{
    color: #17191d;
    font-family: bold;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.contact_input{
    width: 85%;
    padding: 2%;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 0;
    box-shadow: 0px 0px 6px #00000033;
    
}

.footer_btn{
    font-family: bold;
    background: black;
    padding: 10px 28px;
    font-size: 12px;
    letter-spacing: 1px;
    color: white;
    text-decoration: none;
    cursor: pointer;
    margin-top: 40px;
    opacity: 1;
    border:0;
    text-transform:uppercase;
}

#footer_alt{
    width: 100%;
    height: auto;
    padding-bottom: 10px;
    text-align:center;
}

#footer_alt img{
        width: 150px;
    margin-top: 20px;
}

#footer_alt p{
    color: #9c9d9d;
    width: 40%;
    font-family: light;
    margin: auto;
    margin-top: 20px;
    font-size: 10px;
    line-height: 16px;
}

#footer_alt h3{
    margin-top:20px;
    font-size: 12px;
    font-family: bold;
}

.link{
    text-decoration:none;
    color:black;
}

#shop_all_ctr{
    width:1000px;
    margin:auto;
    height:auto;
    padding-bottom: 50px;
}

#shop_menu_bg{
    width:100%;
    background:#17191d;
}

#shop_menu{
    width: 1000px;
    margin: auto;
    height: auto;
    padding-top: 20px;
    display: table;
    padding-bottom: 20px;
}

#shopmenu_info{
    width: 600px;
    height: auto;
    float: right;
    text-align: right;
    color: whitesmoke;
}

#shop_search{
    width: auto;
    height: auto;
    float: right;
    text-align: right;
    display: inline-flex;
    margin-top: 10px;
}

.basket_price{
    margin: 0;
    margin-left: 10px;
    font-family: 'light';
    font-size: 14px;
    text-align: left;
    line-height: 18px;
    color: white;
}

.basket_price span{
    font-family:bold;
}

.profil_btn{
    font-family: 'medium';
    font-size: 13px;
    margin-left: 20px;
    margin-right: 20px;
    cursor:pointer;
    color: #ffffff;
    text-decoration:none;
}

.profil_btn:hover{
    text-decoration:underline;
}

#search_shop_btn{
    background: #a3e635;
    border: 0;
    width: 70px;
    height: 38px;
    margin-left: -5px;
    text-align: center;
    cursor: pointer;
}

#basket_shop_btn{
    display: inline-block;
    background: #a3e635;
    border: 0;
    margin-left: 20px;
    text-align: center;
    cursor: pointer;
}

#shop_s input{
    width: 300px;
    padding: 10px;
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
    -webkit-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
    -moz-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
    border: 1px solid #c5c5c5;
    border-radius:0;
}

#phone{
    text-decoration: none;
    color: #ffffff;
    font-family: light;
    font-size:13px;
    margin-left: 10px;
}

#menu_logo_shop{
    height: 70px;
    margin-left: 0px;
    transition: 0.7s;
    float: left;

}

#shop_szallag{
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #1c1e22;
    border-bottom: 3px solid #a3e635;
    height: auto;
    min-height: 20px;
}

#szallag_menu{
    width:1000px;
    margin:auto;
    color:white;
}

#shop_szallag_mobil{
    width: 90%;
    margin: auto;
    display:none;
}

#szallag_menu a{
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    font-family: medium;
    letter-spacing: 1.5px;
    font-size: 12px;
    color: #e9e7e1;
}

#menulenyil{
    display: inline-block;
    background: #a3e635;
    color: #141416 !important;
    font-family: bold;
    padding: 9px 18px;
    border-radius: 4px;
    transition: background 0.2s ease, transform 0.1s ease;
}

#menulenyil:hover{
    background: #b8f04f;
}

.szallag_menu_m{
    display: inline-block;
    float: right;
    margin-left: 20px;
    font-family: medium;
    text-decoration: none;
    color: black;
    font-size: 13px;
    margin-top: 3px;
}

.right_float_menu{
    float: right;
    margin-top: 11px;
    margin-left: 34px;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.right_float_menu:hover{
    color: #a3e635 !important;
    border-bottom-color: #a3e635;
}

#chategory_menu_ctr, #header_category_menu_ctr {
    width:300px;
    height:auto;
    background:white;
    box-shadow: 0px 8px 24px rgba(0,0,0,0.12);
    z-index: 1000;
}

#chategory_menu_ctr {
    display:inline-block;
    position: relative;
}

#header_category_menu_ctr {
    display: block !important;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 10px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(10px);
    box-shadow: 0px 12px 32px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(163, 230, 53, 0.2);
    border-radius: 6px;
    background: #ffffff;
    z-index: 10000;
}

.categories-menu-group {
    display: inline-block;
    position: relative;
}

.categories-menu-group:hover #header_category_menu_ctr {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

.chat_menu_elem{
    display: block;
    padding: 20px;
    text-decoration: none;
    color: #222222 !important;
    font-family: medium !important;
    cursor:pointer;
    font-size: 15px !important;
    text-transform:inherit !important;
    letter-spacing: 0 !important;
}

.chat_menu_elem:hover{
    background: rgba(163, 230, 53, 0.14);
    box-shadow: inset 3px 0 0 #a3e635;
}

.fa-circle-play{
    margin-right:10px;
}

#thin_menu{
    width: 1000px;
    margin: 25px auto;
    font-size: 0.7rem;
}

#thin_menu a{
    color: gray;
    text-decoration: none;
    font-family: 'light';
}


.thin_menuelem{
    display:inline-block;
    margin-left:10px;
}

.menuhr{
    width: 90%;
    height: 1px;
    border: 0;
    background: #d8d8d8;
    margin: 0 auto;
}



#chat_img_ctr{
    width:100%;
    display: block;
    position: relative;
    margin-bottom: 20px;
}

#chat_img {
    max-width: none;
    width: 100%;
    height: min(560px, 33.4vw);
    background: #121413;
    position: relative;
    overflow: hidden;
    margin: auto;
    border-radius: 0;
}

.slide {
    width: 100%;
    flex: 0 0 100%;
}

.slides {
    display: flex;
    width: 100%;
    max-width: none;
    transition: transform 2s ease-in-out;
}

.slides img {
    width: 100%;
    height: min(560px, 33.4vw);
    object-fit: cover;
    display: block;
    border-radius: 0;
}


#chat_nagy_ctr{
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    height:auto;
    display:block;
}

.ikon_lent{
    font-size: 13px;
    font-family: medium;
    margin-top: 0;
    padding: 14px 24px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #17191d;
    color: #dcd9d2;
    border-bottom: 3px solid #a3e635;
}

.discount_top{
    color:#f14308;
    text-decoration:line-through;
    font-size:10px;
    margin-right:10px;
    font-family:medium;
}

.ikon_lent i{
    margin-left: 30px;
    color: #a3e635;
    
}

#topproduct{
    margin-top:50px;
    margin-bottom:50px;
    width:96%;
    height:auto;
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
    -webkit-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
    -moz-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
    padding:2%;
}

#topproduct_category{
    margin-top:0px;
    margin-bottom:50px;
    width:96%;
    height:auto;
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
    -webkit-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
    -moz-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
    padding:2%;
}


#topproduct h2{
    text-transform: uppercase;
    font-family: bold;
    font-size: 1.3em;
    letter-spacing: 1px;
    display:inline-block;
    margin-top: 10px;
}

#arrow_ctr{
    display:inline-block;
    float:right;
    margin-top: 10px;
}

.arrow{
    background: #cacaca;
    display: inline-block;
    padding: 5px 8px;
    font-size: 11px;
}

.arrow:hover{
    background: rgb(213,0,25);
    background: linear-gradient(40deg, rgba(213,0,25,1) 0%, rgba(253,101,0,1));    
}


.hr_top{
    height: 1px;
    border: 0;
    background: #d8d8d8;
}

.top_pro_ctr{
    width:148px;
    padding:20px;
    /*background:red;*/
    text-align:center;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-height: 300px;
    height: auto;
    padding-bottom: 55px;
}

.top_pro_ctr:hover{
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
    -webkit-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
    -moz-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
}

.top_pro_ctr img{
    width: 100%;
    height: 120px;
    object-fit: contain;
}



.top_p_name{
    color: #3d3d3d;
    font-family: medium;
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 0;
    min-height: 55px;
    height: auto;
    overflow: hidden;
    word-break: break-word;
    line-height: 1.25;
}

.top_p_name_recommended{
    color: #3d3d3d;
    font-family: medium;
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 0;
    min-height: 55px;
    height: auto;
    overflow: hidden;
    word-break: break-word;
    line-height: 1.25;
}

.top_p_name span{
    font-size: 10px;
    font-family:bold;
    color:lightgray;
}

.top_p_price{
    font-family:bold;
    font-size:16px;
    color:black;
}

.top_btn, .top_btn_new {
    font-family: bold;
    background: #a3e635;
    padding: 10px 10px;
    font-size: 10px;
    letter-spacing: 1px;
    color: black;
    text-decoration: none;
    cursor: pointer;
    position: absolute;
    bottom: 20px;
    width: 100px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    text-align: center;
    border: none;
    box-sizing: border-box;
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.top_pro_ctr:hover .top_btn_new, 
.top_btn_new:hover,
.hot_ctr_pro:hover .top_btn,
.recommend_ctr_pro:hover .top_btn,
.top_btn:hover {
    background-color: #17191d;
    color: #a3e635;
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0 4px 12px rgba(23, 25, 29, 0.3);
}


#hot_rec_ctr{
    width:100%;
    height:auto;
    display:inline-block;
}

#hot_ctr{
    width:200px;
    padding:25px;
    background: #22252b;
    float:left;
    height:auto;
}

#hot_ctr h2{
    text-transform: uppercase;
    font-family: bold;
    font-size: 1.3em;
    letter-spacing: 1px;
    display: inline-block;
    margin-top: 10px;
    color:white;
}

.hot_ctr_pro{
    width: 200px;
    padding: 0 0 65px 0; /* Add bottom padding to prevent overlap with the absolutely positioned button */
    text-align: center;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-sizing: border-box;
}

.hot_ctr_pro img{
    width: 100%;
    height: 130px;
    object-fit: contain;
}

.hot_p_name {
    color: #ffffff;
    font-family: medium;
    font-size: 14px;
    margin-top: 5px;
}

.hot_p_name span{
    font-size: 10px;
    font-family:bold;
}

.hot_p_price {
    font-family: bold;
    font-size: 12px;
    color: #a3e635;
    margin-bottom: 7px;
}

#recommend_ctr{
    width:700px;
    padding:25px;
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
    -webkit-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
    -moz-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
    background:white;
    float:right;
}

#recommend_ctr h2{
    text-transform: uppercase;
    font-family: bold;
    font-size: 1.3em;
    letter-spacing: 1px;
    display: inline-block;
    margin-top: 10px;
}

.recommend_ctr_pro{
    width:130px;
    padding:14px;
    /*background:red;*/
    text-align:center;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-height: 280px;
    height: auto;
    padding-bottom: 55px;
    position: relative;
}

.recommend_ctr_pro:hover{
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
    -webkit-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
    -moz-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
}

.recommend_ctr_pro img{
    width:100%;
    height: 110px;
    object-fit: contain;
}

.recommend_p_price{
    font-family:bold;
    font-size:12px;
    color:black;
}

.discount_recommend {
    color: #f14308;
    text-decoration: line-through;
    font-size: 8px;
    margin-right: 10px;
    font-family: medium;
}


#product_tile{
    margin-top: 0px;
    margin-bottom: 50px;
    width: 96%;
    height: auto;
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
    -webkit-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
    -moz-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
    padding: 2%;
}

#product_left{
    width:400px;
    height:auto;
    display: inline-block;
    float: left;
}

#product_left h1{
    font-family: bold;
    font-size: 20px;
    margin-top: 0;
    letter-spacing: 1px;
}

#product_left p{
    font-family:medium;
    margin-top:20px;
    margin-bottom:20px;
}

#product_cover_img, #product_cover_img_main{
    width:100%;
    height:auto;
    display:block;
}

#black_hover{
    width:100%;
    height:100vh;
    position:fixed;
    background: #0000008f;
    top:0;
    display:none;
}

.img_hover_ctr{
    width:70%;
    margin:auto;
    margin-top:40px;
}

.close_img{
    color: black;
    background: #a3e635;
    padding: 12px;
    border-radius: 50px;
    cursor: pointer;
    transition: 0.5s;
    position: absolute;
    margin-left: 69%;
    margin-top: -20px;
    width: 15px;
    height: 16px;
    text-align: center;
    font-size: 16px;
}



.small_product_img{
    display:inline-block;
    width:25%;
}

#product_right{
    padding-left: 40px;
    width: 510px;
    height: auto;
    display: inline-block;
}

#product_right h2{
    font-family:bold;
    font-size:14px;
    margin-top:50px;
    color:#727272;
}

#product_right p{
    font-family: 'medium';
    font-size: 13px;
    margin-right: 50px;
    line-height: 18px;
    color: #2b2b2b;
}

#buy_ctr{
    width:100%;
    text-align:right;
}

.buy_btn{
    font-family: bold;
    background: #a3e635;
    padding: 10px 10px;
    font-size: 14px;
    letter-spacing: 1px;
    color: black;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    font-size: 16px;
}


.inline-group {
    padding: 5px;
    display: inline-flex;
    margin-right: 20px;
}

.inline-group .form-control {
  text-align: center;
}

.form-control{
    width: 30px;
    padding: 10px;
    background: #f3f3f3;
    border: 1px solid #dfdfdf;
    border-radius: 0;
}

.btn-outline-secondary{
    padding: 10px 5px;
    display: block;
    border: 1px solid #dfdfdf;
    color: #727272;
    cursor:pointer;
    background: #fff;
    font: inherit;
    line-height: 1;
}

.btn-outline-secondary:hover{
    color:black;
}

.form-control[type="number"]::-webkit-inner-spin-button,
.form-control[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#add_form{
    display: inline-block;
}



.action_btn{
    font-size: 20px;
    margin: 13px;
    float: left;
    color: #0f0f0f;
    cursor:pointer;
}

.technical_icon{
    width:20px;
    height:auto;
}

.tech_table{
    width: 80%;
    margin:auto;
    margin-top:50px;
    margin-bottom:30px;
}

.tech_table_text{
    width: 45%;
    font-family: medium;
    font-size: 13px;
}

.tech_table_tex2{
    width: 50%;
    font-family: 'light';
    font-size: 12px;
}

.tech_table_img img{
    width: 20px;
    padding: 3px;
    display: block;
}

.tech_table_img{
    width:5%;
}

/* Technical Details Specs Grid */
.tech_details_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.tech_spec_card {
    background: #ffffff;
    border: 1px solid #e1e1e1;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.tech_spec_card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #17191d;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tech_spec_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    border-color: #a3e635;
}

.tech_spec_card:hover::before {
    opacity: 1;
}

.tech_spec_icon_ctr {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(163, 230, 53,0.15) 0%, rgba(23, 25, 29,0.08) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.tech_spec_card:hover .tech_spec_icon_ctr {
    transform: rotate(15deg) scale(1.1);
}

.tech_spec_icon_ctr i {
    font-size: 24px;
    color: #17191d;
}

.tech_spec_info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.tech_spec_label {
    font-family: bold;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #a3e635;
    text-transform: uppercase;
}

.tech_spec_text {
    font-family: light;
    font-size: 14px;
    color: #3d3d3d;
    margin: 0;
    line-height: 20px;
}

/* Currency Selector Dropdown Custom Styling */
.currency_select {
    font-family: medium;
    font-size: 13px;
    color: #a3e635;
    background: #17191d;
    border: 1px solid #a3e635;
    border-radius: 4px;
    padding: 6px 10px;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
}

.currency_select:hover, .currency_select:focus {
    color: #17191d;
    background: #a3e635;
    border-color: #17191d;
}


#newsletter_ctr_one{
    width:100%;
    height:100vh;
    /*
    background-image:url('../img/newsletter_bg_one.png');
    */
    background-image:url('../img/history_bg.jpg');
    background-size:cover;
    background-attachment:fixed;
    background-position:center;
    display: flex;
    align-items: center;
}

#collaboration_ctr_one{
    width:100%;
    height:100vh;
    background-image:url('../img/collabor_bg_one.png');
    background-size:cover;
    background-attachment:fixed;
    background-position:center;
    display: flex;
    align-items: center;
}

#collaboration_ctr_two{
    width: 100%;
    height: auto;
    background-image: url(../img/collabor_bg_two.png);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    padding-top: 100px;
    padding-bottom: 100px;
}

#landing_content_alap{
    width:40%;
    height:auto;
    margin-left:5%;
}

#landing_content_alap_masik{
    width: 40%;
    height: auto;
    margin-right: 5%;
    float: right;
    text-align: right;
    margin-left: 55%;
}

.focim{
    color: #f04208;
    text-transform: uppercase;
    font-family: 'bold';
    font-size: 40px;
    letter-spacing: 1px;
}

.szoveg{
    font-family:medium;
    color:#424242;
    font-size: 0.8em;
    line-height: 1.3em;
    font-family: light;
    text-align: justify;
}

#categrory_ctr{
            display: flex;
}

#category_img_two{
    width: 40%;
    padding: 5%;
}


#category_h1{
    color: #17191d;
    font-family: bold;
    margin-bottom: 30px;
}

#category_desc{
    display: inline-block;
    text-decoration: none;
    text-align: justify;
    line-height: 18px;
    color: #2b2b2b;
    font-family: medium;
    font-size: 13px;
    margin-top: 5px;
}

#category_product_ctr{
    display: table; /* Make the container element behave like a table */
    width: 100%; /* Set full-width to expand the whole page */
}

#category_side_bar{
    width:220px;
    border-right:1px solid #d8d8d8;
}

#category_side_bar,#category_main_ctr{
      display: table-cell;
    vertical-align: top;
}


.top_pro_chat_ctr{
    width: 28%;
    padding: 2%;
    text-align: center;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 56px;
    min-height: 380px;
    height: auto;
    position: relative;
}

.top_pro_chat_ctr:hover{
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
    -webkit-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
    -moz-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
}

.top_pro_chat_ctr img{
    width: 100%;
    height: 180px;
    object-fit: contain;
}

.pro_chat_btn{
    font-family: bold;
    background: #a3e635;
    padding: 10px 10px;
    font-size: 11px;
    letter-spacing: 1px;
    color: black;
    text-decoration: none;
    cursor: pointer;
    position: absolute;
    bottom: 20px;
    width: 100px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    text-align: center;
    border: none;
    box-sizing: border-box;
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.top_pro_chat_ctr:hover .pro_chat_btn, .pro_chat_btn:hover {
    background-color: #17191d;
    color: #a3e635;
    box-shadow: 0 4px 10px rgba(23, 25, 29, 0.3);
}


#login_ctr, #reg_ctr{
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: #0000009c;
    z-index: 100;
    text-align:left;
    overflow:scroll;
    display:none;
    z-index: 100000;
}

#login_form_ctr{
    width: 500px;
    padding: 50px;
    background: white;
    margin: auto;
    margin-top: 5vh;
    color:#2b2b2b;
}

#login_form_ctr h1{
    font-family: bold;
    width: 100%;
    text-align: left;
    margin-top: 50px;
    display: block;
}

#login_form_ctr h3{
    font-family: medium;
    
}

.close_login{
    color: black;
    background: #a3e635;
    padding: 12px;
    border-radius: 50px;
    cursor: pointer;
    margin-right: -5%;
    margin-top: -5%;
    width: 15px;
    height: 16px;
    text-align: center;
    font-size: 16px;
    float: right;
}

.mobil_close_login{
    
}

#login_form label{
    display:block;
    font-family:bold;
    line-height: 50px;
}

#login_form input{
    width: 448px;
    padding: 24px;
    font-size: 16px;
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
    -webkit-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
    -moz-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
    border: 1px solid #c5c5c5;
    border-radius: 0;
}

.forgot_pass{
    font-family: medium;
    color: #ea3512;
    font-size: 12px;
    margin-top: 10px;
    display: block;
    text-decoration: none;
}

.product_dot{
    position: absolute;
    padding: 5px;
    background: #e21d12;
    color: white;
    border-radius: 20px;
    width: 11px;
    height: 11px;
    font-size: 10px;
    font-family: 'medium';
    text-align: center;
    margin-left: -12px;
    margin-top: -5px;
}

.cart_productname{
    font-family: medium;
    color: #2b2b2b;
    text-decoration: none;
    font-size: 14px;
    padding: 10px;
    display: block;
}

.price{
    font-family: 'medium';
    font-size: 13px;
    text-transform: uppercase;
    color: #4f4f4f;
}

.price_count{
    font-family: 'bold';
    font-size: 20px;
    padding: 10px;
    color: #2b2b2b;
}

.remove{
    color: red;
    padding: 10px;
    font-family: medium;
    text-decoration: none;
    font-size: 13px;
}


.update_btn{
    font-family: bold;
    background: #a3e635;
    padding: 10px 20px;
    font-size: 12px;
    letter-spacing: 1px;
    color: #17191d;
    text-decoration: none;
    cursor: pointer;
    border: 0;
}

.text_subtotal{
    font-family: medium;
    font-size: 13px;
    text-transform: uppercase;
    color:#4f4f4f;
}

.price_subtotal{
    font-family: 'bold';
    color: #000000;
    margin-left: 20px;
    font-size: 30px;
}

.subtotal{
    margin-top: 30px;
    width: 100%;
    text-align: right;
    margin-bottom: 30px;
}

#return_customer{
    width:100%;
    text-align:right;
    padding-top:30px;
    padding-bottom:30px;
}

#return_customer span{
    font-family: 'medium';
    font-size: 14px;
    margin-right: 20px;
}

.vasarlas_h3{
    font-family: 'medium';
    color: #2b2b2b;
}

#order_form input {
    width: 500px;
    padding: 14px;
    font-size: 16px;
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
    -webkit-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
    -moz-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 19%);
    border: 1px solid #c5c5c5;
    border-radius: 0;
}

#order_form label{
    display: block;
    font-family: bold;
    line-height: 50px;
}

#mobil_login{
    display: none;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 22px 0px;
    background: #17191d;
    
    position: fixed;
    bottom: 0;
    z-index: 1000;
}

.mobil_login{
    text-align: center;
    width: 33%;
    font-family: 'medium';
    font-size: 13px;
    text-decoration:none;
    color: white;
}

#mobil_lenyilo{
    width: 90%;
    padding:5%;
    background: white;
    height: 100vh;
    z-index: 10000;
    position: fixed;
    left: -100%;
    top: 0;
    transition: 0.3s;
    display:none;
    overflow: scroll;
}

.mobilclose{
    font-family: light;
    text-align: center;
    display: inline-block;
    line-height: 1.4rem;
    float: right;
    cursor: pointer;
}

.cart_thead{
    font-family: bold;
    font-size: 13px;
    color: #4f4f4f;
}

.cart_table{
    width:100%;
}

#footer_link{
    width: 90%;
    padding: 10px 2% 2% 2%;
    margin: auto;
    display: block;
    text-align: center;
    font-family: medium;
    font-size: 0.7rem;
}

#footer_link a{
    text-decoration:none;
    color:black;
    margin-left:10px;
    margin-right:10px;
}


.profil_menu {
    font-size: 0.9rem;
    font-weight: 500;
    color: #565656;
    display: block;
    text-decoration: none;
    cursor: pointer;
    font-family: 'light';
    line-height: 2.4rem;
}

.reglabel {
    display: block;
    text-align: left;
    font-weight: 500;
    color: #000000;
    line-height: 30px;
    font-size: 1rem;
    width: 80%;
    font-family: 'light';
}

.profilh2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #565656;
    margin-bottom: 50px;
    font-family:medium;
}

.padding40 {
    padding: 40px;
}


.contact_input_form {
    width: 100%;
    background: #f4f4f4;
    border: 0;
    padding: 10px 15px;
    margin-bottom: 20px;
}

#msg_cover{
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 1000001;
    background: #00000080;
    top: 0;
    right: 0;
}

#login_ctr_msg{
    padding: 50px;
    background: white;
    margin: auto;
    width: 450px;
    border-radius: 3px;
    box-shadow: 0px 0px 7px 0px #00000040;
    margin-top: 20vh;
    font-family:light;
}

#delivery_section{
    display:none;
}

/* --- INVENTORY MODAL OVERLAY --- */
.inventory-modal-overlay {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.3s ease;
    opacity: 0;
}

.inventory-modal-overlay.show {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.inventory-modal-content {
    background: #17191d;
    border: 2px solid #a3e635;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    color: white;
    padding: 30px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    position: relative;
    transform: translateY(-20px);
    transition: transform 0.3s ease;
    font-family: light;
}

.inventory-modal-overlay.show .inventory-modal-content {
    transform: translateY(0);
}

.inventory-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    color: #a3e635;
    font-size: 24px;
    font-family: bold;
    cursor: pointer;
    transition: color 0.2s ease;
}

.inventory-modal-close:hover {
    color: #fff;
}

.inventory-modal-icon {
    font-size: 50px;
    color: #a3e635;
    margin-bottom: 20px;
    animation: bounceWarning 1s infinite alternate;
}

@keyframes bounceWarning {
    0% { transform: translateY(0); }
    100% { transform: translateY(-8px); }
}

.inventory-modal-title {
    font-family: bold;
    font-size: 20px;
    color: #a3e635;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.inventory-modal-text {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 25px;
}

.inventory-modal-btn {
    background-color: #a3e635;
    color: #17191d;
    border: none;
    padding: 12px 30px;
    border-radius: 4px;
    font-family: bold;
    font-size: 14px;
    cursor: pointer;
    text-transform: uppercase;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.inventory-modal-btn:hover {
    background-color: #fff;
    transform: scale(1.05);
}

/* --- PULSING INDICATOR --- */
.pulsing_stock_indicator {
    display: inline-flex;
    align-items: center;
    background: rgba(225, 29, 18, 0.1);
    color: #e11d12;
    border: 1px solid rgba(225, 29, 18, 0.3);
    padding: 6px 12px;
    border-radius: 20px;
    font-family: bold;
    font-size: 12px;
    text-transform: uppercase;
    margin-top: 10px;
    letter-spacing: 0.5px;
}

.pulsing_stock_dot {
    width: 8px;
    height: 8px;
    background-color: #e11d12;
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 0 0 rgba(225, 29, 18, 0.7);
    animation: pulsingDot 1.5s infinite;
}

@keyframes pulsingDot {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(225, 29, 18, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(225, 29, 18, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(225, 29, 18, 0);
    }
}

/* --- REVIEWS AND RATINGS SYSTEM --- */
.reviews-section-container {
    width: 100%;
    margin-top: 50px;
    margin-bottom: 50px;
    font-family: light;
}

.reviews-summary-dashboard {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 40px;
    align-items: center;
}

.reviews-average-card {
    text-align: center;
    border-right: 1px solid #eee;
    padding-right: 30px;
}

.reviews-average-num {
    font-family: bold;
    font-size: 64px;
    color: #17191d;
    line-height: 1;
    margin-bottom: 10px;
}

.reviews-average-stars {
    font-size: 22px;
    color: #a3e635;
    margin-bottom: 10px;
}

.reviews-average-label {
    font-family: medium;
    font-size: 13px;
    color: #777;
}

.reviews-breakdown-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reviews-breakdown-row {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #555;
    font-family: medium;
}

.reviews-breakdown-stars {
    width: 70px;
}

.reviews-breakdown-bar-bg {
    flex-grow: 1;
    height: 8px;
    background: #eaeaea;
    border-radius: 4px;
    margin-left: 15px;
    margin-right: 15px;
    position: relative;
    overflow: hidden;
}

.reviews-breakdown-bar-fill {
    height: 100%;
    background-color: #17191d;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.reviews-breakdown-count {
    width: 30px;
    text-align: right;
}

/* Review submission and card UI */
.reviews-grid-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
}

.review-list-title, .review-form-title {
    font-family: bold;
    font-size: 20px;
    color: #17191d;
    margin-bottom: 25px;
    border-bottom: 2px solid #17191d;
    padding-bottom: 10px;
}

.reviews-list-scroll {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 600px;
    overflow-y: auto;
    padding-right: 10px;
}

.review-card-item {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.review-card-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}

.review-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.review-card-author {
    font-family: bold;
    font-size: 15px;
    color: #333;
}

.review-card-date {
    font-size: 12px;
    color: #888;
}

.review-card-stars {
    color: #a3e635;
    font-size: 14px;
    margin-bottom: 10px;
}

.review-card-comment {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}

/* Custom interactive rating form */
.review-submit-form {
    background: #17191d;
    color: white;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.review-submit-form .review-form-title {
    color: #a3e635;
    border-bottom-color: #a3e635;
}

.review-form-group {
    margin-bottom: 20px;
}

.review-form-label {
    display: block;
    font-family: bold;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: #a3e635;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.review-form-input, .review-form-textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(163, 230, 53, 0.3);
    border-radius: 4px;
    padding: 12px;
    box-sizing: border-box;
    color: white;
    font-family: light;
    font-size: 14px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.review-form-input:focus, .review-form-textarea:focus {
    outline: none;
    border-color: #a3e635;
    background: rgba(255, 255, 255, 0.15);
}

.review-form-textarea {
    resize: vertical;
    height: 120px;
}

/* Interactive Star Rating Selector */
.star-rating-selector {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 6px;
    font-size: 28px;
}

.star-rating-selector input {
    display: none;
}

.star-rating-selector label {
    color: #777777;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.1s ease;
}

.star-rating-selector label:hover,
.star-rating-selector label:hover ~ label,
.star-rating-selector input:checked ~ label {
    color: #a3e635;
}

.star-rating-selector label:active {
    transform: scale(0.9);
}

.review-submit-btn {
    background-color: #a3e635;
    color: #17191d;
    border: none;
    padding: 14px 28px;
    border-radius: 4px;
    font-family: bold;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.review-submit-btn:hover {
    background-color: white;
}

.review-submit-btn:active {
    transform: scale(0.98);
}

/* Premium Page Preloader Overlay */
.preloader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #17191d; /* Dark Emerald Brand Green */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999; /* Higher than any modal or nav */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.preloader-overlay.fade-out {
    opacity: 0;
    visibility: hidden;
}

.preloader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

/* Pulsing (Breathing) GOAT Logo */
.preloader-logo-pulsing {
    width: 140px;
    height: auto;
    animation: breathing-logo 1.8s ease-in-out infinite;
    /* The comment said "Gold shadow" while the value was the lime green from
       the old wordmark. The logo is gold now, so the glow matches it. */
    filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.35));
}

/* Spinner decoration */
.preloader-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(212, 175, 55, 0.18);
    border-radius: 50%;
    border-top-color: #d4af37;
    animation: preloader-spin 1s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite;
}

/* The keyframes also set `filter`, and an animated property beats the static
   rule above — recolouring only that one left the glow green while the logo
   under it turned gold. */
@keyframes breathing-logo {
    0% {
        transform: scale(0.95);
        filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.25));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 25px rgba(212, 175, 55, 0.6));
    }
    100% {
        transform: scale(0.95);
        filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.25));
    }
}

@keyframes preloader-spin {
    to {
        transform: rotate(360deg);
    }
}


/* Premium Search Form Styles */
.search-form-wrapper {
    margin: 40px auto 50px auto;
    max-width: 650px;
    padding: 0 15px;
}

.search-form-container {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border: 2px solid #17191d; /* Brand Emerald Green */
    border-radius: 50px; /* Pill Capsule */
    padding: 6px 8px 6px 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-form-container:focus-within {
    border-color: #a3e635; /* Gold focus border */
    box-shadow: 0 6px 25px rgba(163, 230, 53, 0.25);
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    flex-grow: 1;
    gap: 14px;
}

.search-input-icon {
    font-size: 16px;
    color: #17191d;
    transition: color 0.3s ease;
}

.search-form-container:focus-within .search-input-icon {
    color: #a3e635; /* Gold focus icon */
}

.search-page-input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    padding: 10px 0;
    font-family: 'medium', sans-serif;
    font-size: 16px;
    color: #17191d;
}

.search-page-input::placeholder {
    color: #777777;
    font-family: 'light', sans-serif;
}

.search-page-btn {
    background-color: #17191d; /* Emerald Background */
    color: #a3e635; /* Gold text */
    border: none;
    border-radius: 50px;
    padding: 12px 30px;
    font-family: 'bold', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.1s ease;
}

.search-page-btn:hover {
    background-color: #a3e635; /* Gold Background */
    color: #17191d; /* Emerald text */
}

.search-page-btn:active {
    transform: scale(0.97);
}

/* Premium Search Result Header & Highlight */
.search-results-info {
    font-family: 'medium', sans-serif;
    font-size: 16px;
    color: #2b2b2b;
    margin-top: 10px;
    margin-bottom: 25px;
}

.search-highlight {
    font-family: 'bold', sans-serif;
    color: #17191d;
    padding: 2px 6px;
    background-color: rgba(163, 230, 53, 0.08);
    border-radius: 4px;
}

.search-count {
    font-family: 'light', sans-serif;
    color: #777;
    font-size: 14px;
    margin-left: 10px;
}

/* Premium Search Feedback Banners */
.search-info-msg, .search-error-msg {
    font-family: 'medium', sans-serif;
    font-size: 15px;
    padding: 18px 24px;
    border-radius: 12px;
    margin: 40px auto;
    max-width: 650px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.search-info-msg {
    background-color: #f3f3f3;
    color: #17191d;
    border: 1px solid rgba(23, 25, 29, 0.12);
}

.search-error-msg {
    background-color: #fff8f5;
    color: #b54a30;
    border: 1px solid rgba(181, 74, 48, 0.12);
}

/* Premium Product Overview Section (JSON-backed) */
.product-overview-section {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin: 50px auto;
    width: 96%;
    padding: 30px;
    background-color: #ffffff;
    box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    border-left: 4px solid #17191d; /* Emerald Brand Left Border */
}

.product-description-col {
    flex: 0 0 65%;
}

.product-description-col h2 {
    font-family: 'bold', sans-serif;
    color: #17191d;
    font-size: 1.35em;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.hr_top_left {
    height: 3px;
    border: 0;
    background: linear-gradient(90deg, #a3e635 0%, #17191d 100%);
    width: 150px;
    margin: 0 0 20px 0;
}

.product-long-description p {
    color: #4a4a4a;
    font-family: 'light', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 15px;
}

.product-badges-col {
    flex: 0 0 30%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    border-left: 1px dashed #e2e2e2;
    padding-left: 40px;
}

.badges-title {
    font-family: 'bold', sans-serif;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #17191d;
    margin-bottom: 10px;
}

.usage-badges-container, .tags-badges-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.usage-badge {
    background-color: #17191d; /* Emerald background */
    color: #a3e635; /* Gold text */
    border: 1px solid #a3e635;
    padding: 8px 16px;
    border-radius: 20px;
    font-family: 'medium', sans-serif;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(23, 25, 29, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.usage-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(23, 25, 29, 0.2);
}

.tag-badge {
    background-color: transparent;
    color: #17191d;
    border: 1.5px solid #17191d;
    padding: 6px 14px;
    border-radius: 20px;
    font-family: 'medium', sans-serif;
    font-size: 11px;
    transition: all 0.2s ease;
}

.tag-badge:hover {
    background-color: #a3e635;
    color: #17191d;
    border-color: #a3e635;
    transform: translateY(-2px);
}

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

#login_ctr_msg {

    width: 70%;
}
   
#menu_logo {
    margin-left: 5%;
}

#landing_content {
    width: 90%;}
    
#start_menu {
    display:none;
}

#login_ctr {
    display:none;
}

#landing_contenth1 {
    font-size: 1.7em;
}

#landing_hero {
    background-size: auto;
    background-position: center;
    background-attachment: inherit;
}

#second_left {
    display:none;
}

#second_right {
    width: 100%;
    height: auto;
    float: none;
}

#seconr_right_ctr {
    height: auto;
    width: 90%;
    margin-left: 5%;
}

#second_right h3 {
    width: 100%;
    color: #f04208;
    font-family: bold;
    text-transform: uppercase;
    opacity: 1;
    padding-top: 40px;
    margin-top: 20px;
    margin-bottom: 0;
    font-size: 15px;
}

#second_right h1 {
    width: 100%;
    color: white;
    font-family: bold;
    text-transform: uppercase;
    opacity: 1;
    padding-top: 0;
    margin-top: 10px;
}

#second_right p {
    width: 100%;
    color: #9c9d9d;
    font-size: 0.8em;
    line-height: 1.2em;
    font-family: light;
    padding-top: 0;
    opacity: 1;
}

.red_btn {
    margin-top: 10px;
    opacity: 1;
    margin-bottom: 50px;
}  

#third_3_4 {
    display:none;
}

#third_1_4 {
    width: 90%;
    height: auto;
    /* background: black; */
    display: block;
    margin-left: 5%;
    padding-top: 40px;
    position: absolute;
}

#third_btn {
    position: initial;
}

#third_1_4 h1 {
    opacity: 1;
    padding-top: 0;
    margin-bottom: 0;
}

#third_1_4 p {
    padding-top: 15px;
    opacity: 1;
    padding-bottom:10px;
}

/* Responsive Newsletter Overrides */
.newsletter-premium-section {
    min-height: auto;
    padding: 40px 0;
}

.newsletter-content-card {
    grid-template-columns: 1fr;
    gap: 35px;
    padding: 35px 20px;
    border-radius: 20px;
}

.newsletter-header-block {
    text-align: center;
}

.newsletter-subtitle {
    justify-content: center;
}

.newsletter-title {
    font-size: 26px !important;
    text-align: center;
    margin-bottom: 12px;
}

.newsletter-divider {
    margin: 0 auto 20px auto;
    background: linear-gradient(90deg, transparent, #a3e635 50%, transparent);
}

.newsletter-description {
    text-align: center;
    font-size: 13px;
}

.premium-input {
    padding: 14px 14px 14px 44px !important;
    font-size: 13px !important;
}

.input-icon {
    left: 16px;
    font-size: 14px;
}

.premium-submit-btn {
    padding: 14px 20px !important;
    font-size: 12px !important;
}

#fith_left h1 {
    opacity: 1;
    padding-top: 0;
}

.fith_tile_ctr {
    transition-delay: 0.8s;
    width: 100%;
    margin-right: 0;
    margin-top: 10px;
    display: block;
    padding-top: 50px;
    opacity: 1;
}

#footer_form {
    width: 90%;
}

#footer_alt p {
    color: #9c9d9d;
    width: 90%;
}

.contact_input {
    width: 96%;
     -webkit-box-shadow: 0px 0px 6px #00000033;
}

  
  
  
  
  
  
  
  
  
  
}

/* ==========================================================================
   Premium Glassmorphism Search Bar Styling
   ========================================================================== */
.premium-search-container {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(163, 230, 53, 0.25); /* elegant gold border tint */
    border-radius: 50px;
    padding: 2px 6px 2px 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 15px rgba(0, 0, 0, 0.2);
}

.premium-search-container:hover, 
.premium-search-container:focus-within {
    border-color: #a3e635; /* pure gold highlight */
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 0 15px rgba(163, 230, 53, 0.25);
    transform: translateY(-1px);
}

.premium-search-input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-family: 'medium', sans-serif !important;
    font-size: 14px !important;
    width: 220px !important;
    padding: 8px 0 !important;
    transition: width 0.3s ease;
}

.premium-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

.premium-search-btn {
    background: #a3e635 !important;
    border: none !important;
    outline: none !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-left: 10px !important;
    box-shadow: 0 2px 8px rgba(163, 230, 53, 0.3) !important;
}

.premium-search-btn:hover {
    background: #ffffff !important;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.4) !important;
}

.premium-search-btn i {
    color: #17191d !important;
    font-size: 14px !important;
}

/* ===== Header quick-nav (kategoria gyorslinkek a fejlecben) ===== */
#header_quicknav{
    display: inline-flex;
    gap: 28px;
    margin-left: 48px;
    vertical-align: middle;
    align-items: center;
}
#header_quicknav a{
    color: #e9e7e1;
    text-decoration: none;
    font-family: bold;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
    transition: color .2s ease, border-color .2s ease;
    white-space: nowrap;
}
#header_quicknav a:hover{
    color: #a3e635;
    border-bottom-color: #a3e635;
}

/* ============================================================
   GOAT HEADER v3 — clean two-tier header (overrides old table/float)
   ============================================================ */

/* Tier 1 — utility strip */
.gh-utility{
    width: 100%;
    background: #101215;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-family: medium, sans-serif;
}
.gh-utility-inner{
    max-width: 1240px;
    margin: 0 auto;
    padding: 7px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.gh-util-promo{
    color: #c5cabf;
    font-size: 12.5px;
    letter-spacing: .3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gh-util-promo i{ color: #a3e635; margin-right: 6px; }
.gh-util-promo strong{ color: #a3e635; font-family: bold; }
.gh-util-right{
    display: flex;
    align-items: center;
    gap: 16px;
    white-space: nowrap;
}
.gh-util-link{
    color: #d7dbd0;
    font-size: 12.5px;
    text-decoration: none;
    cursor: pointer;
    transition: color .18s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.gh-util-link i{ font-size: 12px; }
.gh-util-link:hover{ color: #a3e635; }
.gh-util-ic{
    color: #d7dbd0;
    font-size: 13px;
    width: 26px; height: 26px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: all .18s ease;
}
.gh-util-ic:hover{ background: #a3e635; border-color: #a3e635; color: #101215; }
.gh-util-sep{ width: 1px; height: 16px; background: rgba(255,255,255,0.16); display: inline-block; }
.gh-util-cur select{
    background: transparent;
    color: #d7dbd0;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 4px;
    padding: 4px 8px;
    font-family: medium, sans-serif;
    font-size: 12px;
    cursor: pointer;
    outline: none;
}
.gh-util-cur select option{ color: #17191d; }

/* Tier 2 — main bar (override old table/float layout) */
#shop_menu{
    width: auto !important;
    max-width: 1240px;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center;
    gap: 32px;
    padding: 16px 24px !important;
    box-sizing: border-box;
}
.gh-logo{ flex: 0 0 auto; display: inline-flex; align-items: center; }
#menu_logo_shop{
    height: 60px !important;
    float: none !important;
    margin: 0 !important;
    display: block;
}

/* Search — big pill, grows to fill */
#shop_s.gh-search{
    flex: 1 1 auto;
    display: flex !important;
    align-items: center;
    background: #ffffff !important;
    border: 1.5px solid rgba(163,230,53,0.35) !important;
    border-radius: 40px !important;
    padding: 5px 6px 5px 20px !important;
    height: auto !important;
    max-width: 620px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06) !important;
    transition: border-color .25s ease, box-shadow .25s ease !important;
    box-sizing: border-box !important;
}
#shop_s.gh-search:focus-within{
    border-color: #a3e635 !important;
    box-shadow: 0 0 0 4px rgba(163,230,53,0.15), 0 6px 20px rgba(0,0,0,0.08) !important;
}
.gh-search-ic{ color: #9aa08f; font-size: 15px; margin-right: 12px; flex: 0 0 auto; }
#shop_s.gh-search input{
    flex: 1 1 auto;
    width: auto !important;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 10px 0 !important;
    font-family: medium, sans-serif !important;
    font-size: 14px !important;
    color: #23261f !important;
}
#shop_s.gh-search input::placeholder{ color: #9aa08f !important; }
.gh-search-btn{
    flex: 0 0 auto;
    background: #a3e635;
    color: #101215;
    border: 0;
    border-radius: 32px;
    padding: 11px 26px;
    font-family: bold, sans-serif;
    font-size: 13px;
    letter-spacing: .4px;
    cursor: pointer;
    transition: background .2s ease, transform .1s ease;
}
.gh-search-btn:hover{ background: #b8f04f; }
.gh-search-btn:active{ transform: scale(.97); }
.gh-search-btn-ic{ display: none; }

/* Cart action */
.gh-actions{ flex: 0 0 auto; display: flex; align-items: center; gap: 18px; }
.gh-cart{
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: #ffffff;
    padding: 6px 6px 6px 4px;
    transition: color .18s ease;
}
.gh-cart:hover{ color: #a3e635; }
.gh-cart-ic{
    position: relative;
    width: 46px; height: 46px;
    background: #a3e635;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #101215;
    font-size: 17px;
    transition: background .18s ease;
}
.gh-cart:hover .gh-cart-ic{ background: #b8f04f; }
.gh-cart-ic .product_dot{
    position: absolute;
    top: -4px; right: -4px;
    background: #17191d;
    color: #a3e635;
    font-family: bold, sans-serif;
    font-size: 11px;
    min-width: 20px; height: 20px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 5px;
    border: 2px solid #a3e635;
}
.gh-cart-txt{
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    font-family: light, sans-serif;
    font-size: 12px;
    color: #b7bcae;
}
.gh-cart-txt strong{ font-family: bold, sans-serif; font-size: 15px; color: #ffffff; }
.gh-cart:hover .gh-cart-txt strong{ color: #a3e635; }

/* Tier 3 — category bar widen + inline quicknav */
#szallag_menu{ width: auto !important; max-width: 1240px !important; padding: 0 24px; box-sizing: border-box; }
.gh-catnav{
    display: inline-flex;
    align-items: center;
    gap: 26px;
    margin-left: 30px;
    vertical-align: middle;
}
.gh-catnav a{
    color: #e9e7e1 !important;
    text-transform: uppercase;
    font-family: medium, sans-serif;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
    transition: color .18s ease, border-color .18s ease;
    white-space: nowrap;
}
.gh-catnav a:hover{ color: #a3e635 !important; border-bottom-color: #a3e635; }

/* hide legacy header bits if any remain */
#header_quicknav, #telo_social, #shopmenu_info, #shop_search{ display: none !important; }

@media only screen and (max-width: 900px){
    .gh-catnav{ display: none; }
    .gh-util-promo{ display: none; }
}

/* ============================================================
   GOAT HOMEPAGE SECTIONS v3 — cats / benefits / cta / stats / reviews
   ============================================================ */
.gh-sec-head{ max-width: 720px; margin: 0 auto 42px; text-align: center; }
.gh-sec-kicker{ display:inline-block; font-family: bold, sans-serif; font-size: 12px; letter-spacing: 3px; color: #5a8f00; margin-bottom: 10px; }
.gh-sec-head h2{ font-family: bold, sans-serif; font-size: 33px; color: #17191d; margin: 0 0 12px; letter-spacing: .5px; }
.gh-sec-head p{ font-family: light, sans-serif; font-size: 15.5px; line-height: 1.6; color: #7a8172; margin: 0; }

/* full-bleed helper for sections inside the 1000px #shop_all_ctr */
.gh-cats, .gh-cta, .gh-reviews{
    position: relative; left: 50%; width: 100vw; margin-left: -50vw;
    box-sizing: border-box;
}

/* Category tiles */
.gh-cats{ background: #ffffff; padding: 74px 24px 64px; }
.gh-cats-grid{
    max-width: 1240px; margin: auto;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.gh-cat{
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    padding: 26px 22px; background: #fff;
    border: 1px solid #e6e8e2; border-radius: 15px;
    text-decoration: none; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.gh-cat:hover{ transform: translateY(-5px); border-color: #a3e635; box-shadow: 0 16px 34px rgba(0,0,0,0.09); }
.gh-cat-ic{
    width: 56px; height: 56px; border-radius: 13px;
    background: #f1f7e2; color: #5a8f00;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; margin-bottom: 10px; transition: background .22s ease, color .22s ease;
}
.gh-cat:hover .gh-cat-ic{ background: #a3e635; color: #101215; }
.gh-cat-name{ font-family: bold, sans-serif; font-size: 16px; color: #1c1f18; }
.gh-cat-sub{ font-family: light, sans-serif; font-size: 12.5px; color: #8a9080; }

/* Benefits strip (dark rounded band) */
.gh-benefits{
    max-width: 1000px; margin: 8px auto 0;
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 22px;
    background: #17191d; border-radius: 16px; padding: 26px 38px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.10);
}
.gh-benefit{ display: flex; align-items: center; gap: 14px; flex: 1 1 200px; min-width: 190px; }
.gh-benefit > i{
    font-size: 22px; color: #a3e635;
    width: 46px; height: 46px; flex: 0 0 auto;
    background: rgba(163,230,53,0.12); border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
}
.gh-benefit-tx{ display: flex; flex-direction: column; line-height: 1.35; }
.gh-benefit-tx strong{ font-family: bold, sans-serif; font-size: 14.5px; color: #ffffff; }
.gh-benefit-tx span{ font-family: light, sans-serif; font-size: 12.5px; color: #a7ada0; }

/* Motivational gym CTA banner */
.gh-cta{
    margin-top: 60px;
    background-color: #101215;
    background-size: cover; background-position: right 22%;
    min-height: 470px; display: flex; align-items: center; overflow: hidden;
}
.gh-cta::before{
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(12,14,16,0.94) 0%, rgba(12,14,16,0.78) 42%, rgba(12,14,16,0.20) 72%, rgba(12,14,16,0.05) 100%);
}
.gh-cta-inner{ position: relative; z-index: 2; max-width: 1240px; width: 100%; margin: auto; padding: 60px 24px; }
.gh-cta-kicker{ display: inline-flex; align-items: center; gap: 7px; font-family: bold, sans-serif; font-size: 13px; letter-spacing: 2px; color: #a3e635; margin-bottom: 16px; }
.gh-cta h2{ font-family: bold, sans-serif; font-size: 46px; line-height: 1.08; color: #ffffff; margin: 0 0 18px; letter-spacing: .5px; }
.gh-cta h2 span{ color: #a3e635; }
.gh-cta p{ font-family: light, sans-serif; font-size: 16px; line-height: 1.65; color: #cdd2c6; max-width: 500px; margin: 0 0 28px; }
.gh-cta-btns{ display: flex; flex-wrap: wrap; gap: 14px; }
.gh-cta-btn{
    display: inline-flex; align-items: center; gap: 9px;
    background: #a3e635; color: #101215;
    font-family: bold, sans-serif; font-size: 14px; letter-spacing: .4px;
    padding: 15px 30px; border-radius: 40px; text-decoration: none;
    transition: background .2s ease, transform .1s ease;
}
.gh-cta-btn:hover{ background: #b8f04f; }
.gh-cta-btn:active{ transform: scale(.97); }
.gh-cta-btn.ghost{ background: transparent; color: #ffffff; border: 1.5px solid rgba(255,255,255,0.35); }
.gh-cta-btn.ghost:hover{ border-color: #a3e635; color: #a3e635; }

/* Stats band (lime) */
.gh-stats{
    max-width: 1000px; margin: 0 auto;
    display: flex; flex-wrap: wrap;
    background: #a3e635; border-radius: 0 0 16px 16px;
    padding: 26px 20px;
}
.gh-stat{ flex: 1 1 140px; text-align: center; padding: 6px 10px; }
.gh-stat strong{ display: block; font-family: bold, sans-serif; font-size: 34px; color: #101215; line-height: 1; }
.gh-stat span{ font-family: medium, sans-serif; font-size: 13px; letter-spacing: .5px; color: #2c3327; }

/* Reviews */
.gh-reviews{ background: #f6f7f4; padding: 74px 24px; margin-top: 10px; }
.gh-reviews-grid{ max-width: 1160px; margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.gh-review{
    background: #ffffff; border: 1px solid #e6e8e2; border-radius: 16px;
    padding: 30px 28px; display: flex; flex-direction: column; gap: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}
.gh-stars{ color: #f5b700; font-size: 14px; letter-spacing: 2px; }
.gh-review p{ font-family: light, sans-serif; font-size: 15px; line-height: 1.62; color: #3a3f34; margin: 0; flex: 1 1 auto; }
.gh-review-by{ display: flex; align-items: center; gap: 12px; }
.gh-review-av{
    width: 44px; height: 44px; border-radius: 50%;
    background: #17191d; color: #a3e635;
    font-family: bold, sans-serif; font-size: 18px;
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.gh-review-by strong{ display: block; font-family: bold, sans-serif; font-size: 14.5px; color: #1c1f18; }
.gh-review-by span{ font-family: light, sans-serif; font-size: 12.5px; color: #8a9080; }

@media only screen and (max-width: 1000px){
    .gh-cats-grid{ grid-template-columns: repeat(2, 1fr); }
    .gh-reviews-grid{ grid-template-columns: 1fr; }
    .gh-cta h2{ font-size: 34px; }
    .gh-benefits{ padding: 22px; }
}

/* Category bar — flex layout (fixes wrapping right-nav) */
#szallag_menu{ display: flex !important; align-items: center; flex-wrap: nowrap; }
.categories-menu-group{ flex: 0 0 auto; }
.gh-catnav{ flex: 1 1 auto; margin-left: 30px !important; overflow: hidden; }
.gh-rightnav{ flex: 0 0 auto; display: inline-flex; align-items: center; gap: 26px; margin-left: 26px; }
.gh-rightnav a{
    color: #cfd3c8 !important; text-transform: uppercase;
    font-family: medium, sans-serif; font-size: 12px; letter-spacing: 1.2px;
    text-decoration: none; padding: 4px 0;
    border-bottom: 2px solid transparent; transition: color .18s ease, border-color .18s ease;
    white-space: nowrap;
}
.gh-rightnav a:hover{ color: #a3e635 !important; border-bottom-color: #a3e635; }

/* Second CTA band variant — image left, text right */
.gh-cta.gh-cta-right{ background-position: left 22%; margin-top: 0; }
.gh-cta.gh-cta-right::before{
    background: linear-gradient(270deg, rgba(12,14,16,0.94) 0%, rgba(12,14,16,0.78) 42%, rgba(12,14,16,0.20) 72%, rgba(12,14,16,0.05) 100%);
}
.gh-cta.gh-cta-right .gh-cta-inner{ text-align: right; }
.gh-cta.gh-cta-right .gh-cta-inner p{ margin-left: auto; }
.gh-cta.gh-cta-right .gh-cta-btns{ justify-content: flex-end; }
@media only screen and (max-width: 1000px){
    /* Text moves left on mobile — flip the scrim opaque-left and shift the
       subject off the text side so the white heading stays readable. */
    .gh-cta.gh-cta-right{ background-position: right 22%; }
    .gh-cta.gh-cta-right::before{
        background: linear-gradient(90deg, rgba(12,14,16,0.92) 0%, rgba(12,14,16,0.80) 45%, rgba(12,14,16,0.45) 100%);
    }
    .gh-cta.gh-cta-right .gh-cta-inner{ text-align: left; }
    .gh-cta.gh-cta-right .gh-cta-inner p{ margin-left: 0; }
    .gh-cta.gh-cta-right .gh-cta-btns{ justify-content: flex-start; }
}

/* Category tiles with real product images */
.gh-cat{ padding: 0; overflow: hidden; align-items: stretch; gap: 0; }
.gh-cat-img{
    display: flex; align-items: center; justify-content: center;
    height: 162px; padding: 12px;
    background: #f5f7f1; border-bottom: 1px solid #edefe8; overflow: hidden;
    box-sizing: border-box;
}
.gh-cat-img img{ max-height: 134px; max-width: 78%; object-fit: contain; transition: transform .3s ease; }
.gh-cat:hover .gh-cat-img img{ transform: scale(1.07); }
.gh-cat-body{ padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 3px; }

/* Promo video band (full-bleed, 3:1) */
.gh-video{
    position: relative; left: 50%; width: 100vw; margin-left: -50vw;
    margin-top: 46px; line-height: 0; background: #0c0e10;
    box-sizing: border-box;
}
.gh-video-el{ display: block; width: 100%; height: auto; object-fit: cover; }

/* Our Story hero — readable dark scrim over the athlete background */
#newsletter_ctr_one #landing_content_alap{
    background: rgba(10,13,15,0.62);
    padding: 32px 40px;
    border-radius: 16px;
    box-shadow: 0 14px 44px rgba(0,0,0,0.28);
    color: #eef1ea;
}
#newsletter_ctr_one #landing_content_alap p{ color: #eef1ea; }
#newsletter_ctr_one .focim{ color: #a3e635; }

/* #TEAMGOAT community + Wellness bands (reuse .gh-cta) */
.gh-cta.gh-cta-team{ background-position: right center; }
.gh-cta.gh-cta-wellness{ background-position: right 18%; }

/* ============================================================
   Accessibility utilities (skip link, visually-hidden, focus)
   ============================================================ */
.gh-visually-hidden{
    position:absolute !important;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}
.skip-link{
    position:absolute;
    left:-9999px; top:0;
    z-index:100000;
    background:#17191d;
    color:#a3e635;
    padding:12px 20px;
    border-radius:0 0 8px 0;
    font-family:bold, sans-serif;
    font-size:14px;
    text-decoration:none;
}
.skip-link:focus{ left:0; }
/* Visible keyboard focus indicator (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible{
    outline:3px solid #17191d;
    outline-offset:2px;
}
/* Search controls sit on the lime button — use a dark ring instead of an outline */
.gh-search-btn:focus-visible,
.search-page-btn:focus-visible,
.premium-search-btn:focus-visible{
    outline:none;
    box-shadow:0 0 0 3px rgba(23,25,29,0.7);
}

/* ============================================================
   Parallax cinematic hero + parallax bands (redline-style)
   ============================================================ */
.gh-phero{
    position: relative;
    width: 100vw; left: 50%; margin-left: -50vw;
    min-height: 90vh;
    display: flex; align-items: center;
    overflow: hidden;
    background: #06090b;
}
/* Day / night crossfade layers (opacity driven by scroll via JS) */
.gh-phero-layer{
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center right;
    background-attachment: fixed;   /* parallax */
    will-change: opacity;
}
.gh-phero-day{ background-image: url('../img/beach1.jpg'); opacity: 1; }
/* The night layer is the SAME photo graded into a moonlit version (darkened,
   desaturated, cold blue wash). Using one image for both layers guarantees the
   day → night crossfade reads as the same scene turning to night — swapping in
   an unrelated dark photo here (as before) made the beach "morph" into a
   different picture mid-scroll. */
.gh-phero-night{
    background-image:
      linear-gradient(rgba(10,16,38,0.52), rgba(8,12,30,0.6)),
      url('../img/beach1.jpg');
    filter: brightness(0.48) saturate(0.55) contrast(1.06);
    opacity: 0;
}
/* Sun that sinks and recolours into a lime "moon" as you scroll into night */
.gh-phero-orb{
    position: absolute; z-index: 1; top: 11%; right: 15%;
    width: 120px; height: 120px; border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.92) 0%, rgb(255,209,90) 42%, rgba(255,209,90,0) 72%);
    filter: blur(1px); pointer-events: none;
    will-change: transform, background;
}
.gh-phero-overlay{
    position: absolute; inset: 0; z-index: 1;
    background:
      linear-gradient(90deg, rgba(6,9,11,0.94) 0%, rgba(6,9,11,0.78) 32%, rgba(6,9,11,0.28) 66%, rgba(6,9,11,0.12) 100%),
      linear-gradient(0deg, rgba(6,9,11,0.62) 0%, rgba(6,9,11,0) 42%);
}
.gh-phero-inner{
    position: relative; z-index: 2;
    max-width: 1240px; width: 100%; margin: auto; padding: 0 40px;
}
.gh-phero-kicker{
    display: inline-flex; align-items: center; gap: 14px;
    color: #a3e635; font-family: bold, sans-serif; font-size: 14px;
    letter-spacing: 3px; text-transform: uppercase; margin-bottom: 22px;
}
.gh-phero-kicker .gh-phero-line{ width: 46px; height: 3px; background: #a3e635; display: inline-block; }
.gh-phero-title{
    font-family: bold, sans-serif; text-transform: uppercase;
    font-size: clamp(46px, 8.4vw, 122px); line-height: 0.92; letter-spacing: -1px;
    margin: 0 0 24px; color: #fff; text-shadow: 0 6px 30px rgba(0,0,0,0.5);
}
.gh-phero-title .gh-fill{ color: #a3e635; }
.gh-phero-sub{
    color: #cfd4cb; font-family: 'regular', sans-serif;
    font-size: clamp(15px, 1.5vw, 20px); max-width: 560px; line-height: 1.55; margin: 0 0 34px;
}
.gh-phero-btns{ display: flex; gap: 16px; flex-wrap: wrap; }
.gh-phero-btn{
    display: inline-flex; align-items: center; gap: 10px;
    font-family: bold, sans-serif; font-size: 15px; letter-spacing: 1px; text-transform: uppercase;
    padding: 16px 32px; border-radius: 40px; text-decoration: none; transition: transform .2s, background .2s;
}
.gh-phero-btn.primary{ background: #a3e635; color: #14170f; }
.gh-phero-btn.primary:hover{ transform: translateY(-2px); background: #b6f24e; }
.gh-phero-btn.ghost{ background: rgba(255,255,255,0.08); color: #fff; border: 1.5px solid rgba(255,255,255,0.4); }
.gh-phero-btn.ghost:hover{ background: rgba(255,255,255,0.18); }
.gh-phero-scroll{
    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 2;
    color: rgba(255,255,255,0.72); font-family: bold, sans-serif; font-size: 11px; letter-spacing: 3px;
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none;
    animation: gh-phero-bob 1.8s ease-in-out infinite;
}
@keyframes gh-phero-bob{ 0%,100%{ transform: translateX(-50%) translateY(0);} 50%{ transform: translateX(-50%) translateY(7px);} }

/* Give the full-bleed CTA bands the same fixed-background parallax depth */
.gh-cta{ background-attachment: fixed; }

/* Mobile: fixed backgrounds are janky on iOS Safari — fall back to normal scroll */
@media (max-width: 900px){
    .gh-phero-layer{ background-attachment: scroll; }
    .gh-cta{ background-attachment: scroll; }
    .gh-phero{ min-height: 76vh; }
    .gh-phero-inner{ padding: 0 24px; }
    .gh-phero-scroll{ display: none; }
    .gh-phero-orb{ width: 84px; height: 84px; top: 9%; right: 10%; }
}

/* ---- Category listing: pager, counts and filter chrome ------------------ */
.cat-count { grid-column: 1 / -1; font-family: light; font-size: .85rem; color: #8b8f85;
             padding: 2px 4px 12px; }
.cat-empty { grid-column: 1 / -1; color: #555; font-family: light; padding: 30px 20px;
             text-align: center; line-height: 1.6; }
.cat-empty a { color: #17191d; font-family: bold; text-decoration: none; }
.cat-pager { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px;
             justify-content: center; align-items: center; padding: 26px 0 8px; }
.cat-page-btn { min-width: 38px; padding: 8px 12px; border: 1px solid #e4e6e0; background: #fff;
                border-radius: 8px; font-family: medium; font-size: .85rem; color: #17191d;
                cursor: pointer; transition: background .15s, border-color .15s; }
.cat-page-btn:hover:not(:disabled):not(.on) { background: #f4f7ee; border-color: #cfe08a; }
.cat-page-btn.on { background: #17191d; border-color: #17191d; color: #fff; cursor: default; }
.cat-page-btn:disabled,
a.cat-page-btn { text-decoration: none; display: inline-block; text-align: center; }
/* The category pager uses <button> (JS-driven); search.php uses <a> and <span>
   because it is a GET page and its paging must stay bookmarkable. Both need
   the same look, and :disabled does not apply to a span. */
.cat-page-btn:disabled, .cat-page-btn[aria-disabled="true"] { opacity: .38; cursor: not-allowed; }
span.cat-page-btn:not(.on):not([aria-disabled]) { cursor: default; }
.cat-page-gap { color: #a9ada2; padding: 0 2px; }
.cat-sort-select { width: 100%; padding: 8px 10px; border: 1px solid #e4e6e0; border-radius: 8px;
                   font-family: light; font-size: .85rem; background: #fff; color: #17191d; }
.cat-clear-btn { width: 100%; margin-top: 6px; padding: 9px 12px; border: 1px solid #e4e6e0;
                 background: #fff; border-radius: 8px; font-family: medium; font-size: .8rem;
                 color: #555; cursor: pointer; }
.cat-clear-btn:hover { background: #f7f7f5; }
.filter-count { color: #a9ada2; font-size: .78rem; }
.filt-none { font-family: light; font-size: .7rem; color: #a9ada2; }
#listelement[aria-busy="true"] { opacity: .45; transition: opacity .12s; }
@media (max-width: 600px) {
    .cat-page-btn { min-width: 34px; padding: 7px 9px; font-size: .8rem; }
}

/* The gold logo's outer ring is a very light gold: on the dark header and the
   dark footer it reads perfectly, on the WHITE mobile drawer it washed out to
   almost nothing. Only the monogram survived. Rather than keep a second,
   darker artwork in sync, the one light-background placement gets the dark
   disc the logo was drawn for. */
.mobil-menu-logo {
    display: block;
    width: 40%;
    max-width: 150px;
    height: auto;
    margin: 3vh auto 0;
    padding: 10px;
    background: #17191d;
    border-radius: 50%;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
}

/* The struck-through figure must never appear as a bare number: unlabelled it
   reads as "our old price", which is the claim RDL 24/2021 regulates. The
   label names it as the manufacturer's recommendation instead. */
.rrp-label {
    text-decoration: none;
    display: inline-block;
    font-size: .85em;
    letter-spacing: .02em;
    opacity: .85;
    margin-right: 2px;
}

/* --- Badge-kezelő: termékcímkék -------------------------------- */
/* A .top_pro_chat_ctr már position:relative — a sarok-konténer ehhez rögzül. */
.card-badges {
    position: absolute; top: 8px; left: 8px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    z-index: 3; pointer-events: none;
}
.product-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: medium, sans-serif; font-size: 11px; line-height: 1;
    padding: 4px 8px; border-radius: 999px; white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.detail-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.detail-badges .product-badge { font-size: 12px; padding: 5px 10px; }