/*
 * Marra – osnovni stilovi (tipografija, linkovi, gumbi, obrasci).
 * Elementor stranice imaju vlastite stilove; ovo je temelj za sve ostalo
 * (trgovina, košarica, blagajna, račun, pravne stranice).
 */

/*
 * Cormorant Garamond ima "stare" brojke (spuštene, različite visine).
 * Lining brojke su iste visine kao velika slova – u naslovima, cijenama i svugdje.
 */
html {
	font-feature-settings: "lnum" 1;
	font-variant-numeric: lining-nums;
}

body {
	background-color: var(--marra-ivory);
	color: var(--marra-ink);
	font-family: var(--marra-font-body);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--marra-black);
	font-family: var(--marra-font-display);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.1;
	margin-block: 0 0.6em;
}

h1 {
	font-size: clamp(2.4rem, 5vw, 3.6rem);
	text-transform: uppercase;
}

h2 {
	font-size: clamp(1.9rem, 3.6vw, 2.8rem);
	text-transform: uppercase;
}

h3 {
	font-size: clamp(1.35rem, 2.2vw, 1.6rem);
}

strong,
b {
	font-weight: 500;
}

a {
	color: var(--marra-caramel);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--marra-transition);
}

a:hover,
a:focus {
	color: var(--marra-black);
}

::selection {
	background-color: var(--marra-blush-strong);
	color: var(--marra-black);
}

/* Hello reset.css daje :focus-visible bijeli box-shadow 4px + crni obrub 2px.
   Isti selektori kao u resetu, da ga nadjačaju. */
:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	box-shadow: none;
	outline: 1px solid var(--marra-caramel);
	outline-offset: 3px;
}

/* Polja: samo obrub od 1 px mijenja boju, bez dodatnog okvira */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: none;
}

img {
	height: auto;
	max-width: 100%;
}

/* Kontejner */
.marra-container {
	margin-inline: auto;
	max-width: calc(var(--marra-container) + 2 * var(--marra-gutter));
	padding-inline: var(--marra-gutter);
}

/* Mala oznaka iznad naslova */
.marra-label {
	color: var(--marra-caramel);
	display: inline-block;
	font-family: var(--marra-font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: var(--marra-tracking-label);
	text-transform: uppercase;
}

/* Gumbi */
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background-color: var(--marra-black);
	border: 1px solid var(--marra-black);
	border-radius: var(--marra-radius);
	color: var(--marra-cream);
	cursor: pointer;
	display: inline-block;
	font-family: var(--marra-font-body);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: var(--marra-tracking-button);
	line-height: 1.2;
	padding: 16px 32px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var(--marra-transition), border-color var(--marra-transition), color var(--marra-transition);
}

.button:hover,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:focus,
button:focus {
	background-color: var(--marra-caramel);
	border-color: var(--marra-caramel);
	color: var(--marra-cream);
}

.button.marra-button--outline {
	background-color: transparent;
	color: var(--marra-black);
}

.button.marra-button--outline:hover {
	background-color: var(--marra-black);
	color: var(--marra-cream);
}

/* Obrasci */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea {
	background-color: var(--marra-white);
	border: 1px solid var(--marra-line);
	border-radius: var(--marra-radius);
	color: var(--marra-black);
	font-family: var(--marra-font-body);
	font-size: 15px;
	font-weight: 400;
	padding: 12px 14px;
	transition: border-color var(--marra-transition);
	width: 100%;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--marra-caramel);
	outline: none;
}

label {
	color: var(--marra-black);
	font-size: 14px;
	font-weight: 400;
}

/* Tablice */
table {
	border-collapse: collapse;
	width: 100%;
}

th,
td {
	border: 0;
	border-bottom: 1px solid var(--marra-line);
	padding: 14px 10px;
	text-align: start;
}

/* Hello Elementor dodaje sive pruge i okvire tablicama */
table tbody > tr:nth-child(odd) > td,
table tbody > tr:nth-child(odd) > th,
table tbody tr:hover > td,
table tbody tr:hover > th {
	background-color: transparent;
}

th {
	color: var(--marra-black);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: var(--marra-tracking-label);
	text-transform: uppercase;
}

/* Privremeno Hello zaglavlje (dok se ne izradi Elementor zaglavlje) */
.site-header .site-logo img,
.site-header .custom-logo {
	height: auto;
	max-height: 64px;
	width: auto;
}

/* Tekst na običnim stranicama (Uvjeti, Dostava, Privatnost...) */
.page-content {
	font-size: 16px;
	line-height: 1.8;
}

.page-content p,
.page-content ul,
.page-content ol {
	margin-block: 0 1.2em;
}

/* ------------------------------------------------------------------ */
/* Obične stranice (Kontakt, Uvjeti, Dostava…): naslov s više zraka    */
/* ------------------------------------------------------------------ */

body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .page-header {
	margin: 0 auto;
	padding: 72px 0 40px;
	text-align: center;
}

body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .page-header .entry-title {
	margin: 0 auto;
	max-width: none;
	text-align: center;
}

@media (max-width: 767px) {
	body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .page-header {
		padding: 44px 0 28px;
	}
}

/* Obične stranice: isti bočni razmak i širina kao ostatak trgovine */
body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) main.site-main {
	margin-inline: auto;
	max-width: calc(var(--marra-container) + 2 * var(--marra-gutter));
	padding-inline: var(--marra-gutter);
	width: 100%;
}

/* Stranica s vlastitim naslovom u Elementoru (npr. O nama): razmak od zaglavlja */
body.page:not(.home) main.site-main:not(:has(> .page-header)) > .page-content {
	padding-top: 72px;
}

body.page:not(.home) .page-content {
	padding-bottom: var(--marra-space-xl);
}

@media (max-width: 767px) {
	body.page:not(.home) main.site-main:not(:has(> .page-header)) > .page-content {
		padding-top: 44px;
	}
}