/* GARAN oznaka + EU obavijest o zakonskom jamstvu - Nucleus d.o.o. Zagreb */

.garan-hidden { display: none !important; }

/* ---------- kompaktna oznaka na stranici proizvoda ---------- */
.garan-badge {
	margin: 12px 0 0;
	clear: both;
	line-height: 0;
}
.garan-badge--right  { text-align: right; }
.garan-badge--center { text-align: center; }
.garan-badge--left   { text-align: left; }
.garan-badge--full   { text-align: center; }

.garan-badge__trigger {
	display: inline-block;
	max-width: 100%;
	border: 0;
	cursor: pointer;
	text-decoration: none;
}
.garan-badge__img {
	display: inline-block;
	max-width: 100%;
	height: auto;
	/* Rub je namjeran: naljepnica ima bijelu podlogu kao i stranica,
	   pa joj se bez njega ne vide rubovi. */
	border: 1px solid #d6d6d6;
	border-radius: 2px;
	background: #fff;
	box-sizing: border-box;
}

/* Puna sirina stupca - oznaka se razvlaci preko cijele sive podloge. */
.garan-badge--full .garan-badge__trigger {
	display: block;
	width: 100%;
}
.garan-badge--full .garan-badge__img {
	display: block;
	width: 100%;
	height: auto;
}
.garan-badge__trigger:hover .garan-badge__img,
.garan-badge__trigger:focus .garan-badge__img {
	opacity: .75;
}

/* ---------- poveznica u podnozju ---------- */
.garan-notice {
	margin: 10px 0;
	line-height: 1.4;
}
.garan-notice__link {
	display: inline-block;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}
.garan-notice__icon { margin-right: 4px; }

/* Smjestena uz ikone karticnog placanja u podnozju (tema Warehouse).
   Odlomak s karticama ima font-size:0 (trik protiv razmaka medju slikama),
   pa se velicina i boja MORAJU postaviti izrijekom - nasljedjivanjem bi
   poveznica bila nevidljiva. Vrijednosti prate stavke izbornika u podnozju:
   1.1875rem (= 16.625px pri root 14px) i 400, kao stavke izbornika.
   Boja je #999, a ne #777 iz teme: na podlozi #2a2a2a tema daje kontrast 3.21,
   ispod WCAG AA praga 4.5. #999 daje 5.04 i ostaje u duhu podnozja.
   Stupac je uzak (~224px), pa poveznica ide u vlastiti redak ispod ikona. */
.garan-notice--inline {
	display: block;
	margin: 10px 0 0;
}
/* Selektor je namjerno "pretezak": tema ima
   a:link:not(.nav-link):not(.btn) {color:#353536} sa specificnoscu 0,3,1,
   sto bi na tamnom podnozju dalo gotovo nevidljivu poveznicu. Dvije klase
   + :link/:visited daju 0,4,0 i pobjedjuju bez !important. */
.garan-notice.garan-notice--inline .garan-notice__link,
.garan-notice.garan-notice--inline .garan-notice__link:link,
.garan-notice.garan-notice--inline .garan-notice__link:visited {
	font-size: 1.1875rem;
	font-weight: 400;
	line-height: 1.4;
	color: #999;
	text-decoration: none;
}
.garan-notice.garan-notice--inline .garan-notice__link:hover,
.garan-notice.garan-notice--inline .garan-notice__link:focus {
	color: #ccc;
	text-decoration: underline;
}

/* ---------- pop-up ---------- */
.garan-overlay {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0, 0, 0, .65);
	z-index: 100000;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 20px;
}
.garan-overlay__box {
	position: relative;
	background: #fff;
	max-width: 760px;
	margin: 0 auto;
	padding: 24px;
	border-radius: 3px;
	box-shadow: 0 6px 32px rgba(0, 0, 0, .4);
	text-align: left;
	line-height: 1.5;
}
.garan-overlay__close {
	position: absolute;
	top: 6px; right: 10px;
	width: 32px; height: 32px;
	font-size: 26px;
	line-height: 30px;
	text-align: center;
	color: #555;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}
.garan-overlay__close:hover { color: #000; }

.garan-modal__label {
	display: block;
	max-width: 320px;
	width: 100%;
	height: auto;
	margin: 0 auto 18px;
	border: 1px solid #e0e0e0;
	/* Grafike su djelomicno prozirne; bez bijele podloge se sadrzaj
	   stranice probija kroz njih dok se slika ucitava. */
	background: #fff;
}
.garan-modal__notice {
	display: block;
	width: 100%;
	max-width: 620px;
	height: auto;
	margin: 0 auto;
	background: #fff;
}
.garan-modal__short {
	font-size: 14px;
	padding: 12px 14px;
	background: #f5f7fa;
	border-left: 3px solid #0b4f9e;
	margin-bottom: 18px;
}
.garan-modal__stmt { font-size: 13px; }
.garan-modal__stmt h4 { margin: 0 0 10px; font-size: 15px; }
.garan-modal__stmt p  { margin: 0 0 10px; }

@media (max-width: 767px) {
	.garan-badge { text-align: center; }
	.garan-overlay { padding: 10px; }
	.garan-overlay__box { padding: 18px 14px; }
}

/* ---------- oznake u kosarici / na checkoutu ---------- */
.garan-cart {
	margin: 18px 0;
	padding: 14px 16px;
	border: 1px solid #e0e0e0;
	border-radius: 2px;
	background: #fafafa;
}
.garan-cart__title {
	margin: 0 0 10px;
	font-weight: 700;
}
.garan-cart__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.garan-cart__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 0;
}
.garan-cart__item + .garan-cart__item {
	border-top: 1px solid #ececec;
}
.garan-cart__trigger {
	flex: 0 0 auto;
	line-height: 0;
}
.garan-cart__img {
	display: block;
	width: 190px;
	max-width: 100%;
	height: auto;
	border: 1px solid #d6d6d6;
	border-radius: 2px;
	background: #fff;
	box-sizing: border-box;
}
.garan-cart__name {
	font-size: 13px;
	line-height: 1.35;
}

/* poveznica na odrediste QR koda u pop-upu */
.garan-modal__qr {
	margin: 16px 0 0;
	padding-top: 12px;
	border-top: 1px solid #eee;
	font-size: 13px;
}

@media (max-width: 480px) {
	.garan-cart__item {
		display: block;
	}
	.garan-cart__name {
		display: block;
		margin-top: 6px;
	}
}

/* ---------- samostalna stranica s obavijesti ---------- */
.garan-page__notice {
	display: block;
	width: 100%;
	max-width: 760px;
	height: auto;
	margin: 0 auto;
	/* Sluzbena grafika je djelomicno prozirna - bez bijele podloge
	   se kroz nju vidi pozadina teme. */
	background: #fff;
}
.garan-page__qr {
	margin: 18px 0 0;
	text-align: center;
}

/* ---------- naljepnica / obavijest kao poveznica ---------- */
/* Klik na grafiku (ukljucujuci QR kod u njoj) vodi na odrediste QR koda. */
.garan-modal__labellink {
	display: block;
	border: 0;
	text-decoration: none;
	cursor: pointer;
}
.garan-modal__labellink:hover .garan-modal__label,
.garan-modal__labellink:focus .garan-modal__label,
.garan-modal__labellink:hover .garan-modal__notice,
.garan-modal__labellink:focus .garan-modal__notice,
.garan-modal__labellink:hover .garan-page__notice,
.garan-modal__labellink:focus .garan-page__notice {
	outline: 2px solid #0b4f9e;
	outline-offset: 2px;
}