/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.4.1750840478
Updated: 2025-06-25 10:34:38

*/

/* === 1. TABOVI: moderan underline stil === */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    gap: 30px;
    padding: 0;
    margin: 40px 0 20px 0;
    border-bottom: 2px solid #e0e0e0;
    list-style: none;
    background: transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    margin: 0;
    padding: 0;
    background: none !important;
    border: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: inline-block;
    padding: 10px 0;
    font-weight: 600;
    font-size: 15px;
    color: #444;
    border: none;
    border-bottom: 4px solid transparent;
    text-decoration: none;
    transition: all 0.3s ease;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #D3292D;
    border-bottom: 4px solid #D3292D;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active) a {
    border-bottom: 2px solid #e0e0e0;
}

/* === 2. PANEL: čisti sadržaj unutar tabova === */
.woocommerce div.product .woocommerce-tabs .panel {
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    font-size: 15px;
    color: #333;
}

/* === 3. TABLICE: bez pozadina, čista linija ispod reda === */
.woocommerce-product-attributes.shop_attributes,
.woocommerce-Tabs-panel table.shop_attributes,
.woocommerce-Tabs-panel table.utt-additional-info {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    background: transparent;
}

.woocommerce-product-attributes.shop_attributes tr,
.woocommerce-Tabs-panel table.shop_attributes tr,
.woocommerce-Tabs-panel table.utt-additional-info tr {
    border-bottom: 1px solid #e0e0e0;
    background: #fff !important; /* forsiramo bijelo, čak i za even */
}

/* === Poravnanja i stil === */
.woocommerce-product-attributes.shop_attributes th,
.woocommerce-Tabs-panel table.shop_attributes th,
.woocommerce-Tabs-panel table.utt-additional-info th {
    font-weight: 600;
    text-align: left;
    padding: 8px 0;
    color: #111;
    background: transparent;
    border: none;
    width: 160px;
    vertical-align: top;
}

.woocommerce-product-attributes.shop_attributes td,
.woocommerce-Tabs-panel table.shop_attributes td,
.woocommerce-Tabs-panel table.utt-additional-info td {
    padding: 8px 0;
    color: #333;
    background: transparent;
    border: none;
    vertical-align: top;
    text-align: right;
}

/* === PARRAFI unutar ćelija – bez margina === */
.woocommerce-product-attributes.shop_attributes td p,
.woocommerce-Tabs-panel table.shop_attributes td p,
.woocommerce-Tabs-panel table.utt-additional-info td p {
    margin: 0;
}

/* === Slike (ikone održavanja itd.) === */
.woocommerce-product-attributes.shop_attributes img,
.woocommerce-Tabs-panel table.shop_attributes img,
.woocommerce-Tabs-panel table.utt-additional-info img {
    max-height: 26px;
    margin-left: 6px;
    vertical-align: middle;
}

/* === FORSIRAJ BIJELU POZADINU ZA SVE REDOVE === */
.woocommerce table.shop_attributes tr:nth-child(even) td,
.woocommerce table.shop_attributes tr:nth-child(even) th {
    background: #fff !important;
}

/* === UKLANJANJE PRAZNINE između dviju tablica === */
.woocommerce-Tabs-panel table.utt-additional-info {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#tab-additional_information > *:last-child {
    margin-bottom: 0 !important;
}

body.single-product table.utt-additional-info {
	border-top: 0px !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	border: 0px !important;
}

.woocommerce-product-attributes-item--attribute_ {
	display: none !important;
}

/* Ukupna širina wrappera količine, staviti fiksnu širinu jednaku gumbu Dodaj u košaricu */
.woocommerce div.quantity {
  width: 160px !important; /* isti width kao gumb */
  display: flex !important;
  padding: 0 !important;
  margin-bottom: 15px !important;
}

/* Gumbići + i - i input - svi iste širine */
.woocommerce div.quantity button,
.woocommerce div.quantity input.qty {
  width: 7.5% !important; /* trećina ukupne širine */
  height: 40px !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
  margin: 2px !important;
  padding: 0px !important;
  font-size: 16px !important;
  text-align: center !important;
  line-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Dodatna stilizacija gumba + i - */
.woocommerce div.quantity button {
  background-color: #d9534f !important;
  color: white !important;
  border: none !important;
  cursor: pointer !important;
  font-weight: bold !important;
  user-select: none !important;
}

.woocommerce div.quantity button:hover {
  background-color: #c9302c !important;
}

/* Input centriraj broj */
.woocommerce div.quantity input.qty {
  border: 1px solid #ddd !important;
  color: #000 !important;
  font-weight: normal !important;
  -moz-appearance: textfield !important;
}

/* Sakrij default browser strelice */
.woocommerce div.quantity input.qty::-webkit-inner-spin-button,
.woocommerce div.quantity input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Gumb Dodaj u košaricu */
.woocommerce div.quantity + button.single_add_to_cart_button {
  margin-top: 10px !important;
  width: 160px !important;
  height: 42px !important;
  font-size: 16px !important;
  border-radius: 6px !important;
  display: block !important;
}

/* Ukloni default browser strelice */
.woocommerce div.quantity input.qty::-webkit-inner-spin-button,
.woocommerce div.quantity input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* "Dodaj u košaricu" gumb u posebnom retku */
.woocommerce div.quantity + button.single_add_to_cart_button {
  display: block !important;
  margin-top: 10px !important;
  min-width: 160px !important;
  padding: 10px 20px !important;
  height: 42px !important;
  font-size: 16px !important;
  border-radius: 6px !important;
  width: auto !important;
}

/* Ukloni ikonice iz poruka */
.woocommerce-message .woocommerce-message__icon,
.woocommerce-error .woocommerce-error__icon {
    display: none !important;
}

/* Opći stil poruka */
.woocommerce-message,
.woocommerce-error {
    max-width: 1000px !important;  /* manja širina */
    margin: 20px auto !important; /* centrirano */
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    font-weight: 600;
    font-size: 1rem;
    box-sizing: border-box;
}

/* Pozitivna poruka - uspješno dodano */
.woocommerce-message {
    background-color: #d6f1d6 !important; /* nježno zelena */
    color: #2c6a2c !important;           /* tamno zelena */
}

/* Negativna poruka - greška */
.woocommerce-error {
    background-color: #fce4e4 !important; /* nježno crvena */
    color: #a94442 !important;             /* tamno crvena */
}

/* Tekst poruka - maksimalno širenje, razmak prema gumbu */
.woocommerce-message .woocommerce-message-text,
.woocommerce-error .woocommerce-error-message {
    flex-grow: 1;
    margin-right: 15px;
}

/* Stil gumba "Vidi košaricu" */
.woocommerce-message .button,
.woocommerce-error .button {
    white-space: nowrap;
    flex-shrink: 0;
    background-color: #28a745 !important; /* zeleni gumb za uspjeh */
    color: white !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    border: none !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: background-color 0.3s ease !important;
}

/* Gumb za greške */
.woocommerce-error .button {
    background-color: #d9534f !important;
}

.woocommerce-message .button:hover {
    background-color: #218838 !important;
}

.woocommerce-error .button:hover {
    background-color: #c9302c !important;
}

.woocommerce-message,
.woocommerce-message::before,
.woocommerce-message::after {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before {
	display: none !important;
}

.woocommerce-error {
	border: 0 !important;
}

/* === CENTRIRANJE TABOVA === */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    justify-content: center;
    text-align: center;
}

.woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th {
	background: transparent !important;
}

.woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th {
	vertical-align: middle !important;
}

.variations td, .variations th {
	text-align: left !important;
	padding-left: 0px !important;
}

.woocommerce div.product form.cart .reset_variations {
	position: absolute !important;
}

/* Cijena varijacije - istaknuto */
.woocommerce-variation.single_variation .price {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #cc0000 !important;
    margin-bottom: 10px !important;
    display: block !important;
}

/* Zaliha - zeleno i jasno vidljivo */
.woocommerce-variation.single_variation .stock {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #28a745 !important;
    margin-bottom: 15px !important;
    display: block !important;
    background: #eafbea !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
}

/* Gumb za dodavanje u košaricu - razmak od informacija */
.single_variation_wrap .woocommerce-variation-add-to-cart {
    margin-top: 20px !important;
}

/* Animacija kod promjene varijacije */
.woocommerce-variation.single_variation {
    transition: all 0.3s ease-in-out !important;
}

.woocommerce-variation.single_variation .stock {
    background: #eafbea !important;
    color: #28a745 !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    display: inline-block !important;
    font-size: 15px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.woocommerce-variation.single_variation .stock::before {
    content: "✔️ ";
    margin-right: 4px;
}

.woocommerce-variation.single_variation .price::after {
    content: " (s PDV-om)";
    font-size: 12px;
    color: #555;
    margin-left: 5px;
}

.woocommerce-variation.single_variation .stock::before {
    content: "Dostupnost: ";
    font-weight: 600;
    color: #333;
    margin-right: 5px;
}

@media (max-width: 768px) {
    .woocommerce-variation.single_variation .price {
        font-size: 20px !important;
    }

    .woocommerce-variation.single_variation .stock {
        font-size: 14px !important;
        padding: 6px 10px !important;
    }

    .single_variation_wrap .woocommerce-variation-add-to-cart {
        margin-top: 15px !important;
    }
	
	.woocommerce div.quantity button, .woocommerce div.quantity input.qty {
    width: 15% !important; /* trećina ukupne širine */
}
}


@media (max-width: 768px) {
  .elementor-column.sidebar-filters {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 40px);
    max-height: calc(100vh - 100px);
    background: #fff;
    z-index: 9999;
    overflow-y: auto;
    transition: opacity 0.3s ease;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    border-radius: 12px;
    opacity: 0;
    visibility: hidden;
    display: none !important;
  }

  .elementor-column.sidebar-filters.active {
    opacity: 1;
    visibility: visible;
    display: block !important;
  }

  body.filters-open::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    z-index: 9998;
  }

  .content-column {
    width: 100% !important;
  }

  .elementor-section .elementor-container {
    display: flex;
    flex-direction: column;
  }

  body.filters-open {
    overflow: hidden;
    height: 100vh;
  }
	
/* Zatvori gumb u gornjem desnom kutu popupa */
.close-filters {
	background-color: #d3292d;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-size: 15px;
    line-height: 1;
    padding: 12px 24px;
    fill: #fff;
    text-align: center;
    transition: all .3s;
	width: 100%
}
}


/* Swatchevi boja i veličina - ujednači dimenzije i dodaj razmak */
.tawcvs-swatches .swatch {
    width: 26px !important;
    height: 26px !important;
    margin: 6px !important;
    border-radius: 50% !important;
}

.tawcvs-swatches .swatch-label {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
}

/* Veličine - tekstualni swatchevi (label) */
.tawcvs-swatches .swatch-type-label {
    width: 34px !important;
    height: 34px !important;
    margin: 6px !important;
    border-radius: 50% !important;
}

/* Za varijacije kad ih je malo, poravnaj lijevo */
.variations tbody tr {
  display: inherit;
  align-items: center;
  gap: 10px; /* manji razmak između labela i vrijednosti */
  flex-wrap: wrap; /* da se prekine ako nema mjesta */
  margin-bottom: 10px;
}

/* Labela neka zauzima manji prostor i bude lijevo */
.variations tbody tr th.label {
  flex: 0 0 80px;
  text-align: left;
  padding-right: 10px;
  white-space: nowrap;
}

/* Vrijednost (swatchevi, inputi...) neka zauzme ostatak */
.variations tbody tr td.value {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Poravnanje swatcheva unutar vrijednosti */
.tawcvs-swatches {
  display: flex;
  flex-wrap: wrap;
}

.reset_variations {
  display: none !important;
}

/* Opcionalno smanji visinu inputa i swatcheva da budu skladniji */
.swatch-item-wrapper .swatch {
  min-width: 30px;
  min-height: 30px;
  font-size: 14px;
  line-height: 30px;
  padding: 0 8px;
}

ul.flex-direction-nav {
    position: absolute;
    top: 30%;
    z-index: 99999;
    width: 100%;
    left: 0;
    margin: 0;
    padding: 0px;
    list-style: none;}

li.flex-nav-prev {float: left;}
li.flex-nav-next {float: right;}
a.flex-next {visibility:hidden;}
a.flex-prev {visibility:hidden;}

a.flex-next::after {
	visibility:visible;
	content: '\f054';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	margin-right: 10px;
	font-size: 20px;   
}

a.flex-prev::before {
    visibility:visible;
    content: '\f053';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	margin-left: 10px;
	font-size: 20px;
}

ul.flex-direction-nav li a {
	color: #ccc;
}

ul.flex-direction-nav li a:hover {
	text-decoration: none;
}

ul.flex-direction-nav li a {
	color: #ccc;
}

ul.flex-direction-nav li a:hover {
	text-decoration: none;
}

.woocommerce div.product div.images img {
	border-radius: 5px !important;
	padding: 2px !important;
}

/* Osnovni stil za oba gumba */
.wc-block-components-button.contained {
  background-color: #d3292d !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  transition: background-color 0.3s ease;
}

/* Hover efekt - malo tamnija crvena */
.wc-block-components-button.contained:hover {
  background-color: #a32222 !important;
  color: #fff !important;
}

/* Uklanjanje svih unutarnjih obruba i sjena */
.wc-block-components-button.contained:focus,
.wc-block-components-button.contained:active {
  box-shadow: none !important;
  outline: none !important;
}