/* 
Theme Name:		STK THEME
Template:		hello-elementor
Version:		1.0.0
Text Domain:	stk-theme
*/


P:last-child { margin-bottom:0 }
.hideit { display:none !important}
.elementor-widget-text-editor LI { margin-bottom:5px }
.elementor-widget-text-editor H3 { margin:20px 0 10px }
.elementor-widget-text-editor H3 + UL, .elementor-widget-text-editor H3 + P { margin:-10px 0 20px }

.stktitle { font-family: var(--e-global-typography-8726bd9-font-family), Sans-serif }

.cocktail_wrap:hover .cocktail_title { bottom:-120px !important }
.cocktail_title { position:absolute; bottom:0; padding:10px; width:100%; transition:bottom 0.3s !important}

/* COOKIES */
.cky-title, .cky-preference-title, .cky-accordion-btn { font-family: "Bebas Neue", Sans-serif !important; font-size:24px !important; font-weight:400 !important; }
.cky-accordion-btn { font-size:18px !important }
.cky-notice-des *, .cky-preference-content-wrapper *, .cky-accordion-header-des *, .cky-gpc-wrapper .cky-gpc-desc *,
.cky-audit-table .cky-cookie-des-table { font-size:16px !important }
@media (max-width: 576px) {
    .cky-preference-center {
        max-height: 100dvh !important;
    }
}

/* HEADER */
#topheader { top:-250px !important; transition:top 0.3s; position: relative}
#topheader.elementor-sticky--effects { top:0 !important }
.topheader { height:100dvh !important }

.topheader.align-top-center { background-position:top center !important}
.topheader.align-center-center { background-position:center center !important}
.topheader.align-bottom-center { background-position:bottom center !important}


#video-bg-section:before { z-index:10 }

/* SOUND */
.player_volume { opacity:0.5; transition:opacity 0.3s; cursor:pointer }
.player_volume:hover { opacity:1 }
#player_volume_off { display:none }
@media (max-width:768px) {
	.player_volume { opacity:1 }
}

/* BUTTON */
.elementor-button { min-width:200px; position:relative}
BUTTON.age-gate__submit { min-width:120px; position:relative; font-weight:400; padding:6px 40px 3px !important}

.elementor-button:before, .elementor-button:after,
BUTTON.age-gate__submit:before, BUTTON.age-gate__submit:after {
    content:""; display:block;
	position:absolute; top:1px; left:0; width:100% !important; height:1px;
    background-image:url('img/btn-details.png');
	background-repeat: no-repeat;
    background-size:100% 100%;
	background-position: center
}
.elementor-button:after, BUTTON.age-gate__submit:after { top:calc(100% - 1px) !important }
.elementor-button a, BUTTON.age-gate__submit a { color:#FFF !important }

.stk_blue .elementor-button:before, .stk_blue .elementor-button:after { background-image:url('img/btn-details-blue.png') }
.stk_silver .elementor-button:before, .stk_silver .elementor-button:after { background-image:url('img/btn-details-silver.png') }
.stk_gold .elementor-button:before, .stk_gold .elementor-button:after { background-image:url('img/btn-details-gold.png') }

BUTTON.age-gate__submit:before, BUTTON.age-gate__submit:after { background-image:url('img/btn-details-white.png') }

.age-gate__buttons { gap:40px }

/* STK FORM */
.stk-form .elementor-field-group { min-width:200px; position:relative}
.stk-form .elementor-field-group:before, .stk-form .elementor-field-group:after {
    content:""; display:block;
	position:absolute; top:1px; left:0; width:100%; height:2px;
    background-image:url('img/btn-details.png');
	background-repeat: no-repeat;
    background-size:100% 100%;
	background-position: center
}
.stk-form .elementor-field-group:after { top:calc(100% - 6px) }

.stk-form .elementor-field-type-acceptance label {font-family:inherit !important; color:#FFF; font-size:80% !important }
.stk-form .elementor-field-type-acceptance label a { text-decoration:underline }
.stk-form .elementor-field-type-acceptance:before, .stk-form .elementor-field-type-acceptance:after { display:none }

.stk-form .elementor-field-type-acceptance .elementor-field-option { display:flex; justify-content:flex-start; align-items: flex-start}

.stk-form .elementor-field-type-submit { width:auto !important; margin:20px auto 0 }
.stk-form .elementor-field-type-submit:before, .stk-form .elementor-field-type-submit:after { display:none }

.stk-form .elementor-field-type-recaptcha_v3:before, .stk-form .elementor-field-type-recaptcha_v3:after { display:none }


.stk-form input[type="checkbox"] { appearance: none; margin:-4px 0 0 }
.stk-form input[type="checkbox"]:before {	
	margin: 0 10px;
	font-family: 'Font Awesome 5 Free'; font-weight: 400; content:"\f0c8";
	color: var( --e-global-color-primary )
}
.stk-form input[type="checkbox"]:not(:disabled):checked:before {
	font-weight: 900; content:"\f14a"
}

/* BREVO FORM */
#sib-form  { font-family: "Bebas Neue", sans-serif }
.sib-form, #sib-container, .sib-form-block { padding:0 !important }
.sib-form INPUT { 
    color:#FFF !important; padding:8px 20px !important; font-size: 24px !important; font-weight: 400 !important; line-height: 1.4em !important; letter-spacing: 1px !important ;
    background:none !important; outline:0 !important; border:0 none !important
}

.sib-sms-input-wrapper { padding:6px 20px !important }
.sib-sms-input-wrapper INPUT { padding:0 !important  }

.sib-sms-select { display:flex !important }
.sib-sms-select__title { 
    max-width: 50px !important;
    background:none !important; outline:0 !important; border:0 none !important; margin:0 !important; padding:0 !important
}
.sib-sms-select__title::after { border-top-color:#FFF !important }
.sib-sms-select__title>.sib-sms-select__label-text {display: none !important }
.sib-sms-select__calling-code { width:50px !important }
.sib-sms-select__number-input { background:none !important; outline:0 !important; border:0 none !important }

.sib-form .checkbox, .sib-form .radio-button {     
    background:var(--e-global-color-primary) !important;
    border-color: var(--e-global-color-primary) !important;
}
.sib-form .input_replaced:checked+.checkbox_tick_positive {
    background:var(--e-global-color-primary) !important;
    border-color: var(--e-global-color-primary) !important;
}
.sib-form .checkbox_tick_positive:before {border-color: var(--e-global-color-primary) !important; }
.sib-form .input_replaced:checked+.checkbox_tick_positive:before{border-color: #FFF !important;}

.sib-form .entry__field { background:none !important; outline:0 !important; border:0 none !important }
.sib-form TEXTAREA:focus, .sib-form INPUT:focus{ outline: 0 !important }

.sib-form-block__button {margin-top:20px !important}

.sib-col6 { width:calc(50% - 2px); display:inline-block }

@media (max-width:480px) {
    .sib-col6 { width:100%; display:block }
    .sib-sms-select__title { display:flex !important }
    .sib-sms-select__title>.sib-flag { margin:0 !important }
    .sib-sms-select__title::after { right:2px !important; top:15px !important }
}


/* MARQUEE */
.marquee { overflow: hidden; display: flex }
.marquee H2 { white-space: nowrap; color:var( --e-global-color-text ) !important }

/* HOMESLIDER */
#sliderWrapper { position:relative }
/**************/
body:not(.elementor-editor-active) .content_stk { display:none !important }

#mainSlider { width: 100%; height:calc(100vh - 90px) }
#mainSlider .stk_btn { margin-top:auto }

#mainSlider .swiper-slide { 
	width:100%; height:100%; padding:30px 5px;
	background-position:bottom center; background-size:cover;
}
#mainSlider .swiper-slide > div { 
	max-width:600px; height:100%; margin:0 auto;
	color:#FFF;
	display:flex; flex-direction:column; justify-content:center; align-items:center; gap:0;
}


#mainSlider .stk_red { background-image:url("/wp-content/uploads/bg-red.jpg") }
#mainSlider .stk_blue { background-image:url("/wp-content/uploads/bg-blue.jpg") }
#mainSlider .stk_silver { background-image:url("/wp-content/uploads/bg-silver.jpg") }
#mainSlider .stk_gold { background-image:url("/wp-content/uploads/bg-gold.jpg") }

@media (max-width:767px){
	#mainSlider .stk_red { background-image:url("/wp-content/uploads/bg-red-mobile.jpg") }
	#mainSlider .stk_blue { background-image:url("/wp-content/uploads/bg-blue-mobile.jpg") }
	#mainSlider .stk_silver { background-image:url("/wp-content/uploads/bg-silver-mobile.jpg") }
	#mainSlider .stk_gold { background-image:url("/wp-content/uploads/bg-gold-mobile.jpg") }
}

/**************/
#wolfSlider { 
	position:absolute; z-index:10; overflow:visible;
	left:0; top:calc(50% + 20px); transform:translateY(-50%);
	max-width:55vw; margin:0;
	pointer-events: none !important;
}
#wolfSlider * { pointer-events: none !important }
#wolfSlider .swiper-wrapper { overflow:hidden }
#wolfSlider .swiper-slide { width:55vw !important }

#wolfSlider .swiper-slide > DIV { 
	position: relative; 
	width:110vw; height:136.5517vw; 
	max-height:80vh; 
	transform:translateX(-50%); 	
	background-size:contain; background-repeat: no-repeat; background-position:center 
}
#wolfSlider .swiper-slide.stk_red > DIV { background-image:url("img/wolf-red.png") }
#wolfSlider .swiper-slide.stk_blue > DIV { background-image:url("img/wolf-blue.png") }
#wolfSlider .swiper-slide.stk_silver > DIV { background-image:url("img/wolf-silver.png") }
#wolfSlider .swiper-slide.stk_gold > DIV { background-image:url("img/wolf-gold.png") }

#wolfSlider .swiper-slide VIDEO { 
	position:absolute; left:50%; transform:translateX(-50%) translateZ(0);
	border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; display: block;
	image-rendering: smooth;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
#wolfSlider .swiper-slide.stk_red VIDEO {
	top:15.8333%;
	width:70.5517vw; height:64.2930vw; 
	max-height:37.6666vh; 		
}
#wolfSlider .swiper-slide.stk_blue VIDEO {
	top:16.25%;
	width:71.6896vw; height:65.2413vw; 
	max-height:38.2222vh; 		
}
#wolfSlider .swiper-slide.stk_silver VIDEO {
	top:19.8611%;
	width:72.8275vw; height:66.3792vw; 
	max-height:38.8888vh; 		
}
#wolfSlider .swiper-slide.stk_gold VIDEO {
	top:20.2777%;
	width:71.3103vw; height:65.0516vw; 
	max-height:38.1111vh; 		
}

#wolfSlider .swiper-button-prev { 
	position:absolute; z-index:100; width:45px; height:45px; left:0; background:url("img/slider-arrow-prev.png") no-repeat left center; background-size: contain;
	pointer-events: auto !important
}
#wolfSlider .swiper-button-next { 
	position:absolute; z-index:100; width:45px; height:45px; left:calc(100svw - 45px); 
	background:url("img/slider-arrow-next.png") no-repeat right center; background-size: contain;
	pointer-events: auto !important
}
#wolfSlider .swiper-button-prev:after, #wolfSlider .swiper-button-next:after { content:"" !important }

/**************/
#bottleSlider {
	position:absolute; z-index:5; 
	top:calc(50% + 20px); right:10vw; transform:translateY(-50%);
	max-width:35vw; margin:0;
	mask-image: url('/wp-content/uploads/sticla-baza.png');
  	mask-size: contain;
	pointer-events: none !important;
	overflow:hidden
}
/*#bottleSlider * { pointer-events: none !important }*/
#bottleSlider.hide #bottle_empty, #bottleSlider.hide .swiper-wrapper.hide { opacity:0 }
#bottle_empty { position:absolute; left:2px }
#bottle_gold { 
	position:absolute; z-index:6;
	opacity:0;
	transition:opacity 0.3s;
}
#bottle_gold.show { opacity:1 }


/****************/
/* PRODUSE PAGE */
.produse_page #mainSlider { height:100dvh }
.produse_page #mainSlider .swiper-slide > div { justify-content:flex-end }
.produse_page #mainSlider .stk_btn { margin-top:20px }

.produse_page #wolfSlider { top:50% }
.produse_page #bottleSlider { top:calc(50% - 20px); max-width:35vw }

/****************/
@media (min-width:768px) {
	#mainSlider .swiper-slide { padding-left:calc(59vh + 40px); padding-right:100px }
	#mainSlider .swiper-slide > div { justify-content:center }
	#mainSlider .stk_btn { margin-top:40px }
	
	#wolfSlider .swiper-button-prev { width:80px; height:80px; left:calc(36vh - 40px); }
	#wolfSlider .swiper-button-next { width:80px; height:80px; left:calc(100vw - 100px)  }	
	
	#bottleSlider { top:50% !important; height:80vh; width:23vh /* 29vh * 80vh */; right:auto; left:calc(36vh + 40px) }
	#bottleSlider IMG { height:80vh; width:auto }	
	
	.produse_page #mainSlider .swiper-slide { justify-content:center }
	.produse_page #mainSlider .swiper-slide > DIV { justify-content:center }
}
/****************/


/****************/
/* PRODUSE */
.productpage #wolfSlider { top:50% }
.productpage #wolfSlider .swiper-wrapper { overflow:visible }
.productpage .bottle IMG { max-height:calc(100vh - 260px); width:auto}
@media (min-width:768px) {
	.productpage #wolfSlider { left:50%; transform:translate(-50%, -50%)}
	.productpage #wolfSlider .swiper-slide > DIV { transform:translateX(-25%)}
}
@media (max-width:768px) {
	.productpage .title { position:absolute; left:-50vw; width:calc(100vw - 40px); bottom:-70px}
}


/****************/
/* BASIC GALLERY */
.magazine_gallery .elementor-image-gallery { display:grid; grid-template-columns:repeat(5, 1fr); gap:20px }
.magazine_gallery figcaption { text-align:center }

@media(max-width:1024px) {
	.magazine_gallery .elementor-image-gallery { grid-template-columns:repeat(4, 1fr); }
}
@media(max-width:767px) {
	.magazine_gallery .elementor-image-gallery { grid-template-columns:repeat(3, 1fr); }
}
@media(max-width:480px) {
	.magazine_gallery .elementor-image-gallery { grid-template-columns:repeat(2, 1fr); }
}


/****************/
/* COCKTAIL FILTERS */
#cocktail_filters > div { flex-basis:100% }
.filter_cocktail { text-align:center}
.filter_name H3 { color:#FFF !important; font-size:22px !important; margin:0 !important; padding:10px 0 20px; position:relative; width:100%; cursor:pointer }
.filter_name H3:before, .filter_name H3:after {
    content:""; display:block;
	position:absolute; top:1px; left:0; width:100% !important; height:2px;
    background-image:url('img/btn-details.png');
	background-repeat: no-repeat;
    background-size:100% 100%;
	background-position: center
}
.filter_name H3:after { top:calc(100% - 15px) }

.filter_cocktail:hover .filter_choices { max-height:200px}

.filter_choices { background:var( --e-global-color-primary ); position: absolute; z-index:10; width:100%; overflow:hidden !important; max-height:0px; transition:max-height 0.3s }
.filter_choices .choice { margin:0; padding:4px; border-bottom:1px solid rgba(255,255,255,0.5); cursor:pointer; display:block }
.filter_choices .choice:last-child { border-bottom:0 none }

.filter_choices .choice H4 { color:#FFF !important; margin:0; padding:2px 0 0}
.filter_choices .choice:hover H4, .filter_choices .choice.current H4 { background:#FFF; color:var( --e-global-color-primary ) !important}
.filter_choices.clicked { max-height:0 !important }

.filter_selected { position:absolute; width:100%; pointer-events: none }
.filter_selected H4 { color:var( --e-global-color-primary ) !important; margin:0; padding:2px 0 0}

.filter_deselect { display:none; position:absolute; right:10px; top:55px; color:var( --e-global-color-primary ) !important; font-size:16px; pointer-events: auto; cursor:pointer}


#cocktails_list { width:100% }
#cocktails_list .elementor-grid { grid-template-columns: repeat(auto-fit, minmax(0, calc(25% - 20px)));  justify-content: center; max-width: 100%; gap:20px }
.cocktail { transform:scale(1); transition: transform 0.3s }
.cocktail.hide { transform:scale(0.001) }

@media (max-width:767px) {
	#cocktails_list .elementor-grid { grid-template-columns: repeat(auto-fit, minmax(0, calc(33.33% - 20px))); }
}
@media (max-width:480px) {
	#cocktails_list .elementor-grid { grid-template-columns: repeat(auto-fit, minmax(0, calc(50% - 20px))); }
}

/****************/
.cck_label { color:var( --e-global-color-primary ) !important; margin:30px 0 0 }
.cck_text { color:#FFF !important }

.cck_info { display:flex; gap:20px; max-width:600px; margin:0 auto}
.cck_info > div { flex-basis:100% }
.cck_filter_label, .cck_filter_text { color:#FFF !important; font-size:24px !important; margin:0 !important; padding:10px 0; position:relative; width:100%; text-align:center}
.cck_filter_label:after {
    content:""; display:block;
	position:absolute; top:calc(100% - 3px); left:0; width:100% !important; height:2px;
    background-image:url('img/btn-details-silver.png');
	background-repeat: no-repeat;
    background-size:100% 100%;
	background-position: center
}
.cck_filter_text { color:var( --e-global-color-primary ) !important}

@media (max-width:767px) {
	.cck_info { flex-direction:column; gap:10px}
}

.elementor-message { text-align: center; font-family: 'Bebas Neue'; margin: 0 auto; color: #FFF; padding: 20px }